Any way to add "All" to pageSizes array?

7 posts, 1 answers
  1. Alexander
    Alexander avatar
    19 posts
    Member since:
    Jun 2012

    Posted 15 Oct 2012 Link to this post

    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"]';
    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";

    but this doesn't seem to do anything.

    Any help would be very... helpful. Thanks!
  2. Scott Marx
    Scott Marx avatar
    38 posts
    Member since:
    Apr 2010

    Posted 25 Jul 2013 Link to this post

    Did you ever find a way to add All?
  3. Answer
    Brian avatar
    17 posts
    Member since:
    Nov 2012

    Posted 25 Jul 2013 Link to this post

    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');
        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{ data: pageSizes }));
  4. Artur
    Artur avatar
    3 posts
    Member since:
    Nov 2011

    Posted 23 Sep 2014 Link to this post

    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;
  5. Jean-Philippe
    Jean-Philippe avatar
    5 posts
    Member since:
    Dec 2010

    Posted 17 Feb 2015 Link to this post

    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!
  6. Kiril Nikolov
    Kiril Nikolov avatar
    2598 posts

    Posted 20 Feb 2015 Link to this post

    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.

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Peter
    Peter avatar
    1 posts
    Member since:
    May 2014

    Posted 15 Jul 2015 in reply to Brian Link to this post

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


    Grabbed the total from datasource.

Back to Top