是否可以在 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定义一个kendo模板：

<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>

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

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

然后将点击事件处理程序附加到第一列到 expand/collapse 关联行（取自 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);
     }
});

是否可以在 KendoGrid 中合并列？

Is it possible to merge columns in KendoGrid?

.net

asp.net-mvc

telerik

kendo-ui

kendo-grid