Kendo Heirarchical Grid Alignment Issue

Question

I have implemented two Kendo Grids, first one is the parent Grid and other is the child Grid. When I open the Child Grid to view the values for each parent element in the Parent Grid, the column alignment of both the Grids are mismatched.

Any help on how to solve this ?

Here is the general code :-

// This is the Parent Grid

@(Html.Kendo().Grid<XYZ.Models.ViewModels.ABCMODEL>()
   .Name("ParentGrid")
    .Columns(columns =>
    {
        columns.Bound(e => e.A).Title("ABC").Width(30);
        columns.Bound(e => e.B).Title("EFG").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.C).Title("IJK").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.D).Title("MNO").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.E).Title("XYZ.").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });

    })
    //.Scrollable()
    .DetailTemplateId("template")
        .HtmlAttributes(new { style = "height:100%;  background-color: #fcfedf;" })
        .HtmlAttributes(new { @class = "tableMain" })
    .DataSource(dataSource => dataSource
        .Ajax()
        // .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_ABC", "Profit"))
    )
    .Events(events => events.DataBound("dataBound"))
    //.ColumnMenu()
    // .Scrollable()
    //.Sortable()
    //.Pageable()
)

//This is the Child Grid

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>()
        .Name("grid_#=CId#")
        .Columns(columns =>
        {
            columns.Bound(e => e.a).Title("123").Width(30);
            columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(30);
            columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(30);
            columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(30);
            columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(30);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            // .PageSize(5)
            .Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId =      "#=CId#" }))
        )
        .ToTemplate()
)



</script>


<script>

    function dataBound() {
        var grid = this;


        $(".k-hierarchy-cell").css({ width: 8 });     
       $(".k-hierarchy-col").css({ width: 8 });
    }
</script>


    <style>

.k-grid tbody .k-grid .k-grid-header
{
    display: none;
}    

#ParentGrid .k-grid-header .k-header
{
       background-color: #d42e12;       
       color:White;
       font-size:small; 
       font-style:normal; 
       border:1px; border-color:Black; border-style:solid; text-align:center;
       white-space:nowrap;
}

.k-grid tbody
{
    background-color: #fcfedf; 
    height:100%; 
    font-size:x-small;
    border:none;
    border-color: #fcfedf; 
    white-space:nowrap;
}

#ParentGrid .k-grid td
{
  border:none   
  padding-right: 0em !important;

}

</style>

Hope now the question becomes more clear. Looking forward to a useful answer.

Answer 1

Had to get a little fancy with some css, but here is a sample of where I had to accomplish this.

http://jsbin.com/uritAno/2/edit

I think the main thing was to override the right padding and border on the grid td's, and set each column to a fixed width, save for one.

.k-grid td
{
  border: none;
  padding-right: 0em !important;
}

Answer 2

Thanks a lot for your answers and comments. They helped me a lot in reaching to an answer to my question.

So here is the final solution :

// This is the Parent Grid (No need to do any changes in Parent Grid,it remains as it is with width attribute in every column)

//This is the Child Grid (All changes are to be done in "Child Grid")

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>()
        .Name("grid_#=CId#")
        .Columns(columns =>
        {
            columns.Bound(e => e.a).Title("123");
            columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(149);
            columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(150);
            columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(137);
            columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(127);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            // .PageSize(5)
            .Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId =      "#=CId#" }))
        )
        .ToTemplate()
)

You have to remove the width from the "first column in the child grid i.e. column "a"" and start setting the width from the last column.

Give a width to the last column of child grid such that it gets aligned with the last column of "parent grid" i.e. Align column "e of child grid" with "E of parent grid" by giving "e" a suitable value.

Once "e" is aligned,it will be fixed,now in the similar way align column "d,b,c" and you will find column "a" aligned with "A in parent grid".

In this way both the grids get aligned.

The values in the width attribute were specific to my screen so i used them.These are not standard values.Try and align the child grid according to your screen,the values might be different.

Hope it helps,thanks a lot and have a great New Year ahead.

Answer 3

I had the same issue with Kendo UI Javascript Grid and inspired by Robin Giltner answer, I resolve by:

1) Using same the width on paired columns which have to be aligned on the right. (Starting from the right)

2) Leaving free width on dynamic width columns. (Starting from the left)

3) Overriding .k-detail-cell class as follows:

    .k-detail-cell
    {
        padding-right: 0em !important;
    }

Applying padding-right: 0em !important; to .k-detail-cell we align only the details grid to the right; while applying padding-right: 0em !important; to .k-grid td we align to the right, all the columns of both grids and their content.

(Not nice, because even header and footer are aligned to the right)

Note: Kendo UI version 2014.2.716