Kendo grid - How to get access to Parent row model on add / edit child row (detail grid)

Question

I am using Kendo hierarchical grid for displaying Categories in my Parent (primary) grid and Products as child rows (detail grid).

Here is my DEMO.

I am using a custom template for Add / Edit of my Products.

In the pop up form I want to display the parent Category name and some of its details in the lables above the form fields for Product.

Now on every Product add or Edit, in the form I want to show up the details of the Parent Category and also want to dynamically submit the parent CategoryId with the product create / update request

In my below JS code, I can access the current detail grid wrapper by using below code, but can't figure out how can I access the parent row model details

.....
.......

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({

    ....
    ......
    //ON CLICK ADD/EDIT BUTTON FOR CHILD ROWS
    edit: function(e) {

        var detailGridWrapper = this.wrapper;

        //Want to get Parent Category model
        //Retrieve some attributes out of the Category model, so that I can display them in the popup Add / Edit Product form

........
.....

Answer 1

With $(detailGridWrapper).closest("tr").prev() you can get the parent grid current row, the one user have expanded. Then with $("#grid").data("kendoGrid").dataItem() you can get the parent grid current model:

var detailGridWrapper = this.wrapper,
    mainGrid = $("#grid").data("kendoGrid"),
    $parentGridTr = $(detailGridWrapper).closest("tr").prev(),
    parentData = mainGrid.dataItem($parentGridTr);

    console.log(parentData);

Updated demo

Note that when you transverse through your closest TR, you got the detail row instead of the real data row actually. So you need to get the data row - that is when .prev() comes in - to get the right row for .dataItem().

Answer 2

Here is the DEMO of how I implemented it finally:

JS code snippet:

.....
.......

function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({

    ....
    ......
    //ON CLICK ADD/EDIT BUTTON FOR CHILD ROWS
    edit: function(e) {

        //alert('clciked');
        var detailGridWrapper = this.wrapper;
        // GET PARENT ROW ELEMENT
        var parentRow = detailGridWrapper.closest("tr.k-detail-row").prev("tr");
        // GET PARENT GRID ELEMENT
        var parentGrid = parentRow.closest("[data-role=grid]").data("kendoGrid");
        // GET THE PARENT ROW MODEL
        var parentModel = parentGrid.dataItem(parentRow);

        // Retrieve Parent Category data out of the model
        var CategoryId = parentModel.CategoryId;
        var CategoryName = parentModel.Name;

        // HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
        e.container
        .find("#span_CategoryId") // get the span element for the field
        .html(CategoryId) // set the value
        .change(); // trigger change in order to notify the model binding

        e.container
        .find("#span_CategoryName") // get the span element for the field
        .html(CategoryName) // set the value
        .change(); // trigger change in order to notify the model binding
    }