-1

在下面的代码中，我得到了列标题，但我没有得到自动文本框来过滤每一列下面的数据，这个属性在 kendo grid 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 回答