是否可以合并 KendoGrid 中的列？

Question

以下是我的 MVC 项目中 KendoGrid 的 HTML 标记：

@(Html.Kendo().Grid<ZCW.MVC.ViewModels.AdminEngagementSearchViewModel>()
    .Name("ContactsGrid")
    .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("ContactsSearchData", "Contact").Data("additionalInfo").Type(HttpVerbs.Post))
            .ServerOperation(true)
            )
    .Columns(columns =>
    {
        columns.Bound(p => p.ContactID).Title("ID");
        columns.Bound(p => p.FirstName).Title("First name");
        columns.Bound(p => p.MiddleName).Title("Middle initials");
        columns.Bound(p => p.LastName).Title("Last name");
    })
    .AutoBind(false)
    .Sortable()
    .EnableCustomBinding(true)
)

这一切都很好，但是，我无法找到以下要求的解决方案：

当用户点击 ContactID 时，它应该展开该行并合并该特定行的所有列。我们需要在展开的行中显示有关该特定联系人的许多详细信息。

我知道我们可以对每一列使用“ClientTemplate”并编写 JavaScript 来扩展该行。但是它以列格式显示数据，而我们需要在这里合并所有可见的列。

谁能建议这在 KendoGrid 中是否可行？

如果原始问题不清楚，请发表评论。

Answer 1

您可以使用网格的 DetailTemplate 配置选项在展开行时显示您想要的任何类型的 UI。

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/detailtemplate

这是一个简单的演示（在 jquery 中，而不是 MVC），它试图做你所描述的事情：https://dojo.telerik.com/@Stephen/AMAcatiB

如果用你想要的 UI 定义一个剑道模板：

<script id="detail-template" type="text/x-kendo-template">
    <div>
        Contact ID: #: ContactID #
    </div>
    <div>
        First Name: #: FirstName #
    </div>
    <div>
        Middle Name: #: MiddleName #
    </div>
    <div>
        Last Name: #: LastName #
    </div>
</script>

然后配置网格的detailTemplate选项来使用它：

$("#grid").kendoGrid({
    ...,
    detailTemplate: kendo.template($("#detail-template").html())
})

然后将点击事件处理程序附加到第一列以展开/折叠关联的行（取自https://docs.telerik.com/kendo-ui/knowledge-base/grid-master-row-click-expand-collapse-detail）：

$(".k-master-row").on("click", "td:eq(1)", function (e) {
    var target = $(e.target);
    if ((target.hasClass("k-i-expand")) || (target.hasClass("k-i-collapse"))) {
        return;
    }

     var row = target.closest("tr.k-master-row");
     var icon = row.find(".k-i-expand");

     if (icon.length) {
        grid.expandRow(row);
     } else {
        grid.collapseRow(row);
     }
});