Version

Enabling Row Deleting (WebDataGrid)

Before You Begin

To delete data in WebDataGrid™, add the RowDeleting behavior to the Behaviors collection. This behavior allows your end-users to delete rows in WebDataGrid. You also need the Selection behavior enabled for deleting to function in the UI. When enabling RowDeleting in the designer you will be prompted to add the Selection behavior as well.

A row can be deleted by selecting the row and pressing the delete key.

Note
Note:

WebDataGrid commits row deleting operations immediately; a row delete causes an immediate postback, persisting the change to the data source.

Note
Note:

You must have a supported data source for this type of automatic update to occur. For a list of data sources that can take advantage of this feature, see Supported Data Sources. If your data source cannot be automatically updated by WebDataGrid, you must handle the update events and update the data manually.

What You Will Accomplish

You will allow row deletion in the WebDataGrid control.

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 Deleting from the list on the left to add and enable the behavior. You are prompted to add Selection as well.

  5. Click Yes to confirm the prompt. The Selection and RowSelectors behaviors are added to WebDataGrid.

  6. Click Apply then Ok.

  7. Check that EnableAjax is True in the property window of WebDataGrid. If not, set it to True. Now when you select a row in WebDataGrid and press DELETE, the row is deleted from the control as well as the underlying data source.

You can also delete a row programmatically on the client

In JavaScript:

 // remove first row
grid.get_rows().remove(grid.get_rows().get_row(0));