[Solved] How can I hide grid columns via javascript?

[Matthew]

What is the best way to hide grid columns for an MVC grid at runtime via javascript?  I essentially want to have a drop down and hide all columns not selected by the drop down list.

[Matthew]

Ok I figured out I can do it with the following code

[code]
@{Html.Telerik().ScriptRegistrar().OnDocumentReady(
@<text>
    $('#Grid th:eq(2)').hide();
    $('#Grid tr td:eq(2)').hide();
</text>
);}
[/code]

While these individual scripts work, they don't work on document ready.  When this is run on document ready, the first line works to correctly hide the header, but the data cells are still visible.  In the debugger I can run the 2nd line again it correctly removes the data cells.

How can I get this to work correctly on document load, without resorting to .Hidden(true) on the actual grid code

[Georgi Tunev]

Hi Matthew,

The code works as expected on my side - it hides the header and the first cell under it. If you want to hide the whole column, you should try something like this:

$('#OrdersGrid th:eq(2)').hide();
$('#OrdersGrid tr td:nth-child(3n)').hide();

I hope this helps. If you still need assistance, could you please send a sample project that shows your exact setup?


Regards,
Georgi Tunev
the Telerik team

[Jerry]

Hi there,


Is it possible to hide/display a column based on its column name?

If so, could you give me one example?


Thank you.
Jerry

[Nikolay Rusev]

Hello Jerry,

With Q3 Release of Telerik Extensions for ASP.NET MVC which happened yesterday we introduced client API for showing/hiding columns. I.e grid.showColumn/hideColumn("column name")

There is also a column header context menu for showing/hiding columns. You can see more on the demo bellow:http://demos.telerik.com/aspnet-mvc/grid/columncontextmenu


Greetings,
Nikolay Rusev
the Telerik team