CODEWITHSUNDEEP
.netasp.net-mvckendo-uitelerikkendo-grid
Nirman
Nirman

Reputation: 6783

Is it possible to merge columns in KendoGrid?

Following is the HTML markup of a KendoGrid in my MVC project:

@(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)
)

This all works fine, However, I am unable to find the solution of a following requirement:

Whenever user clicks on ContactID, it should expand the row and should merge all columns for that particular row. We need to display many details about that particular contact in the expanded row.

I know we can use "ClientTemplate" for each column and write javascripts to expand the row. But it displays data in column format, whereas, we need to merge all visible columns here.

Could anyone please suggest if this is possible in KendoGrid?

Please comment if something is unclear from the original question.

Upvotes: 0

Views: 2771

Answers (1)

The Dread Pirate Stephen
The Dread Pirate Stephen

Reputation: 3169

You can use the DetailTemplate configuration option of the grid to show whatever type of UI you want when you expand the row.

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

Here's a simple demo(in jquery, not MVC) that tries to do what you have described: https://dojo.telerik.com/@Stephen/AMAcatiB

If defines a kendo template with your desired 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>

And then configures the detailTemplate option of the grid to use it:

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

And then attaches a click event handler to the first column to expand/collapse the associated row (taken from 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);
     }
});

Upvotes: 1

Related Questions