使用新数据刷新父网格时，KendoGrid DetailInit 不会触发

Question

我有一个 KendoGrid，它有一个 detailInit（分层网格）...主网格包含组名称，子网格包含选项，显示在 KendoGrid 的 detailInit 函数上。这是步骤流程..

1) 加载页面时填充主网格

function TheCatalogGrid(catalogData) {
    $("#CatalogGrid").kendoGrid({
        dataSource: {
            data: catalogData
        },
        schema: {
            model: {
                id: "globalGroupID",
            }
        },

        columns: [
           { field: "globalGroupLevel", title: "globalGroupLevel", hidden: true },
           { field: "globalGroupName", title: "Group Name", width:350 },
           { field: "isRequired", title: "*", width:20 },
           { field: "optionName", title: "Option Name" },
           { title: "Description" },
           { title: "Price" }
        ],

        change: function (e) {
            onSelectedRowClick();
        },
        scrollable: true,
        pageable: false,
        selectable: "row",
        height: 500,
        dataBound: function (e) {
            var data = this.dataSource.data();
            $.each(data, function (i, row) {
                if (row.get("globalGroupLevel") == 0) {
                    var element = $('tr[data-uid="' + row.uid + '"] ');
                    element.addClass("colored-row");
                }
            });
        },
        detailInit: detailInit,
        detailExpand: function(e){
            groupID = this.dataItem(e.masterRow).get("globalGroupID");
        },
    });
}

2) 用户单击某行上的 detailExpand 并将该行组 ID 传递给

3) 行扩展，子网格根据从主网格行传递的 id 进行填充

function detailInit(e) {
    // Added 1/22/2016
    var masterRow = e.masterRow;
    var globalID = e.data.globalGroupID;

    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: URLParams.GetTheGlobalGroupOptions + "?id=" + e.data.globalGroupID
            },
        },
        scrollable: false,
        selectable: "row",
        filter: { field: "globalGroupID", operator: "eq", value: e.data.globalGroupID },
        change: function (e) {

            // get detail row
            var detailRow = this.dataItem(this.select());
            var optionName = detailRow.get("OptionName") // Change this stuff to populate into the correct columns
            var optionID = detailRow.get("OptionID");

            $("#CatalogGrid").getKendoGrid().dataItem(masterRow).set("optionName", optionName);

            ProcessGlobalOption(optionID, globalID);

            ShowAndHideGroups(0);
        },
        columns: [
            { field: "OptionID", title: "Option ID", hidden:true },
            { field: "OptionName", title: "Option Name" },
            { field: "OptionDescription", title: "Description" },
            { field: "OptionPriceComment", title: "Price" }
        ]
    });
}

4) 用户选择选项

5) 展开的行关闭，Option 出现在名为 Option 的 Master Grids 列中

之后，我有一个名为“ProcessGlobalOption”的函数，它会进行一些计算，然后我有 ShowAndHideGroups 函数，看起来像这样

    function ShowAndHideGroups(id) {
    $.ajax({
        type: "GET",
        url: URLParams.ShowAndHideOptions + "?groupID=" + 0,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            TheCatalogGrid(data);
        }
    });
}

它从控制器调用这个函数

public JsonResult ShowHideGroupOptions(int groupID)
    {
        IncreaseObjectsDemand();
        int currentSectionID = 0;
        _GlobalGroupOptions.CalcAvailableOptions(groupID, _VariableSpaces[currentSectionID.ToString()]);
        IList<IGlobalGroupOption> query = (IList<IGlobalGroupOption>)_GlobalGroupOptions.ToList();

        List<GridCatalog2> lst = new List<GridCatalog2>();
        foreach (var ggo in query)
        {
            lst.Add(new GridCatalog2
            {

                globalGroupID = ggo.GlobalGroup.GlobalGroupID,
                globalGroupLevel = ggo.GlobalGroup.Level,
                globalGroupName = ggo.GlobalGroup.GlobalGroupName,
                isRequired = (ggo.GlobalGroup.Required == 0) ? "" : "!",
                optionName = ggo.CurrentGlobalOption == null ? "" : (ggo.IsValid ? ggo.CurrentGlobalOption.OptionName : ""),
                currentOptionID = ggo.CurrentGlobalOption == null ? 0 : ggo.CurrentGlobalOption.OptionID,
                invalidOption = ggo.CurrentGlobalOption == null ? "" : (ggo.IsValid ? "" : ggo.CurrentGlobalOption.OptionName)
            });
        }
        DecreaseObjectsDemand();

        return Json(lst, JsonRequestBehavior.AllowGet);
    }

这确实返回数据，groupID与此方法无关，我什至不需要传递一个。此数据将根据最后选择的选项隐藏和显示组和选项。

现在它第一次运行时，我可以从任何行中选择一个选项，但是当我选择另一行时，detailInit 会触发，但子网格中没有显示任何数据，因为我正在重新绑定基于过去的回溯数据的网格。

这对我所解释的任何人都有意义吗？如果不是，请让我澄清任何事情。

Answer 1

我认为这是重复的实例。当您调用 TheCatalogGrid() 函数时，您实例化了一个 kendoGrid 可能您必须执行以下操作：

  var $catalogGridInstance= null;
 function TheCatalogGrid(catalogData) {

    if($catalogGridInstance){
        $catalogGridInstance.destroy();
        $("#CatalogGrid").empty();
        $("#CatalogGrid").remove(); 
       }

       $catalogGridInstance = $("#CatalogGrid").kendoGrid({
            dataSource: {
                data: catalogData
            },
            schema: {
                model: {
                    id: "globalGroupID",
                }
            },

            columns: [
               { field: "globalGroupLevel", title: "globalGroupLevel", hidden: true },
               { field: "globalGroupName", title: "Group Name", width:350 },
               { field: "isRequired", title: "*", width:20 },
               { field: "optionName", title: "Option Name" },
               { title: "Description" },
               { title: "Price" }
            ],

            change: function (e) {
                onSelectedRowClick();
            },
            scrollable: true,
            pageable: false,
            selectable: "row",
            height: 500,
            dataBound: function (e) {
                var data = this.dataSource.data();
                $.each(data, function (i, row) {
                    if (row.get("globalGroupLevel") == 0) {
                        var element = $('tr[data-uid="' + row.uid + '"] ');
                        element.addClass("colored-row");
                    }
                });
            },
            detailInit: detailInit,
            detailExpand: function(e){
                groupID = this.dataItem(e.masterRow).get("globalGroupID");
            },
        }).data("kendoGrid");
    }

希望有帮助