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

Question

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

这是我的DEMO。

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

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

现在，在添加或编辑每个产品时，我希望在表单中显示父类别的详细信息，并且还希望通过产品创建/更新请求动态提交父类别 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

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

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().

的正确行

Answer 2

这是我最终如何实施的DEMO：

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
    }

Answer 3

我来晚了一点。对我来说，这很干净。也许它对某人仍然有帮助。

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

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

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

javascript

jquery

kendo-ui

kendo-grid

kendo-template