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

Any way to add "All" to pageSizes array?

6 Answers 329 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alexander
Top achievements
Rank 1
Alexander asked on 15 Oct 2012, 06:52 PM
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!

6 Answers, 1 is accepted

Sort by
0
Scott Marx
Top achievements
Rank 1
answered on 25 Jul 2013, 06:33 PM
Did you ever find a way to add All?
0
Accepted
Brian
Top achievements
Rank 1
answered on 25 Jul 2013, 06:49 PM
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 }));
0
Artur
Top achievements
Rank 2
answered on 23 Sep 2014, 09:47 AM
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;
   }
};
0
Jean-Philippe
Top achievements
Rank 1
answered on 17 Feb 2015, 05:55 PM
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!
0
Kiril Nikolov
Telerik team
answered on 20 Feb 2015, 09:22 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 15 Jul 2015, 11:59 PM
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.

Tags
Grid
Asked by
Alexander
Top achievements
Rank 1
Answers by
Scott Marx
Top achievements
Rank 1
Brian
Top achievements
Rank 1
Artur
Top achievements
Rank 2
Jean-Philippe
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Peter
Top achievements
Rank 1
Share this question
or