DataGrid In-place Editing Walkthrough

This walkthrough demonstrates how you can configure an MM .NET Web Forms DataGrid for in-place editing. When you're finished, you will have a DataGrid that can be used to edit, update, and delete Category records in the Northwind database.

Note: We have left this topic in for backward compatibility with previous versions of MM .NET, but we highly recommend using the new GridVew control rather than the older DataGrid.

When you're finished you will have a DataGrid that looks something like this (as described below, it's easy to create a variation of this DataGrid that uses buttons rather than links):

Step 1: Creating a Sample Project

In Visual Studio, create a new MM .NET ASP .NET Web Application (either C# or VB .NET) that includes a business object project. For details, see the Help topic Creating a New Web Forms Application. Make sure you perform Step 3: Setting Up Data Access for Your New Web Application and set up the application to access the Northwind database.

Step 2: Setting up the Business Objects

In the Solution Explorer, right-click the ABusinessObject.cs or ABusinessObject.vb source code file and select View Code from the shortcut menu.

In the constructor of the ABusinessObject class, set the DatabaseKey property to "Northwind".

In C#:

public ABusinessObject()
{
	this.DatabaseKey = "Northwind";
}

And in VB .NET:

Public Sub New()
    Me.DatabaseKey = "Northwind"
End Sub

Right-click the business object project and select Add | Add Class... from the shortcut menu. In the Name box, enter Category (if you leave off the extension, Visual Studio adds the appropriate .cs or .vb extension).
At the top of the source code file, add a reference to the System.Data namespace.
In C#:
```
using System.Data;
```
And in VB .NET:
```
Imports System.Data
```

Next, specify that the Category class is derived from the ABusinessObject class, then add the following code to the constructor that sets business object properties as well as a new method called GetAllCategories that returns all categories from the Northwind database.

In C#:

public class Category : ABusinessObject
{
	public Category()
	{
		this.TableName = "Categories";
		this.PrimaryKey = "CategoryID";
	}

	public DataSet GetAllCategories()
	{
		return this.GetDataSet("SELECT * From Categories");
	}
}

In VB .NET:

Public Class Category
    Inherits ABusinessObject

    Public Sub New()
        Me.TableName = "Categories"
        Me.PrimaryKey = "CategoryID"
    End Sub


    Public Function GetAllCategories() As DataSet
        Return Me.GetDataSet("SELECT * From Categories")
    End Function

End Class

In the Solution Explorer, right-click the business object project and select Build from the shortcut menu. This builds the project so the business objects can be referenced from the Web Forms project.

Step 3: Register the Category Business Object with the Web Form

In this step you register the category business object with the form in the Form_Load method.

In the Solution Explorer, right-click the WebForm1.aspx file and select View Code from the shortcut menu.
At the top of the source code file add a reference to your business object project's namespace.
For example, in C#:
```
using OakLeaf.GridEditDemo.Business;
```
And in VB .NET:
```
Imports OakLeaf.GridEditDemo.Business
```
Near the top of the source code, beneath the grdCategories definition, add the following field declaration:
In C#:
```
protected Category oCategory;
```
And in VB .NET:
```
Protected oCategory As Category
```
This field holds a reference to the Category business object.
Now add the following code to the Form_Load method that instantiates and registers the Category business object with the Web Form. It also calls the business object's GetAllCategories method and saves the result set to the session object.
```
this.oCategory = (Category)this.RegisterBizObj(new Category());
DataSet dsCategories = this.oCategory.GetAllCategories();
Session["dsCategories"] = dsCategories;
```

Step 4: Setting up the DataGrid

Select the WebForm1.aspx file in design mode (note that this Web form must be derived from mmBusinessWebPage).
Drag and drop an MM .NET DataGrid from the Toolbox onto the Web form.
With the DataGrid selected in design mode, go to the Properties Window and change the (ID) property to grdCategories.
With the DataGrid selected, go to the Properties Window and click the Property Builder link.
In the DataGrid Properties dialog, select Columns in the list on the left:
At the top of the dialog, uncheck the Create columns automatically at run time box.
In the Available Columns list, expand the Button Column node, select the Edit, Update, Cancel item, and click the add arrow to add the column to the Selected columns list:
If you prefer buttons rather than links, change the Button Type combo box to PushButton.
In the Available Columns list, select Bound Column from the top of the list, and click the add arrow to add a bound column to the DataGrid. Set the Header Text field to "ID" and the Data Field property to "CategoryID". Check the Read only box since we don't want end users changing this value.

Tip: If you don't want a particular column to be updated, just mark it as Read Only.
Add a second Bound Column to the DataGrid, and set the following properties:
- Header text: Name
- Data Field: CategoryName
Add a third Bound Column to the DataGrid, and set the following properties:
- Header text: Description
- Data Field: Description
This time, add a Delete column located below the Buttom Column node. You don't need to set any additional properties.
Click OK to close the dialog.
If you'd like a better looking DataGrid, with the grid selected in the IDE, go to the Properties Window, expand the Font property and select a different Font. In this example, I've change the font Name to "Verdana" and Size to "Smaller":
When you're done, your DataGrid should look something like this:

Step 5: Setting up Data Binding for the DataGrid

Select the DataGrid in design mode, go to the Properties Window and select the BindingSource property.
Click the ellipses button [...] next to the property which launches the Binding Source Selection dialog:
Click the OK button to select the Category business object.

Step 6: Setting up DataGrid Event Handlers in C#

In this section, if you're using C#, you create event handlers that respond to DataGrid CancelCommand, DeleteCommand, EditCommand and UpdateCommand events. If you're using VB .NET, skip this section and go to the next.

Select the DataGrid in design mode, go to the Properties Window and click the Events button (the lightning bolt).
Double-click the CancelCommand event in the Properties Window. This adds a grdCategories_CancelCommand event handler method to the code-behind file.
Go back to the Properties Window and double-click the following events which adds an event handler method for each to the code-behind file:
- DeleteCommand
- EditCommand
- UpdateCommand

Now add the following code to each of the event handler methods:

private void grdCategories_CancelCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
	// Reset the edit index and rebind the DataGrid
	this.grdCategories.EditItemIndex = -1;
	this.BindControl(this.grdCategories);
}

