我试图在mvvm中创建一个分层网格，经历了多个示例，但是没有运气。一定是在做一些错误。尽管没有给出任何例外，但是层次结构不起作用，但正常的网格正在填充。
我的VM如下：
var PolicyList;
xxx.PayRollProcess.PayRollPolicy = (function ($, kendo, _, App) {
var vmSalaryPolicy = kendo.observable({
// Properties
//*******************************
Id: null,
Name: null,
Description: null,
CreatedBy: null,
CreatedDate: null,
PolicyID: null,
SaveFieldButtonText: "Save Field",
PolicyList : new kendo.data.DataSource({
transport: {
read: {
type: "GET",
url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetPolicies"),
contentType: "application/json; charset=utf-8",
dataType: "json",
complete: function (data) {
debugger;
if (data.responseJSON !== null) {
vmSalaryPolicy.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
vmSalaryPolicy.set("SalryField", data.responseJSON[0]);
}
},
error: function (err) {
xxx.Layout.viewModel.ShowError(err);
}
}
},
schema: {
model: {
fields: {
SalaryPolicyID: { type: "number" },
Name: { type: "string" },
Description: { type: "string" },
CreatedBy: { type: "bool" },
CreatedOn: { type: "string" }
}
}
},
pageSize: 10
}),
AllPolicyFieldDetailList : new kendo.data.DataSource({
transport: {
read: {
type: "GET",
url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetAllPayRollPolicyDetails"),
contentType: "application/json; charset=utf-8",
dataType: "json",
complete: function (data) {
if (data.responseJSON !== null) {
vmSalaryField.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
vmSalaryField.set("SalryField", data.responseJSON[0]);
}
},
error: function (err) {
xxx.Layout.viewModel.ShowError(err);
}
}
},
schema: {
model: {
fields: {
SalaryPolicyID: { type: "number" },
SalaryPolicyName: { type: "bool" },
SalaryPolicyDescription: { type: "string" },
SalaryFieldID: { type: "string" },
SalaryFieldName: { type: "bool" },
Type: { type: "bool" },
HeaderName: { type: "string" }
}
}
},
pageSize: 10
}),
dataSource: PolicyList,
detailInit: function (e) {
debugger;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "Get",
transport: {
read: {
type: "GET",
url: xxx.Layout.viewModel.GetApiUrl("PayRoll/GetAllPayRollPolicyDetails"),
contentType: "application/json; charset=utf-8",
dataType: "json",
complete: function (data) {
if (data.responseJSON !== null) {
vmSalaryPolicy.set("IsRecordFound", data.responseJSON.length > 0 ? true : false);
vmSalaryPolicy.set("SalryField", data.responseJSON[0]);
}
},
error: function (err) {
xxx.Layout.viewModel.ShowError(err);
}
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 6,
filter: { field: "SalaryPolicyID", operator: "eq", value: e.data.SalaryPolicyID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "SalaryFieldID", title: "ID", width: "110px" },
{ field: "SalaryFieldName", title: "Field Name", width: "110px" },
{ field: "Type", title: "Type" },
{ field: "HeaderName", title: "Header Name", width: "300px" }
]
});
},
dataBound: function (e) {
debugger;
e.sender.expandRow(e.sender.tbody.find("tr.k-master-row").first());
},
});
$(function () {
kendo.bind($("#PolicyPage"), vmSalaryPolicy);
});
return { viewModel: vmSalaryPolicy };
})(jQuery, kendo, _, xxx);
.cshtml包含：
<div class="box-body rm-padding">
<div data-bind="invisible: IsRecordFound">No Policy Details found.</div>
<div id="PayRollPolicyFieldGrid"
data-role="grid"
data-sortable="true"
data-pageable="true"
data-height="450"
data-detail-init="detailInit"
data-columns='[{"field": "SalaryPolicyID"}, {"field": "Name"}, {"field": "Description"}, {"field": "CreatedBy"}, {"field": "CreatedOn"}]'
data-bind="source: PolicyList, events: { dataBound: dataBound }">
</div>
</div>
我尝试了示例here
但是没有运气。
它仅加载带有策略详细信息的网格。
GetPolicies的Json：
{
"ArrayOfSalaryPolicy": {
"SalaryPolicy": {
"CreatedBy": "101429",
"CreatedOn": "2019-01-18T21:01:21.97",
"Description": "Band A Salary Policy",
"Name": "Band-A",
"SalaryPolicyID": "1"
},
"_xmlns:i": "http://www.w3.org/2001/XMLSchema-instance",
"_xmlns": "http://schemas.datacontract.org/2004/07/xxx.Common"
}
}
AllPolicyFieldDetailList的JSON：
{
"ArrayOfSalaryPolicyField": {
"SalaryPolicyField": [
{
"HeaderID": "0",
"HeaderName": "OtherDeduction",
"ID": "5",
"IsActive": "false",
"SalaryFieldID": "0",
"SalaryFieldName": "LWF",
"SalaryPolicyDescription": "Band A Salary Policy",
"SalaryPolicyID": "1",
"SalaryPolicyName": "Band-A",
"Type": "Deduction"
},
{
"HeaderID": "0",
"HeaderName": "StatutoryDeduction",
"ID": "3",
"IsActive": "false",
"SalaryFieldID": "0",
"SalaryFieldName": "PF",
"SalaryPolicyDescription": "Band A Salary Policy",
"SalaryPolicyID": "1",
"SalaryPolicyName": "Band-A",
"Type": "Deduction"
},
{
"HeaderID": "0",
"HeaderName": "StatutoryDeduction",
"ID": "4",
"IsActive": "false",
"SalaryFieldID": "0",
"SalaryFieldName": "TDS",
"SalaryPolicyDescription": "Band A Salary Policy",
"SalaryPolicyID": "1",
"SalaryPolicyName": "Band-A",
"Type": "Deduction"
},
{
"HeaderID": "0",
"HeaderName": "Other Allwances",
"ID": "2",
"IsActive": "false",
"SalaryFieldID": "0",
"SalaryFieldName": "Conveyance",
"SalaryPolicyDescription": "Band A Salary Policy",
"SalaryPolicyID": "1",
"SalaryPolicyName": "Band-A",
"Type": "Earning"
},
{
"HeaderID": "0",
"HeaderName": "Earnings",
"ID": "1",
"IsActive": "false",
"SalaryFieldID": "0",
"SalaryFieldName": "HRA",
"SalaryPolicyDescription": "Band A Salary Policy",
"SalaryPolicyID": "1",
"SalaryPolicyName": "Band-A",
"Type": "Earning"
}
],
"_xmlns:i": "http://www.w3.org/2001/XMLSchema-instance",
"_xmlns": "http://schemas.datacontract.org/2004/07/xxx.Common"
}}
我在运行时比较了代码随附的示例，有趣的发现是，示例在<tr>中加载了“ k-master-row”类，但在我的情况下却没有。
代码运行无任何异常，并加载了策略。但是它不显示层次结构网格。 我已经将“调试器”放在dataInit中，但是它永远不会在那里出现或停止。
答案 0 :(得分：0)
我使用MVVM设法使主从网格工作的唯一方法是为明细行提供模板（即使它只是一个“空”模板，您稍后在detailInit事件中也要对其进行操作）
还请注意，在MVVM小部件初始化期间，上下文是窗口，因此当解析data-detail-init属性时，kendo将在错误的位置显示。您应该将其移至binding / events属性，因为在设置绑定时，上下文是您要绑定的对象。我已经修改了您的标记以证明这一点。
<script id="grid-detail-placeholder" type="text/x-kendo-template"></script>
<div class="box-body rm-padding">
<div data-bind="invisible: IsRecordFound">No Policy Details found.</div>
<div id="PayRollPolicyFieldGrid"
data-role="grid"
data-sortable="true"
data-pageable="true"
data-height="450"
data-detail-template="grid-detail-placeholder"
data-columns='[{"field": "SalaryPolicyID"}, {"field": "Name"}, {"field": "Description"}, {"field": "CreatedBy"}, {"field": "CreatedOn"}]'
data-bind="source: PolicyList, events: { detailInit: detailInit, dataBound: dataBound }">
</div>
</div>