javascript - Kendo grid - How to get access to Parent row model on addedit child row (detail grid) - Stack Overflow

admin管理员组

文章数量:1290206

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

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

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

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

• javascript
• jquery
• kendo-ui
• kendo-grid
• kendo-template

Share Improve this question Follow asked Aug 25, 2017 at 10:14 Rahul GuptaRahul Gupta 10.2k77 gold badges6464 silver badges6969 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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() es in - to get the right row for .dataItem().

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
    }

I'm a little late on this. For me, this worked nice and clean. Maybe it will be still helpful for someone.

e.data

function detailInit(e) {
//Right here
var CategoryId = e.data.CategoryId;
var parentEvent = e;

$("<div/>").appendTo(e.detailCell).kendoGrid({
    edit: function(e) {
        //Or here
        var CategoryId = parentEvent.data.CategoryId;
    }
    });
}

本文标签： javascriptKendo gridHow to get access to Parent row model on addedit child row (detail grid)Stack Overflow