以 Kendo Grid 页面大小显示全部
Posted
技术标签:
【中文标题】以 Kendo Grid 页面大小显示全部【英文标题】:Show All in Kendo Grid page sizes 【发布时间】:2014-10-12 06:48:27 【问题描述】:您好,有什么方法可以在 Kendo Grid 的 Page Sizes 数组中显示全部?
这是我的代码
$("#mygrid").kendoGrid(
sortable: true,
pageable:
pageSizes: [15,20,25,50,100,Show All]
,
如何做到这一点?
谢谢
【问题讨论】:
【参考方案1】:我不确定为什么所有答案看起来都如此复杂。 答案很简单,这是我在实际项目中使用的部分代码:
pageable:
pageSize: 10,
pageSizes: [10, 25, 50, 100, "All"],
messages:
itemsPerPage: "vendors",
display: "0-1 from 2 vendors",
empty: "No data",
allPages: "Show All"
【讨论】:
【参考方案2】:在 Asp.Net MVC(Razor 或服务器端)中,您可以使用 Pageable
方法 PageSizes
在 ture 重载的默认值中,将页面大小设置为:5 10 20
如果您需要自定义值,请使用 IEnumerable string collection
重载:
.Pageable(pageable => pageable.PageSizes(new string[] "5", "10", "15", "20", "All" )
【讨论】:
明确地将数组创建为字符串对我有用。【参考方案3】:这样试试
使用DropDown
创建自定义工具栏。在下拉更改中编写您的代码。
查看
<div id="grid">
</div>
脚本
<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>
演示:http://jsfiddle.net/mgdnE/163/
如果您有任何疑问,请告诉我。
【讨论】:
谢谢,我只找这个:) Kendo 已内置支持pagesize 'all'。 为什么这个例子不像剑道ui数据网格部分的首页。以上是关于以 Kendo Grid 页面大小显示全部的主要内容,如果未能解决你的问题,请参考以下文章
在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度