_1.png)
This topic shows how to setup multi-column headers in the WebHierarchicalDataGrid ™ .
The following table lists the topics required as a prerequisite to understanding this topic.
This topic contains the following sections:
If you need to create multiple levels of headers or group them into categories, enabling multi-column headers provides this functionality. The GroupField object is a field that accepts other columns in its columns collection. The header of the GroupField then displays above the columns in its columns collection. The resizing, sorting, selection, filtering, and moving grid behaviors are re-designed to meet the needs of this new layout.
Web Hierarchical DataGrid bound to data.
The following table lists the aspects in which multi-column headers can be configured and maps them to the respective properties that manage them.
In this example we will define GroupField object which will group contact information fields. Then we will add two BoundDataField objects to the field’s Columns collection. These fields will hold ContactName and ContactTitle column data.
The following screenshot is a preview of the final result.
To complete the procedure, you need a WebHierarchicalDataGrid bound to the suppliers table of the Northwind sample database.
This topic takes you step-by-step toward configuring multi-column headers for WebHierarchicalDataGrid . The following is a conceptual overview of the process:
The following steps demonstrate how to configure Multi-Column headers.
A GroupField is defined like any other column. It is not bound to data but does require a key like other columns.
In ASPX:
<ig:GroupField Key="ContactInfo">
</ig:GroupField>In C#:
GroupField groupField = new GroupField();
groupField.Key = "ContactInfo";
this.WebHierarchicalDataGridView.Columns.Add(groupField);The header text is the text that is displayed for the column. Configure this on the Text property of the GridField’s Header object.
In ASPX:
<Header Text="Contact Information" />In C#:
groupField.Header.Text = "Contact Information";In order to show the child columns, add them to the Columns collection of the GroupField.
In ASPX:
<Columns>
<ig:BoundDataField DataFieldName="ContactName" Key="ContactName">
<Header Text="Contact" />
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="ContactTitle" Key="ContactTitle">
<Header Text="Title" />
</ig:BoundDataField>
</Columns>In C#:
/* Creating a BoundDataField * /
BoundDataField field = new BoundDataField();
field.DataFieldName = "ContactName";
field.Key = "ContactName";
field.Header.Text = "Contact";
/* Adding the BoundDataField to be under the GroupedField
* which was created above
*/
groupField.Columns.Add(field);
/* Creating a BoundDataField * /
field = new BoundDataField();
field.DataFieldName = "ContactTitle";
field.Key = "ContactTitle";
field.Header.Text = "Title";
/* Adding the BoundDataField to be under the GroupedField
* which was created above
*/
groupField.Columns.Add(field);The following topics provide additional information related to this topic.
The following samples provide additional information related to this topic.