Add All to Grid Pager's Page Size Dropdown Via Scripting

3 posts, 0 answers
  1. Duff
    Duff avatar
    2 posts
    Member since:
    Oct 2017

    Posted 13 Aug 2020 Link to this post

    I am attempting to add an “All” option to the page size dropdown in a grid’s pagination so that the grid can display all items if needed.

    Prior to updating to version R2 2020 we called a script that checked the page size <select> to see if “All” was present as an option. If not it would insert the text and value for the option. It was based on the method described here: Set All Page Size in Grid for ASP.NET Core. This no longer seems to work since the Pager component was updated. What would be the R2 2020 friendly version of that solution? Because calling that scripting breaks the grid’s Pager now and the buttons appear disabled with no change to the page size dropdown. 

  2. Duff
    Duff avatar
    2 posts
    Member since:
    Oct 2017

    Posted 13 Aug 2020 in reply to Duff Link to this post

    Meant to attach this screenshot instead of two of the same one. Ugh. Late night. 
  3. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 18 Aug 2020 Link to this post

    Hi Duff,

    Thank you for the provided images.

    Achieving the same result needs another selector for targeting the pager dropdown. After getting the needed instance, add the "all" option to the datasource of the pager dropdown. Here is an example:

    $( document ).ready(function() {
           var grid = $('#grid').data('kendoGrid');
           var pageSizeDropDownList = $(".k-pager-sizes").find("select").data("kendoDropDownList");
                pageSizeDropDownList.dataSource.add({text:"All", value:'all'});
                pageSizeDropDownList.dataSource.sync();
    });
    The complete example of the  implementation could be found in the demo below:

    Let me know if further assistance is needed.

    Best Regards,
    Anton Mironov
    Progress Telerik

Back to Top