RadGrid for ASP.NET

Telerik RadGrid currently supports two main sets of columns, in accordance with how they are generated:  

• Automatically generated columns - if the  AutoGenerateColumns property is set to true (default value) Telerik RadGrid will add at runtime all columns for each field from the specified DataSource after DataBinding.  This set of columns can be accessed using the AutoGeneratedColumns collection.  
  

  Runtime auto generated columns will always appear after the user-specified columns, unless the columns are ordered programmatically.

• User-specified columns - these columns are created by the developer using the designer or by modifying the Columns collection at runtime. This is known as column binding:
    

  ASPX/ASCX	Copy Code
  <Columns>  <rad:GridBoundColumn DataField="UnitPrice" SortExpression="UnitPrice" HeaderText="Unit Price"></rad:GridBoundColumn>  <rad:GridBoundColumn DataField="Quantity" SortExpression="Quantity" HeaderText="Quantity"></rad:GridBoundColumn>  <rad:GridBoundColumn DataField="Discount" SortExpression="Discount" HeaderText="Discount"></rad:GridBoundColumn> </Columns>

  The default columns appearance order (runtime rendering) is the same as the order in which they are declared.
  In order to avoid columns doubling, we suggest setting AutoGenerateColumns property to false when working with user-specified columns.

Column Types

Different column types determine the behavior of the columns in the control. Different columns support different editors, different filtering options, etc.

Each Telerik RadGrid table has a Columns Collection accessible programmatically at runtime. Below is a list of all supported types of columns:

GridBoundColumn

GridBoundColumn is the default column type of Telerik RadGrid. It displays a column bound to a field in a data source. The default data binding (when AutoGenerateColumns property is set to true) generates GridBoundColumn type of columns. It displays each item from the DataSource field as text. This column is editable (implements the IGridEditableColumn interface) and provides by default GridTextColumnEditor, used for editing the text in each item.

GridBoundColumn has three similar and yet different properties controlling its visibility and rendering in a browser in regular and in edit mode:

• Display - concerns only the appearance of 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 the column 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' content server-side using the UniqueName of the column.

   

GridButtonColumn

GridButtonColumn displays a button for each item in the column. This button can then perform some command. This, in combination with the event bubbling mechanism in Telerik RadGrid, allows you to create a column of custom button controls, such as Add, Remove, Select or Edit buttons.

The available buttons types  are: PushButton, LinkButton and ImageButton. Telerik RadGrid comes with two types of button columns:

• Select - when a button in this column is pressed, it will select the whole row. The Select column below uses a PushButton.
• Remove selection - when a button in this column is pressed, it will remove the row selection. The Remove selection column below uses a LinkButton.
  
  

GridEditCommandColumn  

Initially only the [Edit] button is shown. When it is pressed, the [Update] and [Cancel] appear at its place and the cells on this row become editable. The Edit button below uses a LinkButton.



After clicking the [Edit] button, the column changes to:

GridEditCommandColumn can use also images as edit/update/cancel buttons:

GridHyperlinkColumn

Each row in a Hyperlink column will contain a predefined hyperlink. This link is not the same for the whole column and can be defined for each row individually. The content of the column can be bound to a field in a data source or to a static text. You can customize the look of the links by using CSS classes.

You can set multiple fields to a GridHyperlinkColumn through its DataNavigateUrlFields property. These fields can later be used when setting the DataNavigateUrlFormatString property and be part of a query string:

ASPX/ASCX	Copy Code
<rad:GridHyperLinkColumn     DataNavigateUrlFields= "ProductID,OrderID"     DataNavigateUrlFormatString= "~/Details.aspx?ProductID={0}&OrderID={1}"> </rad:GridHyperLinkColumn>

GridCheckBoxColumn

Displays a CheckBox control for each item in the column. This allows you to edit for example Boolean field(s) from data table(s). This column is editable (implements the IGridEditableColumn interface) and provides by default GridBoolColumnEditor, used for editing the text in each item. You can persist the checked state of a checkbox, if you use it within GridTemplateColumn (see below).   

GridClientSelectColumn

Displays a Checkbox control for each item in the column. This allows you to select grid rows client-side automatically when you change the status of the checkbox to checked. Additionally, if you choose AllowMultiRowSelection = true for the grid, a checkbox will be displayed in the column header to toggle the checked/selected stated of the rows simultaneously (according to the state of that checkbox in the header).

To enable this feature you need to turn on the client selection of the grid (ClientSettings -> Selecting -> AllowRowSelect = true).

GridDropDownColumn

Displays a DropDown control for each item in the column. This allows you to edit for example lookup field(s) from data table(s). This column is editable (implements the IGridEditableColumn interface) and provides by default GridDropDownColumnEditor, used for editing the text in each item.

Similarities and Differences between GridDropDownColumn and GridTemplateColumn with DropDownList in EditItemTemplate:

GridDropDownColumn and GridTemplateColumn with DropDownList in its EditItemTemplate are quite similar, yet there are two major differences which distinct them from each other:

GridTemplateColumn

Displays each item in the column in accordance with a specified template. This allows you to provide custom controls in the column. You can view and set templates using the Edit Template command in Visual Studio .NET. You can create the template columns programmatically and bind the controls in the code-behind. Click here for details.)

Click to enlarge

This will open the template editor, where you can set the template as common HTML. The template editor allows you to set header and footer for the template as well as a different view for this template when it is in edit mode.

Similarities/Differences between GridCheckBoxColumn and GridTemplateColumn with checkbox

GridCheckBoxColumn and GridTemplateColumn with checkbox in ItemTempate/EditItemTemplate are very similar. However, there are three major differences which distinct them from each other:

	GridCheckBoxColumn	GridTemplateColumn
1.	GridCheckBoxColumn can be bound directly to a boolean field in the grid data source (setting the DataField property of that column). ASPX/ASCX Copy Code <rad:GridCheckBoxColumn  FooterText="CheckBoxColumn footer"  UniqueName="Bool"  HeaderText="CheckBox<br/>Column"  DataField="Bool"> Here is the online example which holds the code extraction above:	In order to bind the checkbox inside GridTemplateColumn you should use binding expressions for its Checked property: ASPX/ASCX Copy Code <rad:GridTemplateColumn HeaderText="Check/UnCheck"      UniqueName="TemplateColumn">   <EditItemTemplate>     <asp:CheckBox id="editChkBox" runat="server"      Checked='<%# Bind("Bool") %>'>     </asp:CheckBox>   </EditItemTemplate>   <ItemTemplate>      <asp:CheckBox id="defaultChkBox" runat="server"      Checked='<%# Eval("Bool") %>'>    </asp:CheckBox>   </ItemTemplate> </rad:GridTemplateColumn>
2.	The checkbox in GridCheckBoxColumn will be disabled in regular mode. It will be editable in edit and insert mode of grid row.	The checked state of checkbox in EditItemTemplate of GridTemplateColumn can be changed in edit/insert mode of grid item. The checkbox control inside ItemTemplate of GridTemplateColumn can be checked/unchecked in regular mode.
3.	For GridCheckBoxColumn Telerik RadGrid will create auto-generated GridCheckBoxColumnEditor which can be used to access data on update/insert.	For GridTemplateColumn you will not have auto-generated editor from checkbox control type but GridTemplateColumnEditor.

Structure Columns

All columns, which are added by Telerik RadGrid automatically to facilitate some functionality are called Structure Columns. They fall in three categories:

GridExpandColumn

This column appears when the grid has a hierarchical structure, to facilitate the expand/collapse functionality. The expand column is always placed in front of all other grid content columns (unless the grouping is enabled - then this column is after GridGroupSplitterColumn) and can not be moved.

You can also manually add other instances of this type of column (the last column  in the first DetailTable on the example below)

GridGroupSplitterColumn

This column appears when grouping is enabled, to facilitate the expand/collapse functionality. The group splitter column is always placed first and can not be moved.

GridRowIndicatorColumn

This column facilitates row resizing. When you move the cursor to an item in this column, it changes to an arrow and you can resize the respective row. The RowIndicatorColumn controls the row resizing capabilities of RadGrid and can not be removed when row resizing is turned on.

© 2002-2008 Telerik. All Rights Reserved.