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 会触发,但子网格中没有显示任何数据,这应该是因为我正在根据过去的回溯数据重新绑定网格。
这对我所解释的任何人都有意义吗? 如果没有,请让我澄清任何事情。
我认为这是重复的实例。当你调用你的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");
}
希望这个帮助