How to disable paging on a kendogrid

1 Answer 6659 Views
Grid
Feroz
Top achievements
Rank 1
Feroz asked on 06 Aug 2013, 06:14 PM
We are using a Kendo grid. I created a table in my cshtml file and in my js file, I bind it to the data. My problem here is that the grid paging does not go away. I need all the items on one single page since we don't expect much load. I tried removing the pageable attribute and I tried marking pageable: false. But I still see that the grid displays only 10 items in one page and gives the paging.By using this.pager.element.hide(), we can hide the pager but that does not solve the purpose since the pager is hidden but the paging is still being done. So, now, the elements starting 11th element are on the next page but we wont be able to navigate to it.Here is the existing code. I have removed the irrelevant 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>

Here is the script:

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

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 07 Aug 2013, 11:15 AM
Hi Feroz,

The default page size of the grid is 10, so if you do not set the pageSize configuration, the grid will always show 10 records per page. If you want to show all the records at once, just calculate the number of the records and set this number as a pageSize property. This way you will still see the pager (you already know how to hide it) but all the records will be displayed on one page. 

I would suggest you to take a look at our documentation regarding the DataSource on the following link:

http://docs.kendoui.com/api/framework/datasource#configuration-pageSize

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Feroz
Top achievements
Rank 1
commented on 08 Aug 2013, 08:56 PM

Thanks Kiril. I was able to make it work that way by setting the page size to the length of the array of items... but if pageable:false does not do that task, then waht is the use of the pageable attribute? I thought if pageable is set to false, there should be no paging.
Kiril Nikolov
Telerik team
commented on 12 Aug 2013, 07:16 AM

Hello Feroz,

Setting pagable to false will not display the pager widget in the grid, while the pageSize property sets the number of records displayed on the page. In your case when you set the pageSize to be the maximum value and still have pageable set to true, the pager will be display on the bottom of the grid, so the point of setting pageable to false is to prevent the pager from showing to the user.
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Brad
Top achievements
Rank 1
commented on 12 Jan 2017, 04:39 PM

I know this has been a while, but i'm really not a big fan of this answer.  if you have a grid that refreshes when new data comes in, so that the total rows changes, then this solution doesn't really work does it?  cause then the paging value would be the previous total.  basically, every time the grid refreshes, you would have to reset the paging to the new total, wouldn't you?
Dimiter Topalov
Telerik team
commented on 16 Jan 2017, 09:09 AM

Hi Brad,

If all records have to be displayed with no pager, setting scrollable to false, and omitting both the dataSource.pageSize, and the Grid pageable properties, will result in rendering all rows and no pager, regardless of the number of items:

http://dojo.telerik.com/ItUHu

I hope this helps, but if I am missing something, please describe the scenario, and the desired layout, in further details, so we can try to provide a more to-the-point suggestion. Meanwhile, you can find detailed information about the Grid appearance in the most common use cases in the following section of our documentation:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Feroz
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or