The Row Editing behavior is an improved WebDataGrid editing mode, designed to provide a better editing experience to the user. With Row Editing, the editable row displays all of the cell editors making it more apparent which row is editable. Also, there are Done and Cancel buttons displayed in a dialog alongside the editable row. These buttons provide better control when committing or cancelling pending edits.
By default, row editing is disabled. You can enable it from the WebDataGrid Designer, from the ASPX markup, or in the code-behind. For details, refer to the Enabling Row Editing topic.
Main Features
Main features summary chart
The following table summarizes the main features of the WebDataGrid Row Editing behavior.
Feature
Description
Edit mode for the entire row
In contrast to the Cell Editing behavior, the Row Editing behavior places the entire grid row in Edit mode. This makes it easier for the user to identify better which row is in edit mode.
Done and Cancel Buttons
These buttons appear in a dialog beneath the row in Edit mode. They are positioned relative to the right border of the grid container and maintain this position during horizontal scrolling when applicable. They provide a clear way for the user to commit or reject changes to the editable row.
Done button – commits the row value changes to the grid and ends Edit mode
Cancel button – rejects any row value changes to their state prior to Edit mode and ends Edit mode
User Interactions and Usability
User interactions summary chart
The following table summarizes the user interaction capabilities of the WebDataGrid Row Editing behavior.
The user can…
Using…
Details
Configurable?
Switch a row to Edit mode
Double-click or double tap
By default, row editing is set up to begin Edit mode on double-click or double tap.
Configurable with the Editing behavior’s EditModeActions property.
Commit the changes made to a row and exit Edit mode
Click or tap
The Done button
The Enter key
By default, when the user clicks or taps a row other than the row in Edit mode, any changes made to the row in Edit mode are committed and the row exits Edit mode.
Clicking the Done button or pressing the Enter key on the keyboard accepts any changes made to the row in Edit mode and exits Edit mode.
The clicking and tapping behavior is configurable using events. See also the Row Editing Client Events sample.
The Done and Cancel button dialog can be hidden with the Editing behavior’s EnableDialog property.
Reject the changes made to a row and exit Edit mode
The Cancel button
The Esc key
Clicking the Cancel button or pressing the Esc key on the keyboard rejects any changes made to the row in Edit mode and exits Edit mode.
The Done and Cancel button dialog can be hidden with the Editing behavior’s EnableDialog property.
Row Editing Behavior Events
Row editing behavior events reference
The row editing behavior has the following client-side events used to customize client side functionality. All of these events provide access to the cell values through the event arguments.
Event
Description
EnteringEditMode
Fires prior to a row going into Edit mode. It is cancellable.
EnteredEditMode
Fires after a row has entered edit mode.
ExitingEditMode
Fires prior to a row exiting Edit mode. It is cancellable in two ways. You can prevent the row from leaving Edit mode using eventArgs.keepEditing(true) or you can force exit Edit mode and reject changes using eventArgs.set_cancel(true).
This sample customizes the appearance of the Row Editing behavior by hiding the Done/Cancel buttons or by providing custom HTML and CSS classes for the buttons.
_1.png)
