This is a migrated thread and some comments may be shown as answers.

How to add “All” option in KendoGrid paging and make the grid pagesize as All and it should fetch all the records on page load when grid is binding.

1 Answer 1969 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rakesh
Top achievements
Rank 1
Rakesh asked on 11 May 2017, 01:01 AM

I have tried to put "All" in the PageSize = 'All' which didn't work, then i haven't provide any default value for the PageSize then Grid started showing all the records at pageload. But at the bottowm righ of the Grid it is showing as "NaN - NaN of 115 items".
What my client want is by default All option should be selected on the Grid pager dropdown and that should show all the records in the Grid with correct paging. Can someone please help me by providing solution for this problem please?

Data I am getting form the database to bind the Grid.
Thanks in advance.

My Code:

BindMyGrid: function (gridData) {
 $("#MyGrid").empty();
        if (gridData !== undefined && gridData !== null && gridData.length > 0) {
            $("#MyGrid").kendoGrid({
                dataSource: {
                    data: gridData
                   // pageSize: 'All'
                },
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                selectable: 'multiple',
                scrollable: false,
                pageable: {
                    input: false,
                    numeric: true,
                    previousNext: true,
                    butonCount: 5,
                    pageSizes: [10, 20, 30, 40, ALL]
                },
                dataBound: function (e) {
                    var grid = e.sender;
                    grid.select(grid.tbody.find(">tr:first"));
                },
                detailInit: WorkPartyAllocationsData.detailInit,
                columns: [
                        { field: "ProductName", title: "Product Name", width: "400px" },
                        { field: "TotalItems", title: "Total Items", width: "175px" }
                ]
            });
        }
},

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 12 May 2017, 01:04 PM
Hi Rakesh,

I checked your code an noticed that you set the "All" option without quotes. This value has to be a string in order to work. You specify it as a variable that I do not see declared anywhere.

As for displaying all records by default, without disabling paging, what I can suggest is to trigger a paging operation that displays all records right after initially binding the Grid:
$("#grid").data("kendoGrid").one("dataBound", function(e){
  var dataSource = e.sender.dataSource,
      total = dataSource.total();
 
  dataSource.pageSize(total);
});

This will result in two bindings one after another but there is no other way to check the total number of records before the Grid data is loaded. 

Another option is to set the DataSource pageSize to a big enough number to accommodate all rows, but then the page sizes dropdown will display this number an not "All".

Regards,
Tsvetina
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
General Discussions
Asked by
Rakesh
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or