能够在Kendo网格中使用jquery添加pagesize下拉列表

时间:2016-01-01 09:02:23

标签: jquery kendo-ui telerik kendo-grid telerik-grid

我的问题可能看似多余,但我需要的是能够使用jquery在网格寻呼机中添加\ show pagesize下拉列表。我在运行时需要这个,而不是在html中指定寻呼机设置。请考虑以下示例

Jsfidlle

使用以下

替换上述链接中的html
<div id="grid"
    data-role="grid"
    data-sortable="true"
    data-selectable="true"
    data-pageable="{ refresh: true }"
    data-columns='[
                { field: "FirstName", title: "First Name"},
                { field: "LastName", title: "Last Name" },
                { field: "City" } ]'
    data-bind="source: info">
</div>

添加javascript后 - kendo.bind($(“#grid”),{info:ds});

var gridPager = $("#grid").data("kendoGrid");
gridPager.pager.options.pageSizes = [10,20,50]; // This code line is not working expected

我尝试了各种选项但无法找到解决此问题的方法。可能是我错过了很小的东西。

1 个答案:

答案 0 :(得分:0)

请尝试使用以下代码段。

kendo.bind($("#grid"), { info: ds });
var gridPager = $("#grid").data("kendoGrid");

var dropDown = $("#grid .k-pager-sizes").find('select').data("kendoDropDownList");
var datalength = dropDown.dataSource.data().length;
for (var i = 0; i <= datalength; i++) {
    var itemToRemove = dropDown.dataSource.at(0);
    dropDown.dataSource.remove(itemToRemove);
}
dropDown.dataSource.add({ text: "10", value: "10" });
dropDown.dataSource.add({ text: "12", value: "12" });
dropDown.dataSource.add({ text: "15", value: "15" });
dropDown.select(0);

如果有任何疑虑,请告诉我。