GridView Column Header |UI Control for ASP.NET AJAX, C#, VB.NET

GridView Column Header in ASP.NET AJAX

Home > How to > Grid Columns Headers

The column header, located at the top of each asp.net grid column. It keeps the location and content when the grid items changed. The header always appear for all gird columns by default, if you want not, you can set the ShowHeader property to Flase.

Header Context Menu

For easy and simple operate the web grid data, we provide some commonly used functionalities in the header context menu:

Sort: you can sort the column data in ascending or descending order, and also can cancel the sort and make the data in original order.
Group: you can group or ungroup the column data.
Column Visible: under the Column option, you can change the state of each checkbox with column name to determine this column is show or hide.
Filter: you can filter column data on tow conditions related with a logical AND operator.

If you want, you can set the EnableHeaderContextMenu property to True to enable this header context menu. Further more, the context menu options can be customized by yourself. If you want not to use the Sort functionality, set AllowSort to False, so that the Sort option will be hidden.

Multi-column Headers

Multi-column header is a group of common column header. The common header can be the child of a multi-column header. Multi-column headers can span several common headers and columns.

Structure rules

A common column header must be a single column with "ColSpan=1".
A multi-column header must span at least one column.
Each level of a multi-column header must be a single row header.
A common column can only have one parent of multi-column header.
A multi-column header can only have one parent of other multi-column header.

Example

In order to demonstrate to you more clearly, we define a new multi-column in the below code. And you can see to renderings for confrontation.


<ColumnGroups>
<kettic:GridColumnGroup HeaderText="Product Details" Name="ProductDetails"/>
<kettic:GridColumnGroup HeaderText="Location" Name="Location"/>
<kettic:GridColumnGroup HeaderText="Category" Name="Category" ParentGroupName="ProductDetails"/>
<kettic:GridColumnGroup HeaderText="Order Details" Name="OrderDetails" ParentGroupName="ProductDetails"/>
</ColumnGroups>