ComponentOne GridView for ASP.NET AJAX: GridView for ASP.NET AJAX Task-Based Help > Formatting the Grid's Content > Creating Column Header Bands

Creating Column Header Bands

This topic demonstrates how to create multi-column headers using C1Band at design time and programmatically.

In the Designer

Complete the following steps:

1.   Right-click the C1GridView control and then click Show Smart Tag. In the C1GridView Tasks menu, click Property builder. The C1GridView Properties window appears.

2.   Select the Columns tab and uncheck the Create columns automatically at run time check box if it is checked.

3.   Choose the Band column from the list of Available columns.

4.   Click the arrow button between the column lists to move a Band column to the list of Selected columns.

5.   Select the new Band column and enter some text in the HeaderText property. In this example, we entered "Products" in the HeaderText property.

6.   To place the band above the ProductID and ProductName columns, select the Band column and click the Up arrow to place it at the top of the list of Selected columns.

7.   Select the ProductID column and click the Up arrow until it appears on a level within the Band column. Do the same for the ProductName column.

 

 

8.   Click OK.

In Code

Add the following code to the Page_Load event to add dynamic band headers:

      Visual Basic

' Disable the automatic creation of C1BoundField objects.

Me.C1GridView1.AutoGenerateColumns = False

 

' Create the Band column.

Dim band As New C1.Web.UI.Controls.C1GridView.C1Band

 

' Set the header text to Products.

band.HeaderText = "Products"

 

' Add the ProductID column to the Band column.

Dim col As New C1.Web.UI.Controls.C1GridView.C1BoundField

col.HeaderText = "ProductID"

col.DataField = "ProductID"

band.Columns.Add(col)

 

' Add the ProductName column to the Band column.

col = New C1.Web.UI.Controls.C1GridView.C1BoundField

col.HeaderText = "ProductName"

col.DataField = "ProductName"

band.Columns.Add(col)

 

' Remove the existing ProductID and ProductName columns in the grid.

Me.C1GridView1.Columns.RemoveAt(0)

Me.C1GridView1.Columns.RemoveAt(0)

 

' Insert the Band column in the grid.

Me.C1GridView1.Columns.Insert(0, band)

      C#

// Disable the automatic creation of C1BoundField objects.

C1GridView1.AutoGenerateColumns = false;

 

// Create the Band column.

C1Band band = new C1Band();

 

// Set the header text to Products.

band.HeaderText = "Products";

 

// Add the ProductID column to the Band column.

C1BoundField col = new C1BoundField();

col.HeaderText = col.DataField = "ProductID";

band.Columns.Add(col);

 

// Add the ProductName column to the Band column.

col = new C1BoundField();

col.HeaderText = col.DataField = "ProductName";

band.Columns.Add(col);

 

// Remove the existing ProductID and ProductName columns in the grid.

this.C1GridView1.Columns.RemoveAt(0);

this.C1GridView1.Columns.RemoveAt(0);

 

// Insert the Band column in the grid.

this.C1GridView1.Columns.Insert(0, band);

 What You've Accomplished

When you run the project, the ProductID and ProductName columns appear under the Products Band column.

 


Send comments about this topic to ComponentOne.
Copyright © ComponentOne LLC. All rights reserved.