-1

以下のコードでは、列ヘッダーを取得していますが、すべての列で下のデータをフィルター処理するための自動テキスト ボックスを取得していません。この属性は剣道グリッド filterable:{ mode: "row"} で呼び出されましたが、この属性を以下に追加しました結果はまだ来ていませんでした。しかし、私が MVC で実行した同じコードは正常に動作しており、助けてください。

 grid = $("#gridAllPayers").data("kendoGrid");
    var gridHeight = $(window).height() - 220;
    var configuration = {
        columns: getheaderswithcolumns(),
        resizable: true,
        columnMenu: true,
        reorderable: true,
        height: gridHeight,
        filterable: {
            mode: "row"
        },
        navigatable: true,
        sortable: true,
        pageable: {
            input: true,
            numeric: true
        }
    };

    var Feedback = $("#gridAllPayers").kendoGrid(configuration).data("kendoGrid");

}
function getheaderswithcolumns() {
    var cols = new Array();
    cols.push(
        {
            field: "PayerName", title: "Insurance Name", headerAttributes: { "class": "table-header-cell", style: "text-align:center;font-size: 13px" },
            width: 220, attributes: { style: "text-align:left;" },
        },
        {
            field: "PayerPlan", title: "Plan Name", headerAttributes: { "class": "Test", style: "text-align: left; font-size: 13px" }, width: 220,
            attributes: { style: "text-align:left;" },
        },
        {
            field: "State", title: "Insurance's State", headerAttributes: { "class": "table-header-cell", style: "text-align: left; font-size: 13px" }, width: 200,
            attributes: { style: "text-align:left;" },
        },
        {
            field: "ClaimStatusPhoneNumber", title: "Claim Status #", headerAttributes: { "class": "table-header-cell", style: " font-size: 13px" }, width: 200,
            attributes: { style: "text-align:left;" },


        },
        {
            field: "ClaimMailingAddress", title: "Claim's Mailing Address", headerAttributes: { "class": "table-header-cell", style: "font-size: 11px" }, width: 300,

        }
      )
    return cols;
}

<link href="kendoui/kendo.dataviz.default.css" rel="stylesheet" />
    <link href="kendoui/kendo.default.min.css" rel="stylesheet" />
    <link href="kendoui/kendo.common.min.css" rel="stylesheet" />
    <link href="kendoui/kendo.dataviz.default.css" rel="stylesheet" />
    <script type="text/javascript" src="content/js/kendo.all.min.js"></script>


    <div id="gridAllPayers">

    </div>
4

1 に答える 1

0

上記のレイアウトに似たページのモックアップを作成しました。その後、Kendo UI を最新バージョンに設定すると、期待どおりに動作しました。その後、古いバージョンに設定すると、行フィルター (サポートされていません) が表示されません。

コードは次のとおりです。

var griddataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        PayerName: "Jane Doe",
        PayerPlan: "planer",
        State: "NE",
        ClaimStatusPhoneNumber: "1234",
        ClaimMailingAddress: "Howdy lane"
    }, {
        id: 2,
        PayerName: "Jany Doe",
        PayerPlan: "planer",
        State: "GA",
        ClaimStatusPhoneNumber: "1234345",
        ClaimMailingAddress: "123 Howdy lane"
    }

    ],
    batch: true,
    schema: {
        model: {
            fields: {
                "id": {
                    editable: false,
                    nullable: true
                },
                    "PayerName": {
                    editable: true,
                    nullable: false
                },
                    "PayerPlan": {
                    editable: true,
                    nullable: true
                },
                    "State": {
                    editable: true,
                    nullable: true
                },
                    "ClaimStatusPhoneNumber": {
                    editable: true,
                    nullable: true
                },
                    "ClaimMailingAddress": {
                    editable: true,
                    nullable: true
                }
            }

        }
    }
});
//var grid = $("#gridAllPayers").data("kendoGrid");
var gridHeight = 330; // $(window).height() - 220;
var configuration = {
    columns: getheaderswithcolumns(),
   // resizable: true,
   // columnMenu: true,
  //  reorderable: true,
   // height: gridHeight,
    //filterable: true,
    filterable: {
                mode: "menu, row"
     },
    dataSource: griddataSource,
   // navigatable: true,
   // sortable: true,
    pageable: {
        input: true,
        numeric: true
    }
};

var Feedback = $("#gridAllPayers").kendoGrid(configuration).data("kendoGrid");
griddataSource.insert(3, {
    id: 3,
    PayerName: "John Doe",
    PayerPlan: "planer",
    State: "NE",
    ClaimStatusPhoneNumber: "1234",
    ClaimMailingAddress: "Howdy lane"
});
griddataSource.insert(4, {
    id: 4,
    PayerName: "Jackne Doe",
    PayerPlan: "planer",
    State: "NE",
    ClaimStatusPhoneNumber: "1234",
    ClaimMailingAddress: "Howdy lane"
});
Feedback.refresh();


function getheaderswithcolumns() {
    var cols = [];
    cols.push({
        field: "PayerName",
        title: "Insurance Name",
        headerAttributes: {
            "class": "table-header-cell",
            style: "text-align:center;font-size: 13px"
        },
        width: 220,
        attributes: {
            style: "text-align:left;"
        },
        filterable: {
            cell: {
                showOperators: false
            }
        }
    }, {
        field: "PayerPlan",
        title: "Plan Name",
        headerAttributes: {
            "class": "Test",
            style: "text-align: left; font-size: 13px"
        },
        width: 220,
        attributes: {
            style: "text-align:left;"
        }
    }, {
        field: "State",
        title: "Insurance's State",
        headerAttributes: {
            "class": "table-header-cell",
            style: "text-align: left; font-size: 13px"
        },
        width: 200,
        attributes: {
            style: "text-align:left;"
        }
    }, {
        field: "ClaimStatusPhoneNumber",
        title: "Claim Status #",
        headerAttributes: {
            "class": "table-header-cell",
            style: " font-size: 13px"
        },
        width: 200,
        attributes: {
            style: "text-align:left;"
        }
    }, {
        field: "ClaimMailingAddress",
        title: "Claim's Mailing Address",
        headerAttributes: {
            "class": "table-header-cell",
            style: "font-size: 11px"
        },
        width: 300
    });
    return cols;
}

ここで作業バージョンを参照してください: http://jsfiddle.net/zLm35vfe

そして、動作しない古いバージョン: http://jsfiddle.net/zLm35vfe/1/

この古い (サポートされていない) バージョンは、ここで説明されているように CDN を使用することに注意してください: http://docs.telerik.com/kendo-ui/install/cdn

https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.jsの特定のバージョンが含まれています

于 2015-08-20T13:19:12.490 に答える