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

how can achieve keep custom filter row in synch column reordering , column hiding? investigating telerik kendo ui grid v2013.1.514.

the code 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 example here: http://jsfiddle.net/wrqmd/4/. drag'n'drop column headers around , see custom filter row not reordered!

edit:

btw., solution append custom filter 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

after coresponding telerik support share solutions below:

1. implementing columnreorder event adding following method declaration grid options. suggested telerik support. please find 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); } 

2. append custom elements original header elements. own solution go with, because both reordering , hiding of columns solved same code. please find working jsfiddle demo here:

   var columns = grid.data("kendogrid").columns; for(var = 0; < 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);   } }