Kendo grid-как получить доступ к модели родительской строки при добавлении / редактировании дочерней строки (detail grid)

Я использую иерархическую сетку Kendo для отображения Категорий В моей родительской (основной) сетке и продуктов в виде дочерних строк (подробная сетка).

Вот мой демо-версия.

Я использую пользовательский шаблон для добавления / редактирования моих продуктов.

Во всплывающей форме я хочу отобразить имя родительской категории и некоторые ее детали в ярлыках над полями формы для продукта.

Теперь на каждом продукте добавьте или отредактируйте, в форме я хочу показать детали Родительская категория, а также хотите динамически отправить Родительский CategoryId с запросом на создание / обновление продукта

В моем коде ниже JS я могу получить доступ к текущей оболочке сетки деталей, используя код ниже, , но не могу понять, как я могу получить доступ к деталям parent row model 

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

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

........
.....
2 2
javascript jquery kendo-ui kendo-grid

2 ответа:

С помощью $(detailGridWrapper).closest("tr").prev() Вы можете получить текущую строку родительской сетки, которую расширил один пользователь. Затем с помощью $("#grid").data("kendoGrid").dataItem() можно получить текущую модель родительской сетки: 

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

    console.log(parentData);

Обновленная демо-версия

Обратите внимание, что когда вы проходите через ближайший TR, Вы получаете строку detail вместо реальной строки данных на самом деле. Поэтому вам нужно получить строку данных - то есть, когда .prev() входит-чтобы получить правильную строку для .dataItem().
3

Вот демо-версия о том, как я реализовал его в конце концов:

Фрагмент кода JS: 

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

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
    }
0