expanding hierarchy updates wrong table

[Entilzha]

I have a weird problem that I will try to explain with the attached images.  I have hierarchy grid that works perfectly when I expand to the first sub-grid.  The problem happens when I expand a latter row in the main grid.  The result is the first expanded sub-grid gets the values of the newly expanded sub-grid (which is empty).  The attached pictures show the before and after.  I included a third image which shows that if you expand a row that is above the first expanded row then it works fine.

Here is the stripped down code.  Any help will be greatly appreciated!

BTW, the code formatter would not accept my Razor code with Javascript (using Chrome).  It got confused.  I hope this turns out okay when I hit "Post"...

@using Kendo.Mvc.UI
@model PatientToolsAdminDesk.Models.AdminPractitionerForm
@{
    ViewBag.Title = "Order History";
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary" id="practitioner-panel">
                @Html.HiddenFor(a => a.did)
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel-body">
            @(Html.Kendo().Grid<PatientToolsAdminDesk.Models.PractitionerOrderHistory>()
                    .Name("order-history-grid")
                    .Columns(columns =>
                        {
                            columns.Bound(e => e.OrderID).Width(85);
                            columns.Bound(e => e.Status).Width(275);
                            columns.Bound(e => e.OrderType).Width(300);
                            columns.Bound(e => e.OrdererName).Width(150);
                            columns.Bound(e => e.Address);
                        })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Read(read => read.Action("HierarchyBinding_Orders", "Admin").Data("additionalData"))
                    )
                    .Sortable()
                    .Pageable()
                    .Scrollable()
                    .HtmlAttributes(new { style = "height:500px;" })
                    .ClientDetailTemplateId("orderdetailtemplate")
                )
            </div>
        </div>
    </div>
</div>

<script id="orderdetailtemplate" type="text/kendo-tmpl">
            @(Html.Kendo().Grid<PatientToolsAdminDesk.Models.PractitionerOrderItems>()
                .Name("order-item-grid")
                .Columns(columns =>
                {
                    columns.Bound(o => o.Quantity).Width(75);
                    columns.Bound(o => o.CreationDateShort).Width(100).Title("Date");
                    columns.Bound(o => o.Name).Width(250);
                    columns.Bound(o => o.GenericName).Width(250);
                    columns.Bound(o => o.Active).Width(50);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("HierarchyBinding_OrderItems", "Admin", new { orderID = "#=OrderID#" }))
                )
                .Pageable()
                .Sortable()
                .ToClientTemplate())
</script>

<script>

    $(document).ready(function () {
        $("#searchnew").text("DID: " + $("#did").val());
        $("#searchnew").bind("click", function () {
            $("#searchwindow").data("kendoWindow").center().open();
        });
    });

    function SearchPractitioner(arg) {

        var did = $("#search_did").val();
        var orderid = $("#search_orderid").val();
        if (!((did == "") && (orderid == ""))) {
            var grid = $("#items-grid").getKendoGrid();
            grid.dataSource.data([]);

            $.ajax({
                type: 'GET',
                dataType: "json",
                url: '/admin/GetPractitioner',
                data: { 'did': did, 'orderid': orderid },
                success: onSearchPractitioner
            });
        } else {
            $("#did").val("");
            $("#orderid").val("");

            $("#searchnew").text("DID: " + 'unknown');

            var grid = $("#items-grid").getKendoGrid();
            grid.dataSource.read();

            var grid = $("#order-history-grid").getKendoGrid();
            grid.dataSource.read();
        }
    }

    function onSearchPractitioner(arg) {

        $("#searchwindow").data("kendoWindow").close();

        $("#did").val(arg.did);
        $("#orderid").val(arg.orderid);
        $("#firstname").html(arg.firstname);
        $("#lastname").html(arg.lastname);
        $("#degree").html(arg.degree);

        $("#searchnew").text("DID: " + arg.did);

        var grid = $("#items-grid").getKendoGrid();
        grid.dataSource.read();

        var grid = $("#order-history-grid").getKendoGrid();
        grid.dataSource.read();
    }

    function additionalData() {
        return {
            did: $("#did").val(),
        };
    }
</script>

[Entilzha]

I believe I found the problem.  I took out the dynamic grid naming mechanism.  This caused all of the _activated_ rows for each table to have a grid with the same name. DOH!

e.g., added the bold part
.Name("order-item-grid_#=OrderID#")

[Nikolay Rusev]

Hello Entilza,

Indeed this is *must*.  Otherwise all detail grids will have same id html attribute. Adding template expression will ensure that all detail rows will have grids with unique names.

Regards,
Nikolay Rusev
Telerik