Table of Contents
Table of Contents
Defining Grid Columns

Overview

The first step of using an EO.Web Grid is to define grid columns. This section covers the following topics:

Defining Grid Columns

Defining Column Templates

Column Types

Data Binding

Defining Grid Columns

To define grid columns, use one of the following methods:

  • Click the button next to the Columns in the property window, or
  • Right click the Grid, then select "Edit Columns...", or
  • Right click the Grid, then select "Edit Grid...", then click the New Column toolbar button in the Grid tab;

Defining Column Templates

In addition to the Columns collection, the grid also maintains ColumnTemplates collection. This collection contains GridColumn objects that can be used as template of grid columns in the Columns collection. These templates are used to specify appearance related settings. For example, if one wants all TextBoxColumns in a grid to use a textbox with black borders when editing cell data, he/she can define a TextBoxColumn in the grid's ColumnTemplates collection and sets TextBoxStyle to include black border settings on that column. At runtime, unless overridden on the target column, all TextBoxColumns in the grid will inherits this setting.

Column Types

EO.Web Grid supports the following column types:

Column Type Remarks
RowNumberColumn RowNumberColumn always displays the current row number. It can not be edited. RowNumberColumn is usually the first column in the grid and typically used together with FixedColumnCount so that the RowNumberColumn is displayed as a fixed column. Usually FixedColumnCellStyle is also used to specify a different style for cells in this column.
StaticColumn StaticColumn represents a static read only text column. Its text is either derived from the data source or a fixed text set through its Text property.
TextBoxColumn TextBoxColumn acts like a StaticColumn when the cell is not in edit mode. In edit mode, it displays a text box for user to edit cell data.
ButtonColumn

ButtonColumn displays a push button or link button in the column. When clicked, it calls ClientSideOnItemCommand handler if one is supplied. Otherwise it triggers server side ItemCommand event if the grid is running in server or callback mode.

You can also call raiseItemCommandEvent inside ClientSideOnItemCommand event handler to explicitly pass the event to the server side to raise ItemCommand server side event.

CheckBoxColumn CheckBoxColumn displays a check box. The check box can be checked/unchecked any time, even if the row is not in edit mode. A list of checked rows can be acquired via CheckedItems on the server side.
EditCommandColumn

EditCommandColumn is similar to the standard ASP.NET EditCommandColumn. It displays an "Edit" link button when the row is not in edit mode, and displays an "Update" and "Cancel" link button when the row is in edit mode. However, unlike the standard ASP.NET EditCommandColumn that triggers server side event, all actions for EditCommandColumn are automatically handled by the Grid on the client side.

All changes are logged and then posted back to the server side when the page posts back, at which point you can either handle ItemChanged event or use ChangedItems property to get a list of all changed items in order to save the changes back into your data source.

DeleteCommandColumn

DeleteCommandColumn displays a "Delete" link button. When clicked, EO.Web Grid deletes the current row without posting back to the server. All delete actions are logged on the client side. When the page posts back, ItemDeleted server side event is fired based on the logs so that your code can update the data source.

All deleted items can also be accessed through DeletedItems property.

MaskedEditColumn

MaskedEditColumn acts like a StaticColumn when the cell is not in edit mode. When in edit mode, it displays a MaskedEdit text box for you to edit the cell.

Note: Using MaskedEditColumn requires a license for the MaskedEdit control.
DateTimeColumn DateTimeColumn acts like a StaticColumn when the cell is not in edit mode. When in edit mode, it displays a DatePicker for you to edit the cell.

Note: Using DateTimeColumn requires a license for the Calendar control.
CustomColumn CustomColumn allows you to customize the displaying and editing in a column. See here for more details about how to use custom columns.

Data Binding

All grid columns inherit from GridColumn, which supports DataField property. The property is used to automatically populate the value of the specified field to column cells. Several columns, including RowNumberColumn, EditCommandColumn and DeleteCommandColumn, do not need source data so DataField is ignored on these columns.