代码之家 › 专栏 › 技术社区 › Nirman

是否可以合并Kendogrid中的列?

kendo-grid telerik kendo-ui asp.net-mvc .net

Nirman · 技术社区 · 6 年前

下面是我的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来扩展行。但它以列格式显示数据,而我们需要在这里合并所有可见列。

有人能建议一下肯多格利德是否可以这样做吗?

如果原始问题中有不清楚的地方,请评论。

1 回复 | 直到 6 年前

The Dread Pirate Stephen 6 年前

可以使用网格的detailtemplate配置选项在展开行时显示所需的任何类型的ui。

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

下面是一个简单的演示(在jquery中,而不是mvc中),它尝试执行您描述的操作: https://dojo.telerik.com/@Stephen/AMAcatiB

如果使用所需的用户界面定义剑道模板:

<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);
     }
});