Collapsible Column Headers

Collapsible Column Headers

This sample shows how to collapse the column headers of MultiRow control to a single line, which shows only the group names rather than individual cells.




By default, the MultiRow control creates column headers that span multiple rows and shows the header for each cell defined in the LayoutDefinition.

These cell-specific column headers may be used to sort or filter the data as you would do in a conventional grid.

In some cases, you may want to collapse the column headers to a single line, showing only the group names rather than individual cells.
This saves space at the expense of having individual cell headers. To collapse the column headers, set the CollapsedHeaders property to true.
In these scenarios, remember to set the Header property on the groups in order to avoid empty column headers.

Setting the CollapsedHeaders property to null causes the grid to show all header information (groups and columns).
In this case, the first row will show the group headers and the remaining rows will show the individual column headers.

using System.Web.Mvc;
using System.Collections.Generic;
using MultiRowExplorer.Models;

namespace MultiRowExplorer.Controllers
    public partial class MultiRowController : Controller
        public ActionResult CollapsedHeaders()
            ViewBag.DemoSettings = true;
            ViewBag.DemoSettingsModel = new ClientSettingsModel
                Settings = new Dictionary<string, object[]>
                    { "CollapsedHeaders", new object[] {"False", "True", "null"} },
                    { "ShowHeaderCollapseButton", new object[] { false, true} }
                DefaultValues=new Dictionary<string, object>
                    { "CollapsedHeaders", true },
                    { "ShowHeaderCollapseButton", true }
            return View(Orders.GetOrders());
@model IEnumerable<Orders.Order>
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;

    .Bind(bl => bl.Bind(Model).DisableServerRead(true))

@section Settings{
        function customChangeCollapsedHeaders(multirow, name) {
            switch (name) {
                case "False":
                    multirow.collapsedHeaders = false;
                case "True":
                    multirow.collapsedHeaders = true;
                case "null":
                    multirow.collapsedHeaders = null;

@section Summary{


@section Description{