Grid 剑道UI网格：如何保持自定义筛选器行与列重新排序和隐藏同步

如何使自定义筛选器行与列重新排序和列隐藏保持同步？我目前正在调查Telerik kendo UI grid v2013.1.514

代码如下：

var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        },
        pageSize: 15,
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true
    },
    height: 450,
    reorderable: true,
    pageable: true,
    columns: [{ field: "ProductID"}, { field: "ProductName"}, { field: "UnitPrice"}]
});

var filterRow = $('<tr><td><input type="search" id="ProductIDSearchBox" value="EnterProductID"/></td>' +
     '<td><input type="search" id="ProductNameSearchDD" value="Enter ProductName"/></td>' +
     '<td><input type="search" id="UnitPriceSearchBox" value="Enter UnitPrice"/></td></tr>');
grid.data("kendoGrid").thead.append(filterRow);

var grid=$（“#grid”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Products"
},
页面大小：15，
对,，
对,，
服务器筛选：true
},
身高：450，
可重定额：对，
pageable:对，
列：[{field:“ProductID”}，{field:“ProductName”}，{field:“单价”}]
});
变量filterRow=$（“”+
'' +
'');
网格数据（“kendoGrid”）.thead.append（filterRow）；

请在此处找到一个示例：。 只需拖放列标题，就可以看到自定义筛选行没有重新排序

编辑：

---

顺便说一句，这里描述了附加自定义过滤器的解决方案：

与Telerik支持部门共同响应后，我想分享以下解决方案：

实现columnReorder事件向网格选项添加以下方法声明。这是Telerik Support提出的。请查找正在运行的JSFIDLE演示：

将自定义元素附加到原始标题元素。这是我自己的解决方案，因为列的重新排序和隐藏都是用相同的代码解决的。请查找正在运行的JSFIDLE演示：

var columns=grid.data（“kendoGrid”）.columns；
对于（var i=0；i

columnReorder: function(e) {
  var selector = this.thead.find(".filterRow td"),
  source = selector.eq(e.oldIndex),
  dest = selector.eq(e.newIndex);
  source[e.oldIndex > e.newIndex ? "insertBefore" : "insertAfter"](dest);
}

var columns = grid.data("kendoGrid").columns;
for(var i = 0; i < columns.length; i++) {
  var column = columns[i];
  var columnName = column.field;
  var columnHeader = $('div#grid th.k-header[data-field="' + columnName + '"]');
  if(undefined != columnHeader[0]) {
    var fieldValue = $('<input type="text" style="display:block;">');
    fieldValue.val(columnName);
    fieldValue.click(function(evt) {
      evt.stopPropagation();
      $(evt.target).focus().select();
    });
    columnHeader.append(fieldValue);
  }
}