Parent Data Item to use in Detail Edit Template

[Michael]

Hi,

I'm having a problem in a parent/child grid.  My parent grid displays summary-type information.  The child grid is editable.  When I go to create a new row in the child grid, I need several bits of information from the parent grid row dataitem to display in my popup form template.  I was searching around and found an example that accomplished the task this way:

function OnRequirementEdit(e) {
       debugger;
       var parentGrid = $("#grid").data("kendoGrid");
       var detailGridId = "#requirementsgrid_" + e.model.IdString;
       var detailGrid = $(detailGridId).data("kendoGrid");
       var parentGridDataItem = parentGrid.dataItem(detailGrid.element.closest("tr"));

      //Do stuff with the data from parentGridDataItem

   }

 

The only problem is, I realized later that the data item was not from the detail grids parent row, but rather from the NEXT parent row down.  So closest tr is actually finding the next one down.  I tried to compensate by using detailGrid.element.prev("tr") but then I'm getting null for parentGridDataItem.

 

I should note, my client detail template is a tab control with 2 tabs and a grid on each tab (the second grid isn't of consequence because it's display only) but I'm not sure if that is causing issues navigating the DOM to get the parent tr.

[Michael]

After further testing I found out detailGrid.element.closest("tr")) IS bringing back the correct tr, BUT parentGrid.dataItem is returning the NEXT item in the parent grid rows.

[Eyup]

Hi Michael,

I've created the following hierarchy grid and enabled editing for its detail table per your description. Could you modify it to demonstrate the issue and send it back to us for further investigation?
https://dojo.telerik.com/apIjABIf

Looking forward to hearing from you.

Regards,
Eyup
Progress Telerik

[Michael]

Thanks Eyup,

I ended up trying the example in this forum post https://www.telerik.com/forums/master-detail-grid-how-to-get-master's-id-into-detail-grid's-custom-popup-editor.  I had tried it before without success, but I must of had some other issues going on.  This worked for me.

 

For those that are struggling with this, here is what I did.

At the top of my popUpTemplate I added the code below.  On some random control in the popup template I added a call to this method by changing it's read.Action like "read.Action("MyMethod", "MyController").Data("getCurrentDataItem");"

<script>
    var parentModel;
    function getCurrentDataItem() {
        var uid = '#=uid#';
        var selector = kendo.format("tr[data-uid='{0}']", uid);
        var currentGridElement = $(selector).closest("[data-role=grid]");
        var parentRow = currentGridElement.closest(".k-detail-row").prev();
        var parentGrid = parentRow.closest("[data-role=grid]").data("kendoGrid");
        parentModel = parentGrid.dataItem(parentRow);


    }
</script>

Then in the script of my main page, in the OnEdit method, I was able to refer to the parentModel variable to get all the data I need and set the appropriate labels in the popup form.  If I tried to do the setting of the labels in the script above, I received an Invalid Template error.  Hope that helps someone out.

 

Mike

 

[Eyup]

Hello Mike,

Thank you for sharing your specific solution with our community. I hope it will prove helpful to other developers as well.

Regards,
Eyup
Progress Telerik

[Dana]

Do you have a example or solution on how to perform this with the MVC version?

[Eyup]

Hello Dana,

 

Actually, it would be the same for MVC since in essence it is the same as Kendo UI. The Action method mentioned by Michael demonstrates exactly an MVC implementation.

 

Regards,
Eyup
Progress Telerik