Overview

Editing support is completely built-in and done on the client side. Editing can be row based or cell based. When user completed editing a row or a cell, the changes are not immediately submitted to the server. Instead they are logged and submitted to the server when the page posts back.

Editable Columns

User can only edit editable columns. Of all the columns, TextBoxColumn, CheckBoxColumn, MaskedEditColumn, DateTimeColumn and CustomColumn are editable.

Entering Edit Mode

When FullRowMode is set to true, an EditCommandColumn is needed to be able to place an item into edit mode. When the Edit link button is clicked, every editable cell in the row is placed into edit mode, user can then edit cells in the row and click Update to save the result.

When FullRowMode is set to false, clicking an editable cell automatically places the cell into edit mode. The change is automatically saved when input focus leaves that cell.

Editing UI elements can be fully customized on the corresponding GridColumn object. For example, you can edit the DatePicker property of a DateTimeColumn to customize the date picker control used by the column.

CustomColumn supports both custom displaying and editing. For more details about how to use a CustomColumn, see here.

All changes are logged on the client side first and then transferred to the server side when the page posts back. On the server side, you can either handle ItemChanged event or use ChangedItems to get a list of all changed items and update your data source accordingly. Usually you should repopulate the Grid once you finished updating your data source since the data source has changed.

Appending New Rows

If AllowNewItem is set to true, an empty row will be displayed after the last row. User will then be able to edit this row, and when the changes are submitted, this rows becomes a regular row a new empty row is added.

All new items are logged on the client side first and then transferred to the server side when the page posts back. On the server side, you can either handle ItemAdded event or use AddedItems to get a list of all added items and update your data source accordingly. Usually you should repopulate the Grid once you finished updating your data source since the data source has changed.

Delete Rows

DeleteCommandColumn can be used for user to delete a row. When user deletes a row, the row is immediately removed from the screen, but the page does not posts back, nor has the item been really deleted. Instead the item is being marked as deleted and the delete action is logged. When the page posts back, you can either handle ItemDeleted event or use DeletedItems to get a list of deleted items and update your data source accordingly.

Usually you should repopulate the Grid once you finished updating your data source since the data source has changed.

Data Key Field

EO.Web Grid supports KeyField property. When this property is set, value of the KeyField will be stored in each GridItem's Key property and persisted across post backs. This makes it particular useful for item update and delete event handling code.

Server Side Events/Properties

All changes are first logged on the client side and then transferred to the server side when the page posts back. The following server events are used together with editing:

You should rely on these properties/events to update your data source accordingly. You would usually use Key to locate the record needs to be updated and Cells to retrieve the new cell data.

Column Data Type

When a cell is populated from the data source, it retains its original data type. However, the data type can change after user edits the cell. For example, one can use a TextBoxColumn to edit a cell with numeric values. Once the cell is edited, a string value will be stored unless GridColumn.DataType has been explicitly set. It's important to understand this difference when retrieving cell data on the server side.