javascript - Kendo 网格 - 如何在添加/编辑子行(详细信息网格)时访问父行模型

Question

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

这是我的 DEMO .

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

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

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

在我下面的 JS 代码中，我可以使用下面的代码访问当前的详细信息网格包装器，但无法弄清楚如何访问父行模型详细信息

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

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

使用 $(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() 获取正确的行。