Question

我有一个具有detailInit（hierichal网格）的KendoGrid ...主网格包含组名，子网格包含选项，显示在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）行展开并根据从maser网格行传递的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

的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与此方法无关，我甚至不需要传递一个。此数据将隐藏并显示基于上次选择的选项的组和选项。

现在它第一次运行时，我可以从任何行中选择一个Option，但是当我去选择另一行时，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");
    }

希望这个帮助

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

1 个答案: