当用户更改网格中列的顺序时，我能够捕获新的列顺序，将其序列化并存储。 我只是不知道如何在页面重新加载时将这些数据带回并重新应用到网格中。
我使用“columReorder”事件发布服务调用以存储结果。
我尝试了几种引入列的方法。 我尝试绑定到 kindo 网格“列”属性，但是在网格呈现之前，外部 Web 服务调用没有及时返回。 我是否正确地解决了这个问题，还是有更好的方法来获取列的序列化列表（我已经保存）并在网格加载时设置顺序？
谢谢！
【问题讨论】：
标签： kendo-ui kendo-grid kendo-asp.net-mvc
您无法在创建网格后设置列。您必须将列顺序传递给初始化程序。创建网格后，它不会仅通过传入列对象来更新顺序。所以，你需要发布一些代码，但这是我的解决方案之一......
在我的模型中，我将列设置传递到视图中，然后使用该 (colSet) 对象打开和关闭列，如下所示...
columns.Bound(c => c.LINE_OF_BUSINESS).Hidden(colSet != null ? ("false" == colSet["LINE_OF_BUSINESS"]) : false)
您也可以通过这种方式更改列的顺序 - 这将是视图中的两个步骤。在 GridColumnFactory 中创建列绑定的一步，然后在初始化网格时将其传入（而不是在 Columns() 方法参数列表中创建它）
【讨论】：
当然，Jasmine，这对我有用。我在页面上有多个网格，并且有一个硬编码的用户 ID 需要
被替换，但这应该给其他人一个开始......
var gridResult = $("#1f2e9791-21e1-4d9a-8b9a-4b08a99fee11 .grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read:
{
//call api for data
url: 'http://localhost:61242/api/meds'
}
},
schema: {
model: {
//define schema fields
fields: {
Date: { type: "date" },
Medicine: { type: "string" },
Dosage: { type: "string" }
}
}
},
},
reorderable: true,
sortable: true,
pageable: false,
resizable: true,
//dynamically get the height from the outer container (using gridster)
height: $("#1f2e9791-21e1-4d9a-8b9a-4b08a99fee11").height() - 30,
scrollable: true,
columnReorder: function (e) {
var that = this;
setTimeout(function () {
//save columns on reorder
SaveColsGrid1(kendo.stringify(that.columns));
}, 5);
},
dataBound: function (e) {
//retrieve columns
GetColumns('1f2e9791-21e1-4d9a-8b9a-4b08a99fee11');
}
});
save 方法，它发布一个 MVC 我的 MVC 控制器
function SaveColsGrid1(data) {
$.ajax({
url: '@Url.Action("SaveColsGrid1")',
type: 'post',
contentType: 'application/json',
data: data
});
}
检索列并重新排序
function GetColumns(gridId) {
var sessionId = $("#inSession").val();
$.ajax({
url: 'http://localhost:61242/api/usercolumn/1|' + gridId,
type: 'GET',
contentType: 'application/json',
data: gridId,
async: false,
success: function (data) {
if (data && data.length > 0) {
var classname = "#" + gridId + " .grid"
var realGrid = $(classname).data("kendoGrid");
var visibleIndex = -1;
for (var i = 0; i < data.length; i++) {
var column = data[i];
// 1. Set correct order first as visibility and width both depend on this.
var existingIndex = -1;
if (typeof column.Field !== 'undefined') {
existingIndex = findFieldIndex(realGrid, column.Field);
}
else if (typeof column.commandName !== 'undefined') {
existingIndex = findCommandIndex(realGrid, column.commandName);
}
if (existingIndex > -1 && existingIndex != i) // Different index
{ // Need to reorder
//alert('hi2');
realGrid.reorderColumn(i, realGrid.columns[existingIndex]);
}
// 2. Set visibility state
var isHidden = (typeof column.hidden === 'undefined') ? false : column.hidden;
if (isHidden) {
realGrid.hideColumn(i);
}
else {
realGrid.showColumn(i);
++visibleIndex;
}
// 3. Set width
var width = (typeof column.width === 'undefined') ? null : column.width;
if (width != null) {
realGrid.columns[i].width = width; // This sets value, whilst rest redraws
realGrid.thead.prev().find('col:eq(' + visibleIndex + ')').width(width);
realGrid.table.find('>colgroup col:eq(' + visibleIndex + ')').width(width);
}
}
}
},
error: function () {
alert('Error occured');
},
});
}
//get column index of the existing item
function findFieldIndex(realGrid, field) {
var existingIndex = -1;
for (var i = 0; i < realGrid.columns.length; i++) {
if (realGrid.columns[i].field == field) {
existingIndex = i;
break;
}
}
return existingIndex;
}
function findCommandIndex(realGrid, commandName) {
//var existingIndex = -1;
//for(var idx = 0; idx < realGrid.columns.length; ++idx)
//{
// if(typeof realGrid.columns[idx].command !== 'undefined'
// && realGrid.columns[idx].command.name == commandName)
// {
// existingIndex = idx;
// break;
// }
//}
//return existingIndex;
}
});
【讨论】：