我正在尝试以编程方式更改 Kendo UI 网格控件的页面，但似乎无法通过 dataBound 事件使其完全工作，建议作为通过 dataSource 页面属性设置页面的替代方法，但由于某种原因，该事件不会”无法使用先前初始化的 ASP.NET MVC razor 代码隐藏定义的 Grid，该网格不会公开页面属性（至少在版本 2021.2.616 中）...
替代的 JavaScript 代码确实更改了页面，但陷入了递归循环，并且加载器永远不会消失，因为它似乎陷入了下面example末尾的 dataBound 事件处理函数代码中：
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp",
data: function() {
return {
page: dataSource.page(),
pageSize: dataSource.pageSize()
};
}
},
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: 20,
serverPaging: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductID", title: "ID", width: "50px" },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "UnitsInStock", title: "Units In Stock" },
{ command: ["edit", "destroy"], title: " ", width: "150px" }
],
editable: "inline"
});
// Bind to the dataBound event
$("#grid").data("kendoGrid").bind("dataBound", function(e) {
// Change the page value or perform other actions here
console.log("Grid data bound");
$("#grid").data("kendoGrid").dataSource.page(3); // Example: Set page to 3
});
});
</script>
</div>
</body>
</html>
有没有办法让它在通过 Razer MVC View 代码初始化 Kendo Grid 时离开循环甚至设置页面？
更改网格数据源上的页面（即使它已经设置为该页面）将导致网格重新绑定，这就是 dataBound 事件不断触发的原因。这是执行此操作的正确位置，因为一旦网格完成自身设置，就会触发 dataBound 事件。尝试在其他地方这样做可能会导致竞争状况。这里的关键是只做一次。这应该是添加布尔标志的简单情况。
var databoundProcessed = false;
$("#grid").data("kendoGrid").bind("dataBound", function(e) {
if (!databoundProcessed) {
// Change the page value or perform other actions here
console.log("Grid data bound");
$("#grid").data("kendoGrid").dataSource.page(3); // Example: Set page to 3
databoundProcessed = true;
}
});
设置页面的代码应该仅在页面上首次初始化网格时运行。更改页面后第二次触发事件时，它不会再次运行。