Hierarchical Grid Inline CRUD Multiple Child Grids breaks ForeignKey column UI

[Grady]

I have a Hierarchical Kendo Grid that allows CRUD on the child grids.  Everything works fine except if you open more than one parent grids and Add begin adding records the first record's ForeignKey column renders fine, but after the first the new records UI renders as a Textbox with a zero in it.  Also, all CRUD operations are broken while there are multiple Create templates in the child grids.  I attempted changing the ForeignKey column to a ClientTemplate with the DropDown contained in an editor template view, but the result was nearly the same.

I have attached a screenshot of the problem.

My parent grid:

@(Html.Kendo().Grid<gpas.Models.ContractBillingCycleRollUpGridView>().Name("ContractBillingCycleGrid")
    .Columns(c =>
    {
        c.Bound(t => t.Name);
        c.Bound(t => t.LineItemCount).Title("Line Item Count").Width(125).HtmlAttributes(new { name = "lineItemCount" });
        c.Bound(t => t.Total).Format("{0:c}").Title("Total Budget").Width(150).HtmlAttributes(new { name = "lineItemTotal" });
        c.Bound(t => t.OrganizationId).Hidden().HtmlAttributes(new { name="orgId" });
        c.Bound(t => t.SubcontractorId).Hidden().HtmlAttributes(new { name = "subconId" });
    })
    .DataSource(ds => ds
        .Ajax().Read(read => read.Action("GridBinding_ContractBillingCycleRollUp", "Contract", new { id = Model.ContractBillingCycle.Id, organizationId = Model.OrganizationId }))
    )
    .Sortable()
    .Pageable()
    .Filterable()
    .ClientDetailTemplateId("contractLineItemsTemplate")
    .Events(events => events.DataBound("onDataBound"))
)

Child Grid Template:

<script id="contractLineItemsTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<gpas.Models.ContractLineItemGridView>().Name("childgrid_#=Id#_#=OrganizationId#_#=SubcontractorId#")
        .Columns(c =>
        {
            c.ForeignKey(l => l.ExpenseCategoryId, Model.ExpenseCatagories).Title("Expense Category");
            c.Bound(l => l.Description);
            c.Bound(l => l.Justification);
            c.Bound(l => l.Amount).Format("{0:c}").Width(200);
            c.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
        })
        .Sortable()
        .Filterable()
        .Scrollable()
        .ToolBar(t => t.Create())
        .Editable(edit => edit.Mode(GridEditMode.InLine))
        .DataSource(ds => ds
            .Ajax()
            .Events(events => events.Error("error_handler").RequestEnd("gridLineItem_onRequestEnds"))
                    .Model(model =>
                    {
                        {
                            model.Id(o => o.Id);
                        }
                    })
            .Read(read => read.Action("GridBinding_ContractLineItems", "Contract", new { id = "#=Id#", organizationId = "#=OrganizationId#", subcontractorId = "#=SubcontractorId#" }))
            .Update(update => update.Action("GridAction_UpdateLineItem", "Contract"))
            .Destroy(destroy => destroy.Action("GridAction_DeleteLineItem", "Contract"))
            .Create(create => create.Action("GridAction_CreateLineItem", "Contract"))
        )
        .Events(events => events.Save("gridLineItem_OnSave"))
        .ToClientTemplate()
    )

</script>

Thanks in advance!

[Petur Subev]

Hello Grady,

I already posted a reply in the support ticket that you opened on the same subject.

For reference I will paste it here:

Try to use the edit event of that child Grid that has the ForeignKey column like follows:

e.g.

Copy Code

<script type="text/javascript">
    function edit(e) {
        $("#ProductID").attr("id", e.model.uid);
    }
</script>
<script type="text/kendo" id="OrderDetailsTemplate">
  @(Html.Kendo().Grid<OrderDetailViewModel>()
        .Name("OrderDetails_#=OrderID#")
        .Columns(columns =>
        {
            columns.ForeignKey(od=> od.ProductID, (System.Collections.IEnumerable)ViewData["Products"], "ProductID", "ProductName");
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
        })
        .Events(e=> e.Edit("edit"))
...
        .ToClientTemplate()
    )

</script>

I hope this resolves the case.


Kind Regards,
Petur Subev
Telerik