MultiRow - Group Headers - C1 ASP.NET MVC

Group Headers

The MultiRowGroupHeaders property determines whether group headers should have multiple rows instead of a single header row, which is useful when you want to display aggregate values in the group headers.

Features

Sample
Source
Documentation

Country

Color

Discount

Country: German (15 items)

-8,636.77

1.67

Settings

Description

The MultiRowGroupHeaders property determines whether group headers should have multiple rows instead of a single header row, which is useful when you want to display aggregate values in the group headers.

GroupHeadersController.cs
GroupHeaders.cshtml

using System.Collections.Generic; 
using C1.Web.Mvc; 
using C1.Web.Mvc.Serialization; 
using Microsoft.AspNetCore.Mvc; 
using MultiRowExplorer.Models; 
  
namespace MultiRowExplorer.Core20.Controllers 
{ 
    public partial class MultiRowController : Controller 
    { 
        public ActionResult GroupHeaders() 
        { 
            ViewBag.DemoSettingsModel = new ClientSettingsModel 
            { 
                Settings = new Dictionary<string, object[]> 
                { 
                    { "GroupBy", new object[] { "Country", "Color", "Country and Color", "None" } }, 
                    { "ShowGroups", new object[] {true, false } }, 
                    { "MultiRowGroupHeaders", new object[] {true, false } } 
                } 
            }; 
  
            return View(); 
        } 
  
        public ActionResult GroupHeaders_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) 
        { 
            return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(100))); 
        } 
    } 
}

@model IEnumerable<Sale> 
@{ 
    ClientSettingsModel settings = ViewBag.DemoSettingsModel; 
    ViewBag.DemoSettings = true; 
} 
  
@section Scripts{ 
    <script>
        function collapseAllGroups() { 
            var mr = wijmo.Control.getControl("#@settings.ControlId"); 
            mr.collapseGroupsToLevel(0); 
        } 
        function expandAllGroups() { 
            var mr = wijmo.Control.getControl("#@settings.ControlId"); 
            mr.collapseGroupsToLevel(10); 
        } 
    </script>
} 
  
<input type="button" value="@Html.Raw(MultiRowRes.Grouping_Text2)" class="btn" onclick="collapseAllGroups()" /> 
<input type="button" value="@Html.Raw(MultiRowRes.Grouping_Text3)" class="btn" onclick="expandAllGroups()" /> 
  
  
<c1-multi-row id="@settings.ControlId" class="multirow" is-read-only="true" group-by="Country" show-groups="true" multi-row-group-headers="true"> 
    <c1-items-source read-action-url="@Url.Action("GroupHeaders_Bind")" disable-server-read="true"></c1-items-source> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="ID" header="ID" /> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="Country" header="Country" /> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="Color" header="Color" /> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="Amount" header="Amount" aggregate="Sum" /> 
        <c1-multi-row-cell binding="Discount" header="Discount" aggregate="Sum" /> 
    </c1-multi-row-cell-group> 
</c1-multi-row> 
  
@section Settings{ 
    <script>
        function customChangeGroupBy(grid, name) { 
            var groupDescriptions = grid.collectionView.groupDescriptions; 
            grid.beginUpdate(); 
            groupDescriptions.clear(); 
  
            if (name.indexOf("Country") > -1) { 
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Country")); 
            } 
  
            if (name.indexOf("Color") > -1) { 
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Color")); 
            } 
  
            grid.endUpdate(); 
        } 
  
    </script>
} 
  
@section Description{ 
    <p>@Html.Raw(MultiRowRes.Grouping_Text4)</p> 
} 