CODEWITHSUNDEEP
jquerykendo-uitelerikkendo-gridtelerik-grid
Jatinder Singh
Jatinder Singh

Reputation: 51

To be able to add pagesize dropdown using jquery in Kendo grid

My question may seem redundant but what I need is ability to add\show pagesize dropdown in the grid pager using jquery. I need this on runtime and not specify the pager settings in the html. Consider the following example

Jsfidlle

Replace the html in the above link with the following

<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>

Add the javascript after -- kendo.bind($("#grid"), { info: ds});

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

I tried various options but couldn't find a solution to this problem. May be I am missing something very small.

Upvotes: 0

Views: 912

Answers (1)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with the below code snippet.

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);

Let me know if any concern.

Upvotes: 0

Related Questions