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

本文关键字:网格 刷新 数据 DetailInit 新数据 KendoGrid | 更新日期: 2023-09-27 18:32:25

我有一个KendoGrid,它有一个detailInit(hierichal grid)...主网格包含组名称,子网格包含选项,显示在 KendoGrid 的详细信息初始化函数中。这是步骤的流程。

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) 用户单击详细信息展开一行并将该行组 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) 展开的行关闭,选项出现在名为"选项"的主网格列中

发生这种情况之后,我有一个名为"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 会触发,但子网格中没有显示任何数据,这应该是因为我正在根据过去的回溯数据重新绑定网格。

这对我所解释的任何人都有意义吗? 如果没有,请让我澄清任何事情。

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

我认为这是重复的实例。当你调用你的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");
}

希望这个帮助