我已经设置了kendo ui网格,以从返回JSON的MVC操作读取数据。由于成本原因,我使用的是Kendo的免费版本,而不是特定的MVC。
问题在于,当页面加载并执行网格的初始填充时,它不会显示加载微调器。填充网格后,我转到另一页或对它显示的列进行排序。
如果设置网格的height参数,则会得到初始微调器,但网格仅显示一行(应该显示20行)。
有谁知道为什么必须设置height参数?或在不设置高度的情况下使微调器工作的任何方式。
我的剑道Javascript Kode:
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
//kendo.ui.progress($("#loading"), true); <-- this works on initial load, but gives two spinners on every page or sort change
},
requestEnd: function () {
//kendo.ui.progress($("#loading"), false);
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
}),
height: "100%", <-- I want to avoid this as it renders the grid way to small
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: '<a href="/InvoiceGroup/InvoiceGroupDetails2/#: InvoiceGroupId #">See details</a>'
}
],
});
解决方案var使用变量来告诉我数据集负载是否是初始负载。这不是一个完美的解决方案,但它是我唯一能够完成工作的解决方案。
var initialLoad = true;
$("#grid").kendoGrid({
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: '<a href="/InvoiceGroup/InvoiceGroupDetails2/#: InvoiceGroupId #">See details</a>'
}
],
});
var ds = new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
if (initialLoad) <-- if it's the initial load, manually start the spinner
kendo.ui.progress($("#invoiceGroupGrid"), true);
},
requestEnd: function () {
if(initialLoad)
kendo.ui.progress($("#invoiceGroupGrid"), false);
initialLoad = false; <-- make sure the spinner doesn't fire again (that would produce two spinners instead of one)
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句