1

如何使我的自定义过滤器行与列重新排序和列隐藏保持同步?我目前正在调查 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);

请在此处找到示例:http: //jsfiddle.net/WrqmD/4/。只需拖放列标题,即可看到自定义过滤器行未重新排序!

编辑:

顺便说一句,此处描述了附加自定义过滤器的解决方案:http ://www.kendoui.c​​om/forums/kendo-ui-web/grid/grid-header-filtering-row-that-c​​ontains-1-element-对于每个列在网格中与相同的宽度.aspx

4

1 回答 1

0

在与 Telerik 支持人员进行了对应后,我想分享以下解决方案:

  1. 实现 columnReorder 事件,将以下方法声明添加到网格选项。Telerik Support 建议这样做。请在此处找到一个有效的 JsFiddle 演示:

    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);
    }
    
  2. 将自定义元素附加到原始标题元素。这是我自己的解决方案,因为重新排序和隐藏列都是用相同的代码解决的。请在此处找到一个有效的 JsFiddle 演示:

    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);
      }
    }
    
于 2013-08-06T09:25:44.777 回答