剑道网格 - 如何在添加/编辑子行时访问父行模型（详细网格）答案

【问题标题】：Kendo grid - How to get access to Parent row model on add / edit child row (detail grid)剑道网格 - 如何在添加/编辑子行时访问父行模型（详细网格）
【发布时间】：2018-02-03 08:57:36
【问题描述】：

我正在使用 Kendo 分层网格在我的父（主）网格中显示类别，并将产品显示为子行（详细网格）。

这是我的DEMO。

我正在使用自定义模板来添加/编辑我的产品。

在弹出的表单中，我想在 Product 表单字段上方的标签中显示父类别名称及其一些详细信息。

现在在每个产品添加或编辑中，我想在表单中显示父类别的详细信息，并且还想通过产品创建/更新请求动态提交父类别 ID

在我下面的 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

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

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid kendo-template

【解决方案1】：

使用$(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);

Updated demo

请注意，当您横穿最近的 TR 时，您实际上得到的是详细信息行而不是实际数据行。因此，您需要获取数据行——即当.prev() 出现时——为.dataItem() 获取正确的行。

【讨论】：

A +1 为您的努力伙伴，但您的回答仍然需要一些努力，因为我需要从 parentModel 检索属性并将它们设置到弹出表单中。此外，这段代码行：mainGrid = $("#grid").data("kendoGrid")，如果我们在同一页面上有多个网格，则将不起作用
@RahulGupta 好吧，我的回答是基于你的问题，对我来说似乎有一个问题：获取父数据。然后，你可以用它创建弹出窗口，所以我让你来做。而且我找不到它在哪里定义了多个网格，即使在小提琴中也只有一个。无论如何，我很高兴你找到了解决方案。

【解决方案2】：

这是我最终如何实现它的DEMO：

JS代码sn-p：

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

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
    }

【讨论】：

【解决方案3】：

我在这方面有点晚了。对我来说，这很好用而且很干净。也许它仍然对某人有帮助。

电子数据

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;
    }
    });
}

【讨论】：