KendoUI网格重新排序

时间:2014-06-04 16:59:39

标签: kendo-ui kendo-grid kendo-asp.net-mvc

当用户更改网格中列的顺序时,我能够捕获新的列顺序,序列化并存储它。 我无法弄清楚如何在页面重新加载时将数据恢复并重新应用到网格中。

我使用了" columReorder"发布服务调用以存储结果的事件。

我尝试了几种方法来引入专栏。 我尝试绑定到kindo grid" columns"属性,但外部Web服务调用在网格呈现之前不会及时返回。 我是否正确地进行了此操作,或者是否有更好的方法来获取列的序列化列表(我已保存)并在网格加载时设置顺序?

谢谢!

2 个答案:

答案 0 :(得分:0)

您无法在创建网格后设置列。您必须将列顺序传递给初始化程序。创建网格后,它不会仅通过传入列对象来更新顺序。所以,你需要发布一些代码,但这是我的解决方案之一......

在我的模型中,我将列设置传递到视图中,然后使用该(colSet)对象打开和关闭列,就像这样......

columns.Bound(c => c.LINE_OF_BUSINESS).Hidden(colSet != null ? ("false" == colSet["LINE_OF_BUSINESS"]) : false)

你也可以改变列的顺序 - 在视图中它将是两个步骤。在GridColumnFactory中创建列绑定的一步,然后在初始化网格时传递它(而不是在Columns()方法参数列表中创建它)

答案 1 :(得分:0)

当然茉莉花,这对我有用。我在页面上有多个网格,并且用户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; } });