How to disable paging on kendogrid

Question

We use a kendo grid. I created a table in my cshtml file and in my js file, I bind it to data. My problem here is that the paging grid does not disappear. I need all the elements on the page, since we do not expect a big load. I tried to remove the page attribute, and I tried marking pageable: false . But I still see that the grid only displays 10 elements on one page and gives paging.

Using this.pager.element.hide() , we can hide the pager, but this will not solve the target, since the pager is hidden, but the pager is still being executed. So, now the elements starting with the 11th element are on the enext page, but we will not be able to go to it.

Here is the existing code. I deleted the unnecessary columns in the table. .CSHTML File:

  <table style="width: 100%;" class='list-entity' id='inboxItems'> <thead> <tr> <th data-field='Actions' class="iconCell" style='width: 1%'>&nbsp;</th> <### THERE ARE MORE COLUMNS HERE AND THOSE HAVE CORRESPONDING COLUMNS IN SETTINGS ###> </tr> </thead> </table> 

JS file:

  var settings = { kendosettings: { dataSource: { data: requestItemsList, schema: { // required if get method will be used model: { id: "StepApproverKey" } }, group: [ { field: "GroupByAttribute", dir: "asc", aggregates: [ { field: "GroupByAttribute", aggregate: "count" }] }] }, sort: { field: "SubmittedOn", dir: "desc" }, sortable: true, pageable: false, scrollable: false, columns: [ { field: "Actions", title: "Actions", template: kendo.template($("#inboxrowEditTemplate").html()) }, { field: "StepApproverKey", hidden: true }, { field: "GroupByAttribute", hidden: true, groupHeaderTemplate: kendo.template($("#inboxrowgroupHeaderTemplate").html()), headerAttributes: { style: "width: 100%" } } ], selectable: "row", } }; $('#inboxItems').pdi().displaygrid(settings); 

Answer 1

I posted this on the Kendo forum, and it seems the only way to resolve this is to dynamically set the grid page size and then hide the pager. In our case, since we want all the elements to be on the same load, we set it to the length of the list sent to the client. Below is the code I used and it works.

 var inboxGrid = $('#inboxItems').data("kendoGrid"); inboxGrid.dataSource.pageSize(<NUMBER OF ITEMS IN THE LIST>); inboxGrid.refresh(); inboxGrid.bind("dataBound", function () { this.pager.element.hide(); }); 

Answer 2

Using:

 inboxGrid.bind("dataBound", function () { this.pager.element.hide(); }); 

didn't work for me. Maybe because I use Razor and MVC to display the grid, or maybe because we use Bootstrap for CSS, I don’t know. But I did it, instead:

 var inboxGrid = $('#inboxItems').data("kendoGrid"); inboxGrid.dataSource.pageSize(inboxGrid.dataSource.total()); inboxGrid.refresh(); $('[class*="k-pager-nav"]').hide();