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:
but this doesn't seem to do anything.
Any help would be very... helpful. Thanks!
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
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:
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
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'
);
}
});
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!
Is it possible to have a workaround ASP.NET MVC Razor?
Thank you!
0
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.