How to customize the group header caption in grid
Essential Grid have option to customize the group header caption which will appear on grouping columns. We can provide our own group caption format in the GroupCaptionFormat property of the ej.Grid.locale[grid`s current locale name].
The default value of the GroupCaptionFormat property in the en-US locale is as follows.
ej.Grid.locale["en-US"] = {
GroupCaptionFormat: "{{:headerText}}: {{:key}} - {{:count}} {{if count == 1 }} item {{else}} items {{/if}} "
};
The following parameter can be used in the template to customize group caption.
Table 1: Parameters
field | Defines the field name of the column that was grouped. |
headerText | Defines the headerText value of the column that was grouped. |
key | Defines the value against which the field grouped. |
count | Defines the number of items present in the group. |
items | Defines the collection of records present in the group |
Grid initialization
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
allowGrouping: true,
groupSettings: { groupedColumns: ["CustomerID"] },
columns: [
{ field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90},
{ field: "CustomerID", headerText: "Customer ID", width: 90},
{ field: "EmployeeID", headerText: "Employee ID", width: 90, textAlign: ej.TextAlign.Right },
{ field: "Freight", headerText: "Freight", width: 90, format:"{0:C2}"}
]
});
});
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.AllowGrouping()
.GroupSettings(group=>group.GroupedColumns(columns=>columns.Add("CustomerID")))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").HeaderText("Freight").Format(“{0:C2}”).TextAlign(TextAlign.Right).Width(90).Add();
}))
ASP
<ej:Grid ID="Grid" runat="server" AllowPaging="true" AllowGrouping="true">
<GroupSettings GroupedColumns="CustomerID" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="90"/>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="90"/>
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C2}" TextAlign="Right" Width="90"/>
</Columns>
</ej:Grid>
For example, we can set the custom group caption as follows.
ej.Grid.locale["en-US"]["GroupCaptionFormat"] = "Showing records of {{:headerText}} : {{:key}}"
The result grid will be as follows.
Figure: Grid control with custom group caption
We can also use as {{:field}} in the format template to show the field name of the current grouped column in the group caption. The below will show the field name instead of the column`s header text.
ej.Grid.locale["en-US"]["GroupCaptionFormat"] = "Showing records of {{:field}} : {{:key}}"
@Note: The above grid is rendered under locale “en-US”, if the locale is specified as es-ES, then the group caption format should be provided in ej.Grid.locale[“en-ES”] object.
