MultiRow - Collapsible Column Headers

Collapsible Column Headers

MultiRow control can collapse the column headers to a single line, showing only the group names rather than individual cells.

Features

Sample
Source
Documentation

Ordered

Shipped

City

State

Zip

Express

Settings

Description

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.

CollapsedHeadersController.cs
CollapsedHeaders.cshtml

using Microsoft.AspNetCore.Mvc; 
using System.Collections.Generic; 
using MultiRowExplorer.Models; 
using C1.Web.Mvc; 
using C1.Web.Mvc.Serialization; 
  
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(); 
        } 
  
        public ActionResult CollapsedHeaders_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData) 
        { 
            var model = Orders.GetOrders(); 
            return this.C1Json(CollectionViewHelper.Read(requestData, model)); 
        } 
    } 
}

@model IEnumerable<Orders.Order> 
@{ 
    var cities = Orders.GetCities().ToValues(); 
    ClientSettingsModel settings = ViewBag.DemoSettingsModel; 
} 
  
<c1-multi-row id="@settings.ControlId" class="multirow" collapsed-headers="true" show-header-collapse-button="true"> 
    <c1-items-source read-action-url="@Url.Action("CollapsedHeaders_Bind")" disable-server-read="true"></c1-items-source> 
    <c1-multi-row-cell-group header="Order" colspan="2"> 
        <c1-multi-row-cell binding="Id" header="ID" class="id" colspan="2" /> 
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" colspan="2" /> 
        <c1-multi-row-cell binding="Date" header="Ordered" /> 
        <c1-multi-row-cell binding="ShippedDate" header="Shipped" /> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group header="Customer" colspan="3"> 
        <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" /> 
        <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" /> 
        <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" colspan="2" /> 
        <c1-multi-row-cell binding="Customer.Phone" name="CustomerPhone" header="Customer Phone" /> 
        <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.DropDownList"> 
            <c1-data-map display-member-path="Value" selected-value-path="Value"> 
                <c1-items-source source-collection="cities" /> 
            </c1-data-map> 
        </c1-multi-row-cell> 
        <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="State" /> 
        <c1-multi-row-cell binding="Customer.Zip" name="CustomerZip" header="Zip" /> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group header="Shipper"> 
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" width="*" /> 
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" /> 
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" /> 
    </c1-multi-row-cell-group> 
</c1-multi-row> 
  
@section Settings{ 
    <script>
        function customChangeCollapsedHeaders(multirow, name) { 
            switch (name) { 
                case "False": 
                    multirow.collapsedHeaders = false; 
                    break; 
                case "True": 
                    multirow.collapsedHeaders = true; 
                    break; 
                case "null": 
                    multirow.collapsedHeaders = null; 
                    break; 
            } 
        } 
    </script>
} 
  
@section Summary{ 
<p>@Html.Raw(MultiRowRes.CollapsedHeaders_Text0)</p> 
  
} 
  
@section Description{ 
<p>@Html.Raw(MultiRowRes.CollapsedHeaders_Text1)</p> 
  
<p>@Html.Raw(MultiRowRes.CollapsedHeaders_Text2)</p> 
  
<p>@Html.Raw(MultiRowRes.CollapsedHeaders_Text3)</p> 
  
<p>@Html.Raw(MultiRowRes.CollapsedHeaders_Text4)</p> 
  
} 