Kendo UI Grid: How To Keep Custom Filter Row In Synch With Column Reordering And Hiding

Question

How can I achieve to keep my custom filter row in synch with column reordering and column hiding? I am currently investigating Telerik kendo UI grid v2013.1.514.

The code is as follows:

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);

Please find an example here: http://jsfiddle.net/WrqmD/4/. Just drag'n'drop the column headers around and see that the custom filter row is NOT reordered!

EDIT:

Btw., the solution to append the custom filter is described here: http://www.kendoui.com/forums/kendo-ui-web/grid/grid-header-filtering-row-that-contains-1-element-for-each-column-in-grid-with-the-same-width.aspx

mnemonic mnemonic · Accepted Answer · 2013-08-06T09:25:44

After coresponding with the Telerik Support I would like to share the solutions below:

Implementing the columnReorder event adding the following method declaration to the grid options. This was suggested by Telerik Support. Please find a working JsFiddle demo here:

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);
}

Append the Custom Elements to the original header elements. This is my own solution where I go with, because both reordering and hiding of columns is solved with the same code. Please find a working JsFiddle demo here:

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);
  }
}

Kendo UI Grid: How To Keep Custom Filter Row In Synch With Column Reordering And Hiding

1 Answers