Stacked Headers Demo
Essential Grid's grouping control provides built-in support for stacked multi-headers.
This feature allows you to create additional header rows that span across visible grid columns. You can group columns under each header row. It also supports
drag-and-drop operations for these header rows. Grouped columns will also be rearranged along with the header.
This sample gives you step-by-step instructions on how to achieve this feature in your application.
- As a first step, select TableDescriptor -> StackedHeaderRows in the
Properties window. This will open the GridStackedHeaderRowDescriptor
collection editor.
- Click Add, to add a stacked header row and set the
appearance properties for a new header row. Then select
the Headers property. You will see the GridStackedHeaderDescriptor
collection editor as shown in the image below.
- Click Add, to add a stacked header to this new header row. Change the
header text to Header One and set the appearance properties as needed. Then select
the
VisibleColumns property to open the GridStackedHeaderVisibleColumnDescriptor
collection editor.
- The above editor can be used to specify the VisibleColumnsCollection for a
stacked header. If the VisibleColumnsCollection of a stacked
header
is empty, then this header will be used for all columns. To add a column to
this collection, click Add and set the Name
property to OrderID. Likewise, add two more columns,
CustomerID and EmployeeID.
Now, the editor will look like the following.
- Close the above editor window. Add three more stacked headers:
StackedHeader2
with the columns order date, freight, and required date; StackedHeader3 with
the shipped date, ship via, and ship name; and
StackedHeader4 with the remaining columns.
Now the
GridStackedHeaderDescriptor collection editor looks like
this:
- Close both the editor windows.
Now, the grid grouping control appears as
given below.
- Notice that the extra headers are applied only to the top-level group
and not to the child groups. To have these stacked headers also in the child
groups, set ChildGroupOptions.ShowStackedHeaders to
true, provided that ShowColumnHeaders is also set to
true.
this.gridGroupingControl1.ChildGroupOptions.ShowColumnHeaders = true;
this.gridGroupingControl1.ChildGroupOptions.ShowStackedHeaders = true;
Here is an image showing the grid after setting the above property. Now the stacked
headers are also applied to
child groups.
- Now, run the sample to see the effect of the stacked-header rows.
Given below is an image of the sample.