title: Kendo UI Grid: How To Keep Custom Filter Row In Synch With Column Reordering And Hiding
body: <p>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.</p>
  
  <p>The code is as follows:</p>
  
  <pre><code>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 = $('&lt;tr&gt;&lt;td&gt;&lt;input type="search" id="ProductIDSearchBox" value="EnterProductID"/&gt;&lt;/td&gt;' +
       '&lt;td&gt;&lt;input type="search" id="ProductNameSearchDD" value="Enter ProductName"/&gt;&lt;/td&gt;' +
       '&lt;td&gt;&lt;input type="search" id="UnitPriceSearchBox" value="Enter UnitPrice"/&gt;&lt;/td&gt;&lt;/tr&gt;');
  grid.data("kendoGrid").thead.append(filterRow);
  </code></pre>
  
  <p>Please find an example here: <a href="http://jsfiddle.net/WrqmD/4/" rel="nofollow">http://jsfiddle.net/WrqmD/4/</a>.
  Just drag'n'drop the column headers around and see that the custom filter row is NOT reordered!</p>
  
  <p>EDIT:</p>
  
  <p>Btw., the solution to append the custom filter is described here: <a href="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" rel="nofollow">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</a></p>