private void grdCategories_DeleteCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
	// Get the row number to delete
	int RowToDelete = e.Item.ItemIndex;
	// Retrieve the previous Categories DataSet
	DataSet dsCategories = (DataSet)Session["dsCategories"];
	// Tell the business object to delete the specified row
	this.oCategory.Delete(dsCategories, RowToDelete);
	// Rebind the DataGrid
	this.BindControl(this.grdCategories);
}

private void grdCategories_EditCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
	// Set the current edit item to the selected item and rebind the DataGrid
	this.grdCategories.EditItemIndex = e.Item.ItemIndex;
	this.BindControl(grdCategories);
}

private void grdCategories_UpdateCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
	// Get the item to be updated
	this.grdCategories.EditItemIndex = e.Item.ItemIndex;
	// Retrieve the previous Categories DataSet
	DataSet dsCategories = (DataSet)Session["dsCategories"];
	// Save the DataSet (the DataGrid automatically binds back)
	this.oCategory.SaveDataSet(dsCategories);
	// Reset the edited item and rebind the DataGrid
	this.grdCategories.EditItemIndex = -1;
	this.BindControl(grdCategories);
}

Step 6: Setting up DataGrid Event Handlers in VB .NET

In this section, if you're using VB .NET, you create event handlers that respond to DataGrid CancelCommand, DeleteCommand, EditCommand and UpdateCommand events.

In the Solution Explorer, right-click the WebForm1.aspx file and select View Code from the shortcut menu.
In the combo box at the top left of the code-editing window, select grdCategories.
In the combo box at the top right of the code-editing window, select CancelCommand. This adds a grdCategories_CancelCommand event handler method to the code-behind file.
Go back to the combo box at the top left of the code-editing window and select grdCategories, then go to the combo box to the right of the code-editing window and select the following events which adds an event handler method for each to the code-behind file:
- DeleteCommand
- EditCommand
- UpdateCommand

Now add the following code to each of the event handler methods:

Private Sub grdCategories_CancelCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles grdCategories.CancelCommand
    ' Reset the edit index and rebind the DataGrid
    Me.grdCategories.EditItemIndex = -1
    Me.BindControl(Me.grdCategories)
End Sub

Private Sub grdCategories_DeleteCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles grdCategories.DeleteCommand
   ' Get the row number to delete
    Dim RowToDelete As Integer = e.Item.ItemIndex
    ' Retrieve the previous Categories DataSet
    Dim dsCategories As DataSet = CType(Session("dsCategories"), DataSet)
   ' Tell the business object to delete the specified row
    Me.oCategory.Delete(dsCategories, RowToDelete)
    ' Rebind the DataGrid
    Me.BindControl(Me.grdCategories)
End Sub

Private Sub grdCategories_EditCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles grdCategories.EditCommand
    ' Set the current edit item to the selected item and rebind the DataGrid
    Me.grdCategories.EditItemIndex = e.Item.ItemIndex
    Me.BindControl(grdCategories)
End Sub

Private Sub grdCategories_UpdateCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles grdCategories.UpdateCommand
    ' Get the item to be updated
    Me.grdCategories.EditItemIndex = e.Item.ItemIndex
    ' Retrieve the previous Categories DataSet
    Dim dsCategories As DataSet = CType(Session("dsCategories"), DataSet)
    ' Save the DataSet (the DataGrid automatically binds back)
    Me.oCategory.SaveDataSet(dsCategories)
    ' Reset the edited item and rebind the DataGrid
    Me.grdCategories.EditItemIndex = -1
    Me.BindControl(grdCategories)
End Sub

Running the Sample

Now you're ready to run the sample. To do this, you can just press F5, which builds and runs the sample. This should produce a DataGrid that looks like the image at the top of this Help topic.

When you click the Edit link, the Update and Cancel links appear and you can edit columns directly in the DataGrid.
If you click the Update link, changes are submitted to the back end, and the DataGrid redisplays with the new data. In addition, the Update and Cancel links disappear and the Edit link reappears.
If you click the Cancel link, the Update and Cancel links disappear, and the Edit link reappears.
If you click the Delete link, the associated record is deleted and the DataGrid redisplays without the deleted row.