MultiRow - Custom Column Headers

Custom Column Headers

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

Features

Sample
Source
Documentation

Name

Currency

ytd

m12

stock

bond

cash

other

Optimus Prime MMCT

EUR

7.68%

5.58%

2.06%

5.59%

9.06%

4.42%

9.78%

2.74%

Constant Growth IXTR

USD

6.33%

4.7%

9.82%

0.3%

8.62%

9.95%

6.77%

3.15%

Optimus Prime MMCT

EUR

9.92%

0.33%

5.26%

9.34%

6.88%

5.47%

0.81%

Constant Growth IXTR

USD

2.97%

9.89%

6.43%

7.63%

0.3%

3.81%

3.43%

9.57%

Optimus Prime MMCT

EUR

1.19%

2.73%

9.07%

7.95%

3.37%

4.57%

1.47%

2.21%

Constant Growth IXTR

EUR

6.2%

4.88%

1.95%

8.78%

8.25%

7.35%

8.58%

6.8%

Optimus Prime MMCT

USD

8.95%

8.96%

0.87%

8.39%

1.7%

6.44%

8.27%

2.19%

Optimus Prime MMCT

USD

6.52%

7.2%

8.09%

1.01%

7.29%

7.18%

1.26%

9.05%

Constant Growth IXTR

USD

5.41%

3.26%

6.71%

4.68%

8.33%

8.09%

7.94%

7.65%

Optimus Prime MMCT

USD

5.23%

6.63%

3.33%

2.87%

8.21%

2.23%

1.87%

0.69%

Optimus Prime MMCT

EUR

6.3%

9.28%

2.21%

9.29%

0.67%

6.79%

0.94%

Constant Growth IXTR

USD

6.1%

9.53%

4.91%

1.48%

6.78%

5.7%

2.25%

6.18%

Constant Growth IXTR

USD

8.5%

0.62%

2.82%

7.05%

9.59%

9.89%

3.87%

5.23%

Constant Growth IXTR

EUR

5.32%

0.57%

2.81%

4.96%

8.46%

6.13%

1.04%

7.42%

Constant Growth IXTR

EUR

1.31%

6.15%

8.31%

6.85%

5.7%

1.73%

1.85%

Optimus Prime MMCT

USD

9.97%

5.69%

0.63%

2.64%

8.43%

5.68%

6.46%

5.16%

Optimus Prime MMCT

USD

5.13%

1.56%

8.14%

6.43%

5.75%

5.53%

6.72%

9.95%

Constant Growth IXTR

USD

4.66%

4.83%

2.16%

0.72%

2.3%

1.51%

4.47%

4.51%

Constant Growth IXTR

USD

8.16%

2.03%

9.14%

0.3%

5.09%

9.63%

9.94%

0.17%

Optimus Prime MMCT

USD

9.67%

5.88%

7.72%

3.24%

4.2%

9.75%

8.86%

9.73%

Constant Growth IXTR

USD

8.97%

1.78%

8.83%

5.45%

7.85%

5.14%

3.52%

9.92%

Constant Growth IXTR

EUR

1.21%

1.95%

4.97%

5.81%

2.62%

3.1%

2.42%

7.84%

Constant Growth IXTR

EUR

5.59%

6.56%

3.41%

0.23%

0.97%

8.78%

7.11%

8.92%

Optimus Prime MMCT

USD

2.65%

4.74%

1.96%

8.88%

4.92%

6.38%

3.2%

3.69%

Constant Growth IXTR

EUR

6.11%

0.02%

9.83%

9.62%

1.57%

7.72%

0.91%

1.91%

Constant Growth IXTR

USD

7.33%

1.02%

8.4%

6.43%

5.73%

2.42%

8.37%

8.6%

Constant Growth IXTR

EUR

8.03%

4.6%

3.4%

7.78%

4.27%

6.47%

9.99%

6.09%

Constant Growth IXTR

EUR

9.91%

8.73%

5.4%

1.38%

0.02%

5.57%

6.72%

3.79%

Optimus Prime MMCT

USD

7.87%

5.2%

8.3%

5.41%

5.23%

1.63%

6.34%

5.53%

Constant Growth IXTR

USD

8.01%

4.6%

9.22%

3.37%

1.92%

1.5%

6.61%

2.05%

Optimus Prime MMCT

EUR

7.73%

4.82%

1.01%

4.39%

1.19%

8.6%

5.62%

7.02%

Optimus Prime MMCT

USD

5.69%

4.58%

9.93%

1.22%

1.2%

2.83%

6.31%

7.99%

Constant Growth IXTR

USD

0.13%

4.46%

2.94%

8.4%

8.23%

5.31%

9.52%

