我在扩展剑道网格的细节行时遇到问题。我的网格填充了 3 级数据，如下所示。
Parent Row
Child Row
Grand Child Row
每一行都有一个网格。我想要实现的是在单击按钮以显示这些网格时展开所有详细信息行。目前，我可以展开所有细节行，但 Grand Child 的网格会缩小。如果手动展开就没有这个问题了。
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/detailtemplate?autoRun=true&theme=office365">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common-office365.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.office365.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.office365.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
<button id="expand" class="btn btn-sm btn-primary" >Expand</button>
<div id="example">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="taskGrid"></div>
</script>
<script type="text/x-kendo-template" id="Subtemplate">
<div class="subTaskGrid"></div>
</script>
<script>
$(document).ready(function() {
var column=[{
"field": "",
"title": "No.",
"hidden": false,
"template": "",
"width": "40px",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_tasker",
"title": "Admin Name",
"hidden": false,
"template": "<span title='#:r_tasker#'>#:r_tasker#</span>",
"width": "180px",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_tasker_email",
"title": "Email",
"hidden": false,
"template": "<span title='#:r_tasker_email#'>#:r_tasker_email#</span>",
"width": "180px",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "taskColumn",
"title": "taskColumn",
"hidden": true,
"template": "<span title='#:taskColumn#'>#:taskColumn#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": [{
"field": "r_task_receive_date",
"title": "Receive Date",
"hidden": false,
"template": "<span title='#:r_task_receive_date#'>#:r_task_receive_date#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_task_action_date",
"title": "Action Taken on",
"hidden": false,
"template": "<span title='#:r_task_action_date#'>#:r_task_action_date#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_task_status",
"title": "Action Taken",
"hidden": false,
"template": "<span title='#:r_task_status#'>#:r_task_status#</span>",
"width": "350px",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_ref_no",
"title": "ID",
"hidden": true,
"template": "<span title='#:r_ref_no#'>#:r_ref_no#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_app_name",
"title": "Applicant Name",
"hidden": true,
"template": "<span title='#:r_app_name#'>#:r_app_name#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_app_ic",
"title": "Passport",
"hidden": true,
"template": "<span title='#:r_app_ic#'>#:r_app_ic#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_app_com_dep",
"title": "Company / Department",
"hidden": true,
"template": "<span title='#:r_app_com_dep#'>#:r_app_com_dep#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_task_duration",
"title": "Duration",
"hidden": false,
"template": "<span title='#:r_task_duration#'>#:r_task_duration#</span>",
"width": "",
"headerTemplate": "<span title=\" The duration is derived by hours from Received Date to Action Taken on.\">Duration(Hours) <i class='k-icon k-i-info'><i></span>",
"taskColumn": []
}
]
},
{
"field": "firstTaskColumn",
"title": "firstTaskColumn",
"hidden": true,
"template": "<span title='#:firstTaskColumn#'>#:firstTaskColumn#</span>",
"width": "",
"headerTemplate": null,
"taskColumn": [{
"field": "r_ref_no",
"title": "ID",
"hidden": false,
"template": null,
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_app_name",
"title": "Applicant Name",
"hidden": false,
"template": null,
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_app_ic",
"title": "Passport",
"hidden": false,
"template": null,
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_app_com_dep",
"title": "Company / Department",
"hidden": false,
"template": null,
"width": "",
"headerTemplate": null,
"taskColumn": []
},
{
"field": "r_task_duration",
"title": "Total Duration",
"hidden": false,
"template": null,
"width": "",
"headerTemplate": "<span title=\" The total duration is derived by the sum up of all iteration's duration.\">Total Duration(Hours) <i class='k-icon k-i-info'><i></span>",
"taskColumn": []
}
]
}
];
var row=[{
"r_tasker": "A",
"r_tasker_email": null,
"taskColumn": "[{\"r_app_name\":\"AAAA_ CH UPDATE\",\"r_ref_no\":\"O-001\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"1.5\",\"subitem\":[{\"r_task_receive_date\":\"03/03/2021 05:59:21\",\"r_task_action_date\":\"03/03/2021 06:48:26\",\"r_task_status\":\"Approved application.\",\"r_ref_no\":\"O-001\",\"r_app_name\":\"AAAA_ UPDATE\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"1\"},{\"r_task_receive_date\":\"03/03/2021 05:43:20\",\"r_task_action_date\":\"03/03/2021 05:55:59\",\"r_task_status\":\"Require Review on application.\",\"r_ref_no\":\"O-001\",\"r_app_name\":\"AAAA_ CH UPDATE\",\"r_app_ic\":\"AA\",\"r_app_com_dep\":\"ABAN\",\"r_task_duration\":\"0.5\"}]},{\"r_app_name\":\"a\",\"r_ref_no\":\"O-003\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"10563\",\"subitem\":[{\"r_task_receive_date\":\"23/03/2021 05:21:14\",\"r_task_action_date\":\"25/03/2021 10:40:49\",\"r_task_status\":\"approved application.\",\"r_ref_no\":\"O-003\",\"r_app_name\":\"a\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"53.5\"},{\"r_task_receive_date\":\"10/01/2020 04:02:01\",\"r_task_action_date\":\"23/03/2021 01:25:01\",\"r_task_status\":\"Require Review on application.\",\"r_ref_no\":\"O-003\",\"r_app_name\":\"a\",\"r_app_ic\":\"a\",\"r_app_com_dep\":\"a\",\"r_task_duration\":\"10509.5\"}]}]",
"firstTaskColumn": null
},
{
"r_tasker": "B",
"r_tasker_email": null,
"taskColumn": "[{\"r_app_name\":\"Antonio Juggler\",\"r_ref_no\":\"O-004\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"1\",\"subitem\":[{\"r_task_receive_date\":\"22/02/2021 12:13:03\",\"r_task_action_date\":\"22/02/2021 12:14:15\",\"r_task_status\":\"Approved application.\",\"r_ref_no\":\"O-004\",\"r_app_name\":\"Antonio Juggler\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"0.5\"},{\"r_task_receive_date\":\"22/02/2021 12:09:50\",\"r_task_action_date\":\"22/02/2021 12:11:15\",\"r_task_status\":\"Require Review on application.\",\"r_ref_no\":\"O-004\",\"r_app_name\":\"Antonio Juggler\",\"r_app_ic\":\"990809783902\",\"r_app_com_dep\":\"A SDN BHD\",\"r_task_duration\":\"0.5\"}]}]",
"firstTaskColumn": null
}
];
var record=0;
var fieldDataSource = new kendo.data.DataSource({
data: row,
pageSize: 50
});
var element = $("#grid").kendoGrid({
dataSource: fieldDataSource,
scrollable: true,
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
columns: column,
dataSource: {
data:row,
},
pageable: {
pageSize: 10000,
position: "bottom"
},
dataBound: function (e)
{
var items = e.sender.items();
for (var i = 0; i < items.length; i++)
{
var row = $(items[i]);
var dataItem = e.sender.dataItem(row);
// if got extra then check q_spare_3 is equal to 0 or not(folder deleted)
if (dataItem.taskColumn == undefined)
{
row.find(".k-hierarchy-cell").html('');
row.find(".k-hierarchy-col").html('');
$(".k-hierarchy-col").remove();
$(".k-hierarchy-cell").remove();
}
}
this.expandRow(this.tbody.find("tr.k-master-row"));
}
}).data("kendoGrid");
});
function detailInit(e) {
var masterColumn = $("#grid").data("kendoGrid").columns;
var taskColumn = [];
for (var i = 0; i < masterColumn.length; i++)
{
if (masterColumn[i].field == "firstTaskColumn")
{
taskColumn = masterColumn[i].taskColumn;
break;
}
}
var detailRow = e.detailRow;
detailRow.find(".taskGrid").kendoGrid({
dataSource: {
data: jQuery.parseJSON(e.data.taskColumn),
pageSize: 50,
},
detailInit: detailInitGrandChild,
detailTemplate: kendo.template($("#Subtemplate").html()),
dataBound: function (e)
{
var items = e.sender.items();
for (var i = 0; i < items.length; i++)
{
var row = $(items[i]);
var dataItem = e.sender.dataItem(row);
if (dataItem.subitem == undefined)
{
row.find(".taskGrid .k-hierarchy-cell").html('');
row.find(".taskGrid .k-hierarchy-col").html('');
$(".taskGrid .k-hierarchy-col").remove();
$(".taskGrid .k-hierarchy-cell").remove();
}
}
},
scrollable: true,
sortable: true,
pageable: true,
columns: taskColumn
});
}
function detailInitGrandChild(e)
{
var masterColumn = $("#grid").data("kendoGrid").columns;
var taskColumn = [];
for (var i = 0; i < masterColumn.length; i++)
{
if (masterColumn[i].field == "taskColumn")
{
taskColumn = masterColumn[i].taskColumn;
break;
}
}
var detailRow = e.detailRow;
detailRow.find(".subTaskGrid").kendoGrid({
dataSource: {
data: e.data.subitem,
pageSize: 50,
},
scrollable: false,
sortable: true,
pageable: true,
columns: taskColumn
});
}
$('#expand').click(function (e)
{
var grid = $("#grid").data("kendoGrid");
$(".k-master-row").each(function (index)
{
grid.expandRow(this);
});
})
</script>
<style>
.k-detail-cell .k-tabstrip .k-content {
padding: 0.2em;
}
.employee-details ul
{
list-style:none;
font-style:italic;
margin: 15px;
padding: 0;
}
.employee-details ul li
{
margin: 0;
line-height: 1.7em;
}
.employee-details label
{
display:inline-block;
width:90px;
padding-right: 10px;
text-align: right;
font-style:normal;
font-weight:bold;
}
</style>
</div>
</body>
</html>答案 0 :(得分：0)
我不知道为什么，但是手动展开大子行时的区别是 colspan。手动执行此操作会导致 colspan 为 5。使用 expandRow，结果为 3。这就是大子行未填充整个宽度的原因。为了修复，我修改了展开点击事件处理程序，如下所示：
$('#expand').click(function (e) {
var grid = $("#grid").data("kendoGrid");
grid.element.find(".k-master-row").each(function() {
var $masterRow = $(this);
$row = $masterRow.find(".k-hierarchy-cell a.k-i-collapse");
// only expand rows that are not expanded
if ($row.length === 0) {
grid.expandRow($masterRow);
var $detailCell = $masterRow.next().find(".k-detail-cell:first");
$detailCell.attr("colspan", "5");
}
});
});