Javascript 剑道网格-如何在添加/编辑子行（详图网格）上访问父行模型

我使用剑道层次网格来显示父（主）网格中的类别和作为子行（详细网格）的产品

这是我的名片

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

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

现在，在每一个产品添加或编辑中，我都希望以表格的形式显示父类别的详细信息，并希望随产品创建/更新请求动态提交父类别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

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

。。。。。
.......
函数detailInit（e）{
$（“”）.appendTo（e.detailCell）.kendoGrid({
....
......
//单击子行的“添加/编辑”按钮
编辑：功能（e）{
var detailGridWrapper=this.wrapper；
//要获取父类别模型吗
//从类别模型中检索一些属性，以便我可以在弹出的添加/编辑产品表单中显示它们
........
.....

使用

$（detailGridWrapper）。最近的（“tr”）.prev（）

您可以获取父网格当前行，一个用户已展开。然后使用

$（“#网格”）.data（“kendoGrid”）.dataItem（）

可以获取父网格当前模型：

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

    console.log(parentData);

请注意，当您横穿最近的TR时，实际上得到的是详细信息行，而不是实际的数据行。因此，您需要获得数据行，即当

.prev（）

进入时，才能获得

.dataItem（）

的正确行。以下是我最终实现它的方法：

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
    }

。。。。。
.......
函数detailInit（e）{
$（“”）.appendTo（e.detailCell）.kendoGrid({
....
......
//单击子行的“添加/编辑”按钮
编辑：功能（e）{
//警报（“clciked”）；
var detailGridWrapper=this.wrapper；
//获取父行元素
var parentRow=detailGridWrapper.closest（“tr.k-detail-row”）.prev（“tr”）；
//获取父网格元素
var parentGrid=parentRow.closest（“[data role=grid]”）。data（“kendoGrid”）；
//获取父行模型
var parentModel=parentGrid.dataItem（parentRow）；
//从模型中检索父类别数据
var CategoryId=parentModel.CategoryId；
var CategoryName=parentModel.Name；
//这里e.container是添加/编辑弹出表单元素
e、 容器
.find（“#span#u CategoryId”）//获取字段的span元素
.html（CategoryId）//设置值
.change（）；//触发更改以通知模型绑定
e、 容器
.find（“#span#u CategoryName”）//获取字段的span元素
.html（CategoryName）//设置值
.change（）；//触发更改以通知模型绑定
}

A+1表示您的努力伙伴，但您的答案仍然需要一些努力，因为我需要从父模型检索属性并将它们设置到弹出表单中。还有这行代码：mainGrid=$（“#grid”）.data（“kendoGrid”），在同一个网格上有多个网格的情况下将不起作用page@RahulGupta好吧，我的答案是基于你的问题，对我来说，它似乎有一个问题：获取父数据。然后，你可以使用它创建反弹出窗口，所以我让你来决定。我找不到在哪里定义了多个网格，即使在小提琴中也只有一个一个。不管怎样，我很高兴你找到了解决办法。