2.02%

Optimus Prime MMCT

EUR

8.96%

4.67%

8.44%

3.56%

5.52%

3.04%

4.19%

3.91%

Constant Growth IXTR

EUR

6.01%

9.32%

9.13%

2.99%

6.81%

3.43%

4.67%

7.99%

Constant Growth IXTR

EUR

5.2%

8.62%

9.5%

2.71%

4.97%

3.27%

1.88%

2.61%

Optimus Prime MMCT

EUR

9.08%

3.6%

7.57%

7.89%

1.19%

1.03%

6.14%

6.37%

Optimus Prime MMCT

EUR

8.64%

2.4%

3.77%

5.93%

6.63%

0.81%

5.33%

9.95%

Constant Growth IXTR

USD

0.64%

1.52%

9.85%

0.36%

3.32%

0.34%

5.17%

5.73%

Optimus Prime MMCT

USD

1.16%

1.57%

7.76%

8.33%

7.55%

2.4%

1.75%

1.24%

Constant Growth IXTR

EUR

7.29%

8.3%

2.29%

4.01%

0.45%

2.8%

4.85%

3.57%

Optimus Prime MMCT

USD

7.94%

1.93%

1.02%

1.35%

5.25%

7.56%

3.75%

7.2%

Constant Growth IXTR

USD

5.85%

0.4%

7.78%

3.46%

7.07%

4.64%

5.45%

Optimus Prime MMCT

USD

9.06%

4.1%

8.16%

5.81%

7.51%

2.34%

9.24%

5.85%

Optimus Prime MMCT

USD

5.49%

1.6%

9.66%

4.43%

4.3%

9.23%

0.55%

6.41%

Constant Growth IXTR

EUR

8.65%

4.55%

6.67%

0.94%

9.93%

6.89%

0.52%

8.82%

Optimus Prime MMCT

USD

8.16%

9.4%

5.19%

1.84%

5.1%

3.85%

3.77%

5.21%

Constant Growth IXTR

USD

8.32%

7.9%

7.29%

4.05%

5.36%

4.25%

0.74%

3.35%

Optimus Prime MMCT

EUR

6.52%

8.23%

2.37%

8.39%

5.58%

4.51%

7.43%

7.21%

Optimus Prime MMCT

USD

1.83%

0.41%

8.84%

6.54%

2.36%

6.1%

6.41%

7.82%

Optimus Prime MMCT

USD

5.46%

5.34%

2.57%

0.17%

1.67%

0.75%

7.26%

2.62%

Optimus Prime MMCT

EUR

6.15%

7.17%

9.66%

9.24%

6.85%

9.92%

7.03%

6.8%

Optimus Prime MMCT

USD

6.42%

6.56%

9.32%

3.21%

1.08%

7.91%

9.07%

0.74%

Constant Growth IXTR

EUR

7.84%

2.93%

4.02%

8.71%

2.3%

1.18%

5.66%

2.2%

Optimus Prime MMCT

USD

7.25%

4.81%

1.63%

0.21%

4.48%

4.66%

0.75%

9.6%

Optimus Prime MMCT

USD

9.06%

9.61%

1.55%

8.74%

4.03%

8.9%

6.02%

9.36%

Optimus Prime MMCT

USD

1.68%

6.52%

0.93%

6.32%

7.84%

3.22%

3.15%

0.95%

Optimus Prime MMCT

EUR

4.26%

4.83%

0.08%

1.43%

3.34%

1.61%

4.94%

9.11%

Optimus Prime MMCT

EUR

7.16%

9.47%

1.05%

9.25%

0.2%

8.22%

1.37%

5.28%

Constant Growth IXTR

USD

5.16%

6.3%

3.11%

2.96%

3.15%

0.73%

3.88%

5.3%

Constant Growth IXTR

USD

1.51%

9.8%

2.66%

4.01%

8.18%

4.23%

9.53%

0.12%

Optimus Prime MMCT

USD

3.96%

6.9%

0.64%

2.67%

6.6%

2.21%

5.46%

1.68%

Optimus Prime MMCT

EUR

1.85%

7.87%

6.28%

3.54%

0.51%

7.96%

1.73%

7.12%

Optimus Prime MMCT

USD

7.74%

9.63%

6.74%

7.47%

4.91%

7.36%

6.82%

7.04%

Constant Growth IXTR

EUR

8.69%

1.26%

9.88%

2.25%

9.44%

8.26%

5.66%

0.44%

Optimus Prime MMCT

USD

5.27%

2.19%

9.18%

2.75%

9.41%

3.64%

3.52%

9.12%

Constant Growth IXTR

USD

2.5%

2.41%

1.83%

2.79%

4.69%

4.33%

0.16%

3.16%

Optimus Prime MMCT

EUR

5.4%

8.42%

0.61%

0.15%

0.92%

0.59%

7.99%

4.03%

Constant Growth IXTR

USD

2.3%

1.29%

0.76%

7.35%

7.34%

5.54%

0.45%

3.99%

Optimus Prime MMCT

USD

3.85%

7.7%

3.54%

0.86%

3.47%

6.28%

9.43%

7.09%

Optimus Prime MMCT

EUR

8.1%

2.5%

2.67%

7.13%

5.54%

6.85%

1.58%

9.03%

Constant Growth IXTR

EUR

5.65%

9.49%

5.02%

1.24%

7.92%

1.21%

1.65%

4.48%

Optimus Prime MMCT

EUR

3.88%

6.17%

5.11%

6.49%

5.39%

7.7%

4.88%

9.75%

Optimus Prime MMCT

USD

1.17%

0.9%

6.47%

8.99%

4.16%

9.8%

8.62%

3.63%

Constant Growth IXTR

USD

3.96%

1.42%

2.16%

9.24%

5.62%

4.36%

2.68%

2.3%

Constant Growth IXTR

USD

4.63%

4.95%

1.64%

8.41%

1.23%

1.93%

7.39%

6.18%

Constant Growth IXTR

EUR

1.96%

1.82%

2.35%

7.19%

7.65%

4.75%

3.02%

6.03%

Optimus Prime MMCT

EUR

2.6%

8.02%

2.66%

4.97%

5.18%

2.46%

4.01%

5.86%

Constant Growth IXTR

USD

5.02%

2.59%

6.82%

4.42%

0.02%

6.21%

9.26%

8.06%

Optimus Prime MMCT

USD

2.4%

2.43%

1.9%

3.98%

8.52%

2.14%

9.07%

4.97%

Constant Growth IXTR

USD

1.34%

6.65%

5.22%

4.82%

9.66%

6.61%

2.29%

6.67%

Constant Growth IXTR

EUR

7.92%

1.53%

5.31%

0.7%

2.82%

9.37%

5.01%

7.93%

Optimus Prime MMCT

USD

5.49%

4.96%

8.27%

4.84%

5.72%

0.16%

6.12%

8.69%

Optimus Prime MMCT

USD

3.39%

9.03%

4.28%

9.69%

8.38%

7.37%

Constant Growth IXTR

USD

3.93%

2.59%

4.82%

8.99%

4.32%

0.87%

7.13%

1.2%

Constant Growth IXTR

EUR

7.13%

1.15%

7.8%

0.15%

5.38%

6.38%

8.37%

0.37%

Optimus Prime MMCT

EUR

0.49%

3.6%

0.23%

0.19%

5.39%

8.89%

7.25%

5.31%

Constant Growth IXTR

USD

3.01%

3.17%

3.76%

7.51%

2.9%

0.14%

9.28%

Constant Growth IXTR

USD

3.04%

4.92%

7.53%

7.29%

5.91%

2.24%

1.23%

4.13%

Constant Growth IXTR

USD

2.9%

5.26%

2.92%

0.32%

2.36%

4.63%

Constant Growth IXTR

EUR

3.62%

1.82%

0.19%

6.72%

7.15%

4.12%

7.98%

4.04%

Constant Growth IXTR

USD

6.24%

9.09%

9.84%

4.25%

6.46%

5.57%

6.08%

2.94%

Constant Growth IXTR

USD

7.66%

3.13%

0.68%

7.69%

4.44%

0.11%

7.9%

Constant Growth IXTR

EUR

0.54%

5.51%

5.68%

5.1%

1.23%

1.22%

4.73%

0.81%

Constant Growth IXTR

USD

4.26%

7.19%

1.49%

2.13%

7.08%

0.91%

7.16%

8.65%

Optimus Prime MMCT

EUR

4.24%

9.42%

0.35%

0.46%

7.77%

0.49%

1.14%

2.51%

Constant Growth IXTR

USD

4.01%

0.08%

3.2%

5.45%

1.95%

0.73%

3.41%

4.75%

Constant Growth IXTR

EUR

0.84%

5.27%

2.8%

2.5%

8.88%

0.47%

1.64%

8.55%

Constant Growth IXTR

USD

7.84%

1.46%

9.11%

3.48%

2.95%

1.12%

5.16%

5.22%

Optimus Prime MMCT

USD

0.08%

2.22%

8.52%

7.99%

7.78%

4.19%

3.98%

6.04%

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.

CustomColumnHeadersController.cs
CustomColumnHeaders.cshtml

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))); 
        } 
    } 
}

@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> 
  
} 