[Solved] Column Widths

[Simon]

Hi,

I have been looking at the telerik grid demo on your website:

http://demos.telerik.com/aspnet-mvc/razor/grid/hierarchyserverside

We are looking to make use of this functionality on our website. I noted that on the demo the columns are perfectly aligned between the parent and child grids. e.g. the end of the column "FirstName" in the parent grid ends at the same position as the end of the Order Id.

I have created a simple project to display a hierarchical grid. However, I cannot seem to align the grid in the way mentioned above.

Specifically, I would like the first column in my parent grid to have exactly the same width as the first 3 columns in the child grid. I would like all subsequent columns to align between the parent and child grids.

I have attempted to use the width property to set this but it does not seem to work in the way I intended.

I have attached the sample application for your convenience and would appreciate an answer to this question.

Thanks

[Dimo]

Hi Simon,

The online demo that you are referring to, shows how to achieve the desired layout.

1. The last columns of all tables should have no widths.
2. All columns from the master and detail table (except the first columns) should have equal widths.
3. The first column of the detail table should be smaller than the first column of the master table, so that the right edges of the columns are aligned.

Note that this scenario works well only if the Grid has a fixed width or its parent has a fixed width.

Here is an example, based on your implementation:

@{ Html.Telerik().Grid(Model)
       .Name("Parent")
       .Columns(columns =>
       {
           columns.Bound(e => e.ParentProperty1).Width(600);
           columns.Bound(e => e.ParentProperty2).Width(200);
           columns.Bound(e => e.ParentProperty3);

       })
       .DetailView(detailView => detailView.Template(
           @<text>
           @(Html.Telerik().Grid(item.Children)
           .Name("Child_" + item.ParentProperty1)
           .Columns(columns =>
           {
               columns.Bound(o => o.ChildProperty1).Width(192);
               columns.Bound(o => o.ChildProperty2).Width(200);
               columns.Bound(o => o.ChildProperty3).Width(200);
               columns.Bound(o => o.ChildProperty4).Width(200);
               columns.Bound(o => o.ChildProperty5);
           })
            .Pageable()
            .Sortable()
            .Filterable()
            )
            </text>
))
.Pageable(paging => paging.PageSize(5))
.Sortable()
.Render();
}

Regards,
Dimo
the Telerik team