[Solved] Move (reorder) grid column client side programatically

[Dino]

Hello,

I was wondering how to reorder columns client side via code. 

Basically what I wanted to do is be able to hide/show columns client side, which I was able to do using the following:

function showOrHideColumn(index, show) {

    if (show) {
        $('#ReportGrid colgroup').find('col:eq(' + index + ')').show();

        $('#ReportGrid th:eq(' + index + ')').show();

        $('#ReportGrid tbody tr').find('td:eq(' + index + ')').show();
    }
    else {
        $('#ReportGrid colgroup').find('col:eq(' + index + ')').hide();

        $('#ReportGrid th:eq(' + index + ')').hide();

        $('#ReportGrid tbody tr').find('td:eq(' + index + ')').hide();
    }
}

However, if I hide a column other than the last one, and do a databind, the data is not binded correctly (i.e. the data for the hidden column is shown in the following column and everything else is skewed over). 

So I figure, if i could just reorder the hidden columns, and put them at the end, it should fix my problem. Right?

Ideally, I want to call the code that is called when we drag and drop a column in the grid when I need to hide a column.

I see there is a method reorderColumn available in the grid object, is there a way I could use that?

Thanks!!!!!

[Dimo]

Hi Dino,

Yes, you can reorder columns with Javascript like this:

var grid = $("#Grid").data("tGrid");
grid.reorderColumn(2, grid.columnFromTitle("Column Title Here"));

"2" is the destination index, the second parameter is a custom column object that holds information about the column.

Greetings,
Dimo
the Telerik team

[Dino]

Works great! Thanks!!! Just curious, is this the best way to handle the case where we do a databind after hiding/showing columns? Or is there an easier, simpler way?

Thanks again!

[Dimo]

Hello Dino,

As we do not support client-side column hiding at the moment, this reorder workaround is what we can offer for the time being.

Greetings,
Dimo
the Telerik team

[Dino]

Hello,
 I have a follow up question.
After calling reorderColumns programatically, it would seem the resize handles are not automatically updated. When doing a manual reorder, I see the values for "style=left: <x>" are updated for all divs of class t-resizehandle. Is there another method I am supposed to call to refresh the resize handles?

Also, if I am showing columns that were initially hidden, is there a way to easily create new divs of class t-resizehandles? By easily, I mean simply calling an existing method on the grid and not coding it all myself (why re-invent the wheel?).

Thanks!

[Dimo]

Hello Dino,

After reordering a column, call

var grid = $("#Grid").data("tGrid");
grid.reorderColumn(2, grid.columnFromTitle("Order ID"));
$.telerik.trigger(grid.element, 'repaint');

This will reposition the resize handles. The same approach can be used when showing a hidden column to create a new resize handle.

Best wishes,
Dimo
the Telerik team

[Dino]

Works great again! Thanks!!!