WebDataGrid (WDG) has the capability to update the DataSource automatically if AutoGRUD property of EditingCore is set to true. What is “Manual CRUD”? This is a technique used by developers to persist all changes made in the grid UI to the DataSource by their own custom code. In this article I will go through the steps required to get WDG involved in Manual Crud scenario. I will demonstrate the setup of each behavior needed in order to make this happen. I will show how to use Editor Providers with AddNew Row feature also.
The article assumes you are familiar with WebDataGrid component. If you are not, consider the starting point at this link.
If you intend to work with the article you will need the following:
- Visual Studio 2010/2008
- NetAdvanage for ASP.NET 11.2
- Create new empty website in Visual Studio
- Setup your DataSource( in this step you can download the sample from the end of the article and copy App_Folder from the sample into your project)
- Create an Entity “Employee” and add the XMLParser class
- Drag WebDataGrid component form the toolbox onto the page
- Setup grid’s columns
- Setup RowAdding Behavior
- Setup RowDeleting Behavior
- Setup RowEditTemplate
- Handle CRUD operations on the server
- Open Visual Studio and create empty ASP.NET WebSite.
- Setup your DataSource. In this step I’ve created two classes, the first one is called “Employee” and the second one is XMLParser static class. The second is used as a bridge between underling DataSource, which is simply xml file, and WDG.
The employee class definition:
The XMLParser class definition:
Here is the definition of the XML file used as a persistent store:
3. In this step drag the WDG from the Visual Studio toolbox on the page. If the controls are not in your toolbox even after you have installed them, here is a link which explains how to add the controls to the toolbox.
5. In this step we will setup the WDG’s columns. Note that we set AutoGenerateColumns property to false, which means that over the data binding stage the grid will try to match the properties of the Entity from the DataSource that it is bound to, in our case “Employee” class. The key for each BoundDataField must match the property from the Employee class.
6. In this step we will setup RowAdding Behavior (Feature) of the grid. This behavior allows the developer to add new rows to the WDG and persist them later when they are posted to the server either via full or ajax (partial) postback. The setup looks like this:
As you might have already noticed in ColumnSettings tag I’ve specified Editor providers for few of the columns. The editor providers allow developers to edit a particular column through a given control. In our case the “Level” column is edited by DropDownEditor Provider. You easily can spot how the association is done through ColumnKey and EditorID. If you are wondering how the setup of the DropDownProvider is implemented, here is the answer:
As a result of the completed setup above, the grid will allow adding new employees to our DataSource using EditorProviders. Here is the result:
7. In this step we will setup RowDeleting Behavior. Similar to the RowAdding Behavior, it allows adding new rows to the WDG, the RowDeleting feature gives us the possibility to delete rows from the grid..
Is it so simple? Yes it is, in order to enable this feature we need to add the above line of code to the Behaviors tag. To see this feature in action you may select grid row and press the Delete button from the keyboard. The row will be deleted from the UI and post will be issued to the server. Alex Kartavov blogged about “Confirm WebDataGrid Row Deletion with Message Box” while ago. It is considered to be a good practice prior to deletion of any rows from the grid to prompt the user to confirm the action.
8. RowEditTemplate is a great feature of the grid that allows developers to edit the grid easily. All you need to get it working is to go to the smart tag of the control and select Behaviors, then enable the RowEditingTemplate and click apply.
Once you’ve enabled RET(RowEditTemplate) you can double click on the row selector for a particular row and experience it.
9. Here I will show you how the server operations are handled and data are saved into the data store which is XML file in our case. I will go in details only for RowAdding handler. The code looks like this:
In this handler I update the xml file with the newly added record.
Hope you enjoy it !