Group Templates
When grouping is applied, the group rows of the Grid organize data rows into a tree structure.
For runnable examples, refer to:
- Demo on using the row template of the Grid
- Demo on using the detail-row template of the Grid
- Demo on using the toolbar template of the Grid
Group rows display group summary values and contain expanding and collapsing group icons which enable users to expand (show the child rows) and collapse (hide the child rows) a group row. The Grid provides the following templates which you can use to customize the appearance of the group rows:
-
GroupHeaderTemplate
—Renders a template for the entire group row. Usually, the main aim is to display information about the entire group. By default, if you do not define a template, the name of the field and the current group value is displayed. - (Available as of the R3 2018 release)
GroupHeaderColumnTemplate
—Renders a template in the group row aligned to the column itself. Usually, it displays an aggregate value for a specific column in the context of the current group. The template content is visually displayed as aligned to the column itself. -
GroupFooterTemplate
—Renders a template in the group footer row that is aligned to the column. Works in a similar way to thegroupHeaderColumnTemplate
for the group footer row.
If you do not define a template, the name of the field and the current group are displayed in the following way.
Figure 1: A Grid with no group templates
The only difference in the use of GroupHeaderTemplate
is that the template content is compiled and displayed instead of the field and current group value. Both GroupHeaderColumnTemplate
and GroupFooterTemplate
work in a similar way. GroupHeaderColumnTemplate
displays the content as aligned to the column in the group row. GroupFooterTemplate
displays the content as aligned to the column in the group footer row. Their content is displayed as aligned to the column as shown in the following way.
Figure 2: A Grid with defined group header and group footer templates
Because GroupHeaderTemplate
is displayed next to the expanding icon of the group row, it takes precedence over the GroupHeaderColumnTemplate
of the first visible column. To show the GroupHeaderColumnTemplate
content for the first column of the Grid, do not set the GroupHeaderTemplate
for the group column. The following Grid configuration demonstrates that commenting the GroupHeaderTemplate
for the Units In Stock column shows the GroupHeaderColumnTemplate
for the Product Name column.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitsInStock", aggregate: "min" }
]
},
aggregate: [ { field: "ProductName", aggregate: "count" },
{ field: "UnitsInStock", aggregate: "min" }]
},
columns: [
{ field: "ProductName", title: "Product Name",
aggregates: ["count"],
groupHeaderColumnTemplate: "Count: #=count#", width: 300
},
{ field: "UnitPrice", title: "Unit Price" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min"],
//groupHeaderTemplate: "Min: #= min #", width: 500
}
]
});
</script>
Figure 3: A Grid with a group header template applied to the first column and no group header template defined
KB Articles on Templates
- Editing Records in Child Grids
- Refreshing the Grid in the Detail Template
- Creating a Custom Editor in the Detail Template
- Find Out More in the Knowledge Base