Kendo UI for jQuery R2 2020 SP1 trial version download
Kendo UI currently provides four controls: Kendo UI for jQuery , Kendo UI for Angular , Kendo UI Support for React and Kendo UI Support for Vue . Kendo UI for jQuery is the most complete UI library for creating modern web applications.
Group template
When applying grouping, the grouping rows of the Grid organize the data rows into a tree structure.
For a working example, see:
- 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
The group row displays the group summary value and contains expand and collapse group icons that allow users to expand (show subrows) and collapse (hide subrows) group rows. Grid provides the following templates, which can be used to customize the appearance of group rows:
- GroupHeaderTemplate -Render a template for the entire group row. Usually the main purpose is to display information about the entire group. By default, if you do not define a template, the field name and current group value will be displayed.
- GroupHeaderColumnTemplate -Render the template in a group row aligned with the row itself. Usually it displays the total value of a specific column in the context of the current group, and the template content is visually displayed as aligned with the column itself.
- GroupFooterTemplate -Render the template in the group footer row aligned with this column, similar to the groupHeaderColumnTemplate of the group footer row.
If no template is defined, the field name and current group are displayed in the following manner.
Figure 1: Grid without group templates
The only difference in using GroupHeaderTemplate is that the template content is compiled and displayed, not the value of the field and the current group. GroupHeaderColumnTemplate and GroupFooterTemplate work similarly.
The GroupHeaderColumnTemplate displays the content as aligned with the columns in the group row. The GroupFooterTemplate displays the content as aligned with the columns in the group footer row. Their contents are displayed aligned with the columns, as shown below.
Figure 2: Grid with defined header and foot templates
Because the GroupHeaderTemplate is displayed next to the expansion icon of the group row, it takes precedence over the GroupHeaderColumnTemplate of the first visible column. To display the contents of the GroupHeaderColumnTemplate of the first column of the Grid, please do not set the GroupHeaderTemplate for the group column. The following grid configuration demonstrates annotating the GroupHeaderTemplate of the Units In Stock column, and the GroupHeaderColumnTemplate of the Product Name column will be displayed.
<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>
For the latest news about Kendo UI, please follow Telerik Chinese website!