[Solved] Aligning columns in each level of hierarchical grid

[Kabir]

Hi,

I am using the Telerik MVC grid control to develop a hierarchical grid. As a test, I created a simple project that has one nested level of data. I would like to align the columns so that the parent and child grid columns are aligned.

Could somebody please indicate hot to do this?

Thanks,
Kabir

[tom]

Kabir, it is hard! That's why Telerik still haven't done this even though it would be by far the most useful addition to their framework.

I have done this and created a n-deep hierarchy grid. I cannot share it with you but I can offer you some pointers:

1. You can only use hardcoded widths!
    All your columns will be the same apart from the first column. You can calculate this width based on what level down you are.

2. Use CSS!
   It is tempting to use jquery to go around removing and modifying your html. It is much faster and more compatible with teleriks code to simply tag the areas you wish to hide using CSS class names and then use display:false to get rid of them.

3. Filtering and sorting won't work very nicely, without some hacking of teleriks codebase. I would advise not trying to take this on.

4. Use an extension classes to extend ViewComponentFactory and GridBuilder<T> to provide a generic HierarchyGrid and also as a shortcut so your view does not become very ugly very quickly. You can also do your column width calculations in here e.g:

@(Telerik.HierarchyGrid(Html, 0)
                 .Name("MyGrid" )
                 .DataBinding(d => d.Ajax().Select("_GetRows", "Controller", new { parentId = 0 }))
                 .DetailView(sub =>
                 {
                     sub.ClientTemplate(Telerik.HierarchyGrid(Html, 1).DetailView(sub1 =>
                                                                {
                                                                    sub1.ClientTemplate(Telerik.HierarchyGrid(Html, 2).ToHtmlString());
                                                                }).ToHtmlString());
                 }))

Good luck,
Tom.