Version

Enabling Row Editing Template

Before You Begin

To supply the end-user with a custom template for data editing in WebDataGrid™, enable the Row Editing Template behavior. The template allows the end-user to edit a row’s data through a pop-up that can contain any controls. Changes that occur in the template are applied back to the data source.

What You Will Accomplish

You will set up the Row Editing Template for data editing in WebDataGrid.

Follow these Steps

  1. Bind WebDataGrid to a SqlDataSource component retrieving data from the Customers table. For more information on doing this, see Getting Started with WebDataGrid.

  2. In the Microsoft® Visual Studio™ property window, Set the DataKeyFields property to CustomerID so that changes in WebDataGrid can be updated to the data source.

  3. In the same window, locate the Behaviors property and click the ellipsis (…​) button to launch the Behaviors Editor Dialog.

  4. Check the CheckBox next to Row Editing Template from the list on the left to add and enable the behavior. Notice the EditingCore behavior is added as well.

  5. In the properties for Row Editing Template, set the actions that will pop up the template.

    1. Expand EditModeActions and set RowSelectorMouseClick to None. Since we do not have row selectors at this point, we do not need this action enabled.

    2. Set MouseClick to Double. This will bring up the template when the end-user double-clicks on a cell in WebDataGrid.

Note
Note:

If you want updates to persist immediately after you edit a row, you need to enable the Activation behavior as well as handle the RowUpdating server-side event of WebDataGrid. For more information on data editing in WebDataGrid, see Editing.

WebDataGrid Enabling Row Editing Template 01.png
  1. Click Apply then Ok.

  2. Right-click WebDataGrid. Highlight Edit Template from the context menu and select Row Editing Template. A prompt to populate the template with default controls appears.

Note
Note:

If you are using more than one behavior template, you will see Behavior Templates as a selection in the Edit Template submenu.

  1. Click Ok to automatically populate the template.

Note
Note:

You can also cancel the prompt and add controls yourself; However, this will require manual binding of the controls in the template to fields in WebDataGrid. For more information on this, see Binding Controls in Row Edit Template.

  1. Right-click the template view and select End Template Editing. You are returned to the normal grid view in the designer.

  2. Run the application. You can double-click on a cell of WebDataGrid to bring up the Row Editing Template for that row. Click Ok to commit changes from the template back to WebDataGrid’s cells.

WebDataGrid Enabling Row Editing Template 02.png