This is a migrated thread and some comments may be shown as answers.
Parent Data Item to use in Detail Edit Template
6 Answers 138 Views
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 23 Jul 2018, 05:27 PM

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.

6 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 23 Jul 2018, 06:40 PM

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.

0
Accepted
Eyup
Telerik team
answered on 25 Jul 2018, 05:16 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Michael
Top achievements
Rank 1
answered on 25 Jul 2018, 05:29 PM

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

 

0
Eyup
Telerik team
answered on 27 Jul 2018, 06:43 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dana
Top achievements
Rank 1
answered on 18 Dec 2019, 10:00 PM
Do you have a example or solution on how to perform this with the MVC version?
0
Eyup
Telerik team
answered on 20 Dec 2019, 08:15 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Eyup
Telerik team
Dana
Top achievements
Rank 1
Share this question
or