Кендо Heirarchical Проблема Выравнивания Сетки

Я реализовал две сеткиKendo , Первая из которых является родительской сеткой, а вторая-дочерней. Когда я открываю дочернюю сетку, чтобы просмотреть значения для каждого родительского элемента в родительской сетке, выравнивание столбцов обеих сеток не совпадает.

Есть какая-нибудь помощь, как это решить ?

Вот общий код : -

/ / это родительская сетка

@(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()
)

/ / это дочерняя сетка

<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>