Features

Custom Column Headers

Custom Column Headers

The HeaderLayoutDefinition property defines the layout of the rows used to display the grid's column headers.

Features

Name
Currency
ytd
m1
m6
m12
stock
bond
cash
other
loading...

Description

The HeaderLayoutDefinition property defines the layout of the rows used to display the grid's column headers. The array contains a list of cell group objects similar to those used with the layoutDefinition property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Mvc;
using MultiRowExplorer.Models;
  
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public IActionResult CustomColumnHeaders()
        {
            return View();
        }
  
        public ActionResult CustomColumnHeaders_Bind([C1JsonRequest] CollectionViewRequest<DataRepresentation> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, DataRepresentation.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
@model IEnumerable<DataRepresentation>
  
<c1-multi-row id="cCHMultiRow" class="multirow" is-read-only="true" show-header-collapse-button="true">
    <c1-items-source read-action-url="@Url.Action("CustomColumnHeaders_Bind")"></c1-items-source>
    <c1-multi-row-cell-group header="Name">
        <c1-multi-row-cell binding="Name" header="Name" width="*" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Currency">
        <c1-multi-row-cell binding="Currency" header="Currency" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Performance" colspan="4">
        <c1-multi-row-cell binding="ytd" header="ytd" />
        <c1-multi-row-cell binding="m1" header="m1" />
        <c1-multi-row-cell binding="m6" header="m6" />
        <c1-multi-row-cell binding="m12" header="m12" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Allocation" colspan="4">
        <c1-multi-row-cell binding="stock" header="stock" />
        <c1-multi-row-cell binding="bond" header="bond" />
        <c1-multi-row-cell binding="cash" header="cash" />
        <c1-multi-row-cell binding="other" header="other" />
    </c1-multi-row-cell-group>
  
    <c1-multi-row-header-cell-group header="Name">
        <c1-multi-row-cell binding="Name" header="Name" width="*" />
    </c1-multi-row-header-cell-group>
    <c1-multi-row-header-cell-group header="Currency">
        <c1-multi-row-cell binding="Currency" header="Currency" />
    </c1-multi-row-header-cell-group>
    <c1-multi-row-header-cell-group>
        <c1-multi-row-cell header="Performance" colspan="4" />
        <c1-multi-row-cell binding="ytd" header="ytd" />
        <c1-multi-row-cell binding="m1" header="m1" />
        <c1-multi-row-cell binding="m6" header="m6" />
        <c1-multi-row-cell binding="m12" header="m12" />
    </c1-multi-row-header-cell-group>
    <c1-multi-row-header-cell-group>
        <c1-multi-row-cell header="Allocation" colspan="4" />
        <c1-multi-row-cell binding="stock" header="stock" />
        <c1-multi-row-cell binding="bond" header="bond" />
        <c1-multi-row-cell binding="cash" header="cash" />
        <c1-multi-row-cell binding="other" header="other" />
    </c1-multi-row-header-cell-group>
</c1-multi-row>
  
@section Description{
    <p>@Html.Raw(MultiRowRes.CustomColumnHeader_Text0)</p>
  
}