Any way to add "All" to pageSizes array?

[Alexander]

I am looking to add an option for "All" to the drop-down list of page sizes in the Kendo Web UI grid.

The pageSizes: property of .kendoGrid() will only accept integer arrays.

I've tried finagling the dropdown after grid init like so:

var testSelector = '.k-pager-sizes select[data-role="dropdownlist"]';
var test = $(testSelector).data('kendoDropDownList');



test.options.dataSource = [
  { value: 20, text: "20" },
  { value: 50, text: "50" },
  { value: 100, text: "100" },
  { value: 9007199254740992, text: "All" }
];



test.options.dataTextField = "text";

test.options.dataValueField = "value";


test.refresh();

but this doesn't seem to do anything.

Any help would be very... helpful. Thanks!

[Scott Marx]

Did you ever find a way to add All?

[Brian]

There's an active user voice going on for this (2 actually it seems but this one is further along)
encourage you to vote for it here

In the meantime I've contacted them on this and they've provided me with a solution that seems to work:

var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind('change',function(){
    var current = $(".k-dropdown span.k-input").text();
    if(current == 50){
        $(".k-dropdown span.k-input").text('All');
    }
});

Where "50" would be the size of your data source elements in the grid.

So ideally before you create your grid you would figure out the length of your data source, pass it into the pageSizes array that the grid takes in, bind to this event shown above and do a check to determine if the grid's datasource is showing all the elements and if so change the text to "All"

EDIT: You can also make "All" appear as an option in the pager drop down by doing the following

var pageSizes = [{ text: "5", value: 5 }, { text: "10", value: 10 }, { text: "25", value: 25 },{ text: "All", value: 50 }];

$('.k-pager-sizes select[data-role="dropdownlist"]').data('kendoDropDownList').setDataSource(new kendo.data.DataSource({ data: pageSizes }));

[Artur]

You can add "all" the folowing tricky way:

var pageSizeDropDown = kPager.element.find("select").data("kendoDropDownList");
 pageSizeDropDown.dataSource.add({ text: "all", value: 1000000 });
 pageSizeDropDown.valueTemplate = function (e) {
   if (e.text === "1000000") {
      return "all";
   } else {
      return e.text;
   }
};

[Jean-Philippe]

I tried your suggestions but it is not working with ASP.NET MVC.

Is it possible to have a workaround ASP.NET MVC Razor?

Thank you!

[Kiril Nikolov]

Hello Jean-Philippe,

You can use the Events() wrapper of the DataSource and bind to the change event and there execute the logic from the post below. If it does not help, send us a sample of what you have tried and we will be happy to take a look.

Regards,
Kiril Nikolov
Telerik

 

 

[Peter]

var grid = $("#grid").data("kendoGrid");

var pageSizes = [{ text: "5", value: 5 }, { text: "10", value: 10 }, { text: "25", value: 25 },{ text: "All", value: grid.dataSource.total() }];
$('.k-pager-sizes select[data-role="dropdownlist"]').data('kendoDropDownList').setDataSource(new kendo.data.DataSource({ data: pageSizes }));​

 

Grabbed the total from datasource.