Show all under Kendo Grid
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.
source to share
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"
}
}
source to share
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
source to share
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" })
source to share