Features

Group Headers

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

ID
Country
Color
Discount
loading...

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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)));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@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>
}