Expanding 2nd level hierarchy in Kendo Grid removes column headers

[Thomas]

Hi Telerik,

I'm back with the next question :).

I have a Kendo Grid displaying Main Orders. This Grid has 2 levels of hierarchy. Each Main Order has at least one order, but can have multiple orders.
Each of these orders has at least one guy working on the order, but there could be multiple people working an this specific order => this is the 2nd level of hierarchy.

As long as the 2nd level contains more than 1 person, everything is fine, everything is unfolding properly and displaying properly.

But when there is only one person in the 2nd level (no matter how many orders in the 1 level), unfolding the 2nd level removes the column headers from 2nd level, and all data from 1st level (the order).

So:
1 main > 1 order > 1 person > error
1 main > 10 orders > 1 person only per order > error
1 main > x orders > 2+ persons > ok

And to make it even more curious, this is not a static issue. It happens at 80% of the entries, but not at all of them.

When the issue appears, My Grid shows the main order perfectly, but it only shows the column headers from level 1, filled with the data of level 2.....

Attached is a picture of the issue. Surrounded in red you will see the issue, one row below, surrounded in yellow, the proper display.

Grid:

@(
Html.Kendo().Grid<UfaMainOrder>()
        .Name("grid")
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("MainOrderComment"))
        .Columns(columns =>
        {
            columns.Bound(e => e.MainOrderNumber).Width(300).Title("Hauptauftragsnummer").Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true));
            columns.Bound(e => e.InvoiceDateMainOrder).Format("{0: dd.MM.yyyy}").Width(300).Title("Rechnungsdatum (Hauptauftrag)");
            columns.Bound(e => e.TargetFruSum).Width(200).Title("Summe AW Soll");
            columns.Bound(e => e.ActualFruSumEval).Width(200).Title("Summe AW Ist (Bew)");
            columns.Bound(e => e.FruSumDiffEval).Width(200).Width(200).Title("Δ Summe Soll-Ist (Bew)");
            columns.Bound(e => e.MainOrderResearchComment).Width(200).Title("Recherche-Ergebnis").ClientTemplate("#= MainItems_Databound(MainOrderResearchComment)#");
            columns.Command(command => { command.Edit(); }).Width(150).HtmlAttributes(new { style = "text-align: center" });
            columns.Bound(e => e.MainOrderComment).Width(500).Title("Bemerkung");
        })
        .Pageable(p => p
            .ButtonCount(5)
            .PageSizes(new[] { 10, 25, 50 })
            .Refresh(true)
            .Input(true)
        )
        .ColumnResizeHandleWidth(5)
        .ColumnMenu()
        .Sortable()
        .Resizable(resize => resize.Columns(true))
        .Scrollable(s => s.Height("auto"))
        .Filterable()
        .Reorderable(reorder => reorder.Columns(true))
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Text("Import DMS").IconClass("k-icon k-i-file-excel").HtmlAttributes(new { id = "customCommand" });
            toolbar.Custom().Text("Ansicht speichern").IconClass("k-icon k-i-export").HtmlAttributes(new { id = "save" });
            toolbar.Custom().Text("Ansicht laden").IconClass("k-icon k-i-import").HtmlAttributes(new { id = "load" });
            toolbar.Search();

        })
        .ClientDetailTemplateId("template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(50)
            .Model(model => 
            {
                model.Id(o => o.MainOrderNumber);
                model.Field(p => p.MainOrderNumber).Editable(false);
                model.Field(p => p.InvoiceDateMainOrder).Editable(false);
                model.Field(p => p.TargetFruSum).Editable(false);
                model.Field(p => p.ActualFruSumEval).Editable(false);
                model.Field(p => p.FruSumDiffEval).Editable(false);
                model.Field(p => p.MainOrderResearchComment).Editable(false);
                model.Field(p => p.MainOrderComment).Editable(true).DefaultValue("");
            })
            .Read("Read", "UFA")
            .Update("Update", "UFA")
        )
        
)

Level 1:

    @(
        Html.Kendo().Grid<UfaOrder>()
                .Name("grid_#=IdMainOrder#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.OrderNumber).Title("Auftragsnummer");
                    columns.Bound(o => o.OrderType).Title("Auftragsart");
                    columns.Bound(o => o.InvoiceNo).Title("Rechnungsnummer");
                    columns.Bound(o => o.InvoiceDate).Format("{0: dd.MM.yyyy}").Title("Rechnungsdatum");
                    columns.Bound(o => o.TotalTargetFru).Title("Summe AW Soll");
                    columns.Bound(o => o.TotalActualFruEval).Title("Summe AW Ist (Bew)");
                    columns.Bound(o => o.TotalFruDiffEval).Title("Summe Δ Soll-Ist (Bew)");
                    columns.Bound(o => o.ResearchComment).Title("Recherchergebnis bei Faktura").ClientTemplate("\\#= LineItems_Databound(ResearchComment)\\#");
                    columns.Bound(o => o.OalComment).Title("Kommentar aus OAL");
                })
                .ClientDetailTemplateId("template2")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    @*.Sort(s => s.Add("OrderNumber").Ascending())*@
                    .Read(read => read.Action("ReadOrders", "UFA", new { idMainOrder = "#=IdMainOrder#" })
                    )
                )

                .ToClientTemplate()
        )

Level 2:

    @(Html.Kendo().Grid<UfaOrderMechanic>()
                    .Name("grid_#=IdOrder#")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.MechanicId).Title("Mitarbeiternummer");
                        columns.Bound(o => o.MechanicName).Title("Mitarbeitername");
                        columns.Bound(o => o.TargetFru).Title("AW Soll");
                        columns.Bound(o => o.ActualFru).Title("AW Ist");
                        columns.Bound(o => o.EvalMirror).Title("Bewertung");
                        columns.Bound(o => o.ActualFruEval).Title("AW Ist (Bew)");
                        columns.Bound(o => o.FruDiffEval).Title("Δ Soll-Ist (Bew)");
                        })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(10)
                        .Read(read => read.Action("ReadMechanics", "UFA", new { idOrder = "#=IdOrder#" }))
                    )

                    .ToClientTemplate()
            )

 

 

Did you ever see a behaviour like this? Any tipps how to solve this? :)

Thanks
Thomas

[Mihaela]

Hello Thomas. 

Thank you for describing the overall setup in details.

Indeed, the described behavior is strange. I suspect that the issue occurs in cases when the Model property "IdMainOrder" has the same value as the property "IdOrder". Since these properties are added in the child Grid names, when they have the same values, it leads to DOM elements with duplicated ids. As a result, the third level grid is not initialized correctly.

For example:

Would you please check if this is the case? To ensure that the third Grid will initialize correctly, you could change its Name():

<script id="template2" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<UfaOrderMechanic>()
      .Name("gridMechanics_#=IdOrder#")
       ...
    )
</script>

If you change the name of the third Grid and the issue persists, would you please modify the attached sample to replicate the issue you are experiencing? It contains the same scenario.

Thank you for your cooperation.

 

Regards, Mihaela Progress Telerik

[Thomas]

Hi Mihaela,

indeed, the MainOrder always contains a first Order with the same number, and can have additional orders with other numbers.

I changed the name of the third grid as you have recommended, and it works perfectly!!

Thank you, again! :)

Cheers

Thomas