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.

[Rakesh]

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" }
                ]
            });
        }
},

[Tsvetina]

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