RadGrid for ASP.NET

Using columns Send comments on this topic.
See Also
Grid columns > Using columns

Glossary Item Box

Column elements

Header

The Header is the cell on the top of each grid column. The Header remains persistent along the pages of the grid. Header cells always appear for all grid columns.

The Header element is represented by the GridHeaderItem object. If you want to have a Header element for your columns, you need to set the ShowHeader Property to true

Then you can customize the Header appearance using the Telerik RadGrid property builder or Header Style section of the Telerik RadGrid property grid.

It can also provide some special functions as sorting if the AllowSorting Property is set to true.

Using the Header cells you can reorder columns simply by dragging and dropping them. All you need to do is set AllowColumnsReorder Property to true.

Headers also allow you to resize columns.  You will have to set AllowColumnResize Property to true. Resizing is performed client-side.

Items

Column Items are the regular data cells of the grid. Neighboring items form a single row.  

Footer 

The Footer element of a row is similar to the Header element, but it is placed at the bottom of the grid. It cannot provide header-specific functions like reordering, resizing and sorting of columns. Rather than that you can use the Footer row for showing some summary information for example.
In order to have a Footer row in your grid you need to set the ShowFooter Property to true. Then you can customize the Footer appearance using the Telerik RadGrid property builder or Footer Style section of the Telerik RadGrid property grid.

 

Formatting column values

Each column in Telerik RadGrid that displays data has a property responsible for formatting the value, using the formatting rules defined in ASP.NET.
For example, GridBoundColumn has the DataFormatString property which can be set to an expression like: {0:d} (thus it will display DateTime in its short representation format).

When using a bound column, populated with values of type System.Double, the contents with precision above 15 digits will be automatically rounded. This may produce erratic behavior, for example when filtering. A solution for this behavior is to increase the precision for the bound column, by using a DataFormatString. This is demonstrated by the code sample below:

ASPX/ASCX Copy Code
<rad:GridBoundColumn
 
DataField="Value"
 
HeaderText="Value"
 
UniqueName=" Value "
 
SortExpression="Value "
 
DataType="System.Double"
 
DataFormatString="{0:G17}">
</
rad:GridBoundColumn>



More about formatting, format strings and DateTime formatting you can find in MSDN:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpconformattingoverview.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpcondatetimeformatstrings.asp

and in the online demo of the product concerning column formatting.

Accessing values in columns

Depending on visibility and rendering properties for GridBoundColumn (Display, Visible, ReadOnly) there are different ways to access the column values. Below are the Display, Visible, and ReadOnly property references of GridBoundColumn:

  • Display concerns only the appearance the column in browser mode, client-side. The column will be rendered in the browser but all the cells will be styled with display: none. The column editor will be visible in edit mode.
  • Visible will stop column's cells from rendering in browser mode. The column will be visible in edit mode.
  • ReadOnly - the column will be displayed according to the settings of previous properties in browser mode but will not appear in the edit-form.

None of these properties can prevent you from accessing the column cells' contents server-side using the UniqueName of the column.

Sort Expressions

Telerik RadGrid supports sorting of column items elements. In order to have sorting enabled, you need to set the AllowSorting Property of the grid to true. The sort expressions are described in more detail in Sorting topic. Additionally, you can disable the sorting feature for some of the columns by setting individually their AllowSorting property to false

Group by Expressions

In Telerik RadGrid you can group the items of a single column (and all grid respectively) just like in Microsoft Outlook®.

Group-by expressions are described in greater detail in Grouping topic.

Filtering

You can enable the filtering feature by setting the AllowFilteringByColumn property of the grid to true. Each column provides an independent filter menu which allows filtering over all records in Telerik RadGrid. The filtering expressions depend on the DataType property for each column. This property is set automatically by Telerik RadGrid based on the data source for each column. By default the DataType for columns is String. Additionally, you can disable the filtering option for some of the grid columns by setting their AllowFiltering property to false. For details refer to Filtering Overview topic.

Client-side Operations

Some of the operations related to grid columns are performed client-side (without postback to the server), which significantly optimizes the grid performance. These include Resizing columns and Reordering columns operations.

If you want to have reordering and resizing functionality in your grid, you will need to have the Header element enabled.

Columns in Edit Mode

When the grid is in edit mode, it changes the appearance of the edited cells. For example, a cell in GridBoundColumn will become a text-box, which allow users to edit the data.

Column editors and ways of implementing your own custom editor are described in Editors In Grid Columns topic.

Adding Columns Programmatically

You can programmatically add columns in the code-behind by adding column objects to the GridTableView.Columns collection. However, you should take into account the differences in the runtime creation when instantiating the columns on PageInit or PageLoad (when !Page.IsPostBack):

You should never use the RenderColumns Property or AutoGeneratedColumns Property to add columns to Telerik RadGrid.

On PageInit:
C# Copy Code
GridBoundColumn boundColumn;
 boundColumn = new GridBoundColumn();
 boundColumn.UniqueName =
"CustomerID";
 boundColumn.DataField =
"CustomerID";
 boundColumn.HeaderText =
"CustomerID";
 
this.RadGrid1.MasterTableView.Columns.Add(boundColumn);
 
VB.NET Copy Code
Dim boundColumn As GridBoundColumn
  boundColumn = New GridBoundColumn()
  boundColumn.UniqueName = "CustomerID"
  boundColumn.DataField = "CustomerID"
  boundColumn.HeaderText = "CustomerID"
  Me.RadGrid1.MasterTableView.Columns.Add(boundColumn)

On PageLoad when !Page.IsPostBack:
C# Copy Code
GridBoundColumn boundColumn;
 boundColumn = new GridBoundColumn();
 
this.RadGrid1.MasterTableView.Columns.Add(boundColumn);
 boundColumn.UniqueName =
"CustomerID";
 boundColumn.DataField =
"CustomerID";
 boundColumn.HeaderText =
"CustomerID";
  
 
VB.NET Copy Code
Dim boundColumn As GridBoundColumn
  boundColumn = New GridBoundColumn()
  Me.RadGrid1.MasterTableView.Columns.Add(boundColumn)
  boundColumn.UniqueName = "CustomerID"
  boundColumn.DataField = "CustomerID"
  boundColumn.HeaderText = "CustomerID"

More info about the dynamical creation of grid columns you can find in this topic.
Note that MasterTableView and RadGrid's Columns collections are equivalent. The reason for their co-existence is the backward compatibility between the different grid versions. You can access/modify each of these collections as the result will be the same.

Customizing auto-generated columns programmatically

There are situations in which you may want to customize the DataFormatStringReadOnly or other properties of your auto-generated columns at runtime. To do that you need to hook the ColumnCreated event of the grid, cast the respective column to the appropriate type and then set the attributes of your choice. Here is a sample code which set ReadOnly mode and DataFormatString for column with UniqueName BirthDate which has DateTime DataType:

C# Copy Code
private void RadGrid1_ColumnCreated(object sender, Telerik.WebControls.GridColumnCreatedEventArgs e)
{
  
if(e.Column.UniqueName == "BirthDate")
  {
   GridBoundColumn boundColumn = e.Column
as GridBoundColumn;
   boundColumn.ReadOnly = true;
   boundColumn.DataFormatString =
"{0:d}";
  }
}
VB.NET Copy Code
Private Sub RadGrid1_ColumnCreated(sender As Object, e As Telerik.WebControls.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated
   If e.Column.UniqueName = "BirthDate" Then
      Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)
      boundColumn.ReadOnly = True
      boundColumn.DataFormatString = "{0:d}"
   End If
End Sub 'RadGrid1_ColumnCreated

Customizing declarative columns programmatically 

In order to change the settings for declarative column at runtime, you can wire the PreRender event of the grid, traverse the Columns collection to identify the column of interest and alter its properties in par with your conventions. Then rebind the grid invoking its Rebind() method to reflect the changes applied:

C# Copy Code
protected void RadGrid1_PreRender(object sender, System.EventArgs e)
{
       
foreach(GridColumn column in RadGrid1.Columns)
            
if (column.UniqueName == "BirthDate")
           {
               (column
as GridBoundColumn).ReadOnly = true;
               (column
as GridBoundColumn).DataFormatString = "{0:D}";
               
break;
           }
       }
       RadGrid1.Rebind();
}
VB.NET Copy Code
Protected Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadGrid1.PreRender
         For Each column As GridColumn In RadGrid1.Columns
             If (column.UniqueName = "BirthDate") Then
                CType(column, GridBoundColumn).ReadOnly = True
                CType(column, GridBoundColumn).DataFormatString = "{0:D}"
                 Exit For
             End If
         Next
        RadGrid1.Rebind()
End Sub

More info about the auto-generated/declarative columns collections is available in this documentation article.

See Also

Setting Templates Programmatically
Programmatic creation