Parent Data Item to use in Detail Edit Template

7 posts, 1 answers
  1. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 23 Jul 2018 Link to this post

    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.

  2. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 23 Jul 2018 in reply to Michael Link to this post

    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.

  3. Answer
    Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 25 Jul 2018 Link to this post

    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.
  4. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 25 Jul 2018 in reply to Eyup Link to this post

    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

     

  5. Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 27 Jul 2018 Link to this post

    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.
  6. Dana
    Dana avatar
    4 posts
    Member since:
    Mar 2014

    Posted 18 Dec 2019 Link to this post

    Do you have a example or solution on how to perform this with the MVC version?
  7. Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 20 Dec 2019 Link to this post

    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.
Back to Top