Show all under Kendo Grid
Hi, is there a way to show everything in the Kendo Grid page sizes array?
Here is my code
$("#mygrid").kendoGrid({
sortable: true,
pageable: {
pageSizes: [15,20,25,50,100,Show All]
},
How to do it?
thank
try it
Create a custom toolbar with DropDown
.On DropDown Change write your code.
View
<div id="grid">
</div>
Script
<script type="text/javascript">
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 1,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true},editable: false, },
UnitPrice: { type: "Text", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
toolbar: [
{
template: $("#template").html()
}],
navigatable: true,
pageable: {
pageSizes: [15,20,25,50,100]
},height:500,
columns: [
"ProductName",
{field: "UnitPrice", title: "Unit Price", width: 110 },
{ field: "UnitsInStock", title: "Units In Stock", width: 110 },
{ field: "Discontinued", width: 110 }],
});
$("#grid").find(".k-grid-toolbar").insertAfter($("#grid .k-grid-content"));
$('#category').change(function(){
var value = $(this).val();
if(value != null)
{
if(value == "4")
{
grid.data("kendoGrid").dataSource.pageSize(grid.data("kendoGrid").dataSource.data().length);
}
else
{
grid.data("kendoGrid").dataSource.pageSize(parseInt(value));
}
}
});
});
</script>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<select id="category" style="width: 80px">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="4">Show All</option>
</select>
</div>
</script>
Demo : http://jsfiddle.net/mgdnE/163/
If you have any questions, please let me know.
I'm not sure why all of the answers seem so complicated. The answer was very lightweight, here is some of the code I'm using in a real project:
pageable: {
pageSize: 10,
pageSizes: [10, 25, 50, 100, "All"],
messages: {
itemsPerPage: "vendors",
display: "{0}-{1} from {2} vendors",
empty: "No data",
allPages: "Show All"
}
}
You can try to pass the number of data sources for the page size. Take a look here: http://www.telerik.com/forums/how-to-show-all-records-in-a-grid-pagesize
Greetings
in Asp.Net MVC (Razor or server side) you can use the method Pageable
PageSizes
in defaults for the ture overload parameter the page size is set: 5 10 20
if you need custom values โโuse IEnumerable string collection
overload:
.Pageable(pageable => pageable.PageSizes(new string[] { "5", "10", "15", "20", "All" })
Page sizes: [1,10, 50, 100, 500, 1000, "All"]
Page sizes: [1,10, 50, 100, 500, 1000, "All"] I didn't copy the pasted answer, I used my live project code here ..