Question

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

这是我的DEMO。

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

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

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

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

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
    }

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

2 个答案: