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”并编写javascripts来扩展行。但它以列格式显示数据，而我们需要在此处合并所有可见列。

有人可以建议在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())
})

然后将click事件处理程序附加到第一列以展开/折叠关联的行（取自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中合并列？

1 个答案: