16.11 Creating an Editable DataGrid

16.11 Creating an Editable DataGrid

You want to give users the ability to edit individual items within a DataGrid .

Technique

Just as with the DataList , you can allow users to edit individual items within a DataGrid . However, the DataGrid automatically generates the edit template used for each column, so you don't have to manually edit the template yourself. To create an editable DataGrid , open the Property Builder dialog for the control. Click on the Columns tab because you will be adding a new column for the user to select a row for editing. In the list of available columns , select Edit, Update, Cancel within the Button Column tree node. When you add the new column, it appears in the last column of the DataGrid . You can move the column by using the up and down arrows next to the list of selected columns.

The DataGrid now displays a LinkButton that fires an EditCommand event. Create an event handler, and within the handler, set the EditItemIndex property as shown in the following code:

 private void DataGrid1_EditCommand(object source,     System.Web.UI.WebControls.DataGridCommandEventArgs e) {     DataGrid1.EditItemIndex = e.Item.ItemIndex;     sqlDataAdapter1.Fill( productsDS1 );     DataBind(); } 

When the user clicks the edit link button and places an item into edit mode, the labels within each column appears as text boxes, allowing the user to edit the values. You can change the control used in an individual column, converting the column to a template-based column and editing the EditItemTemplate as discussed in the previous recipe.

Once the user selects the edit link button, the link button changes to an update and cancel link button. Both of these buttons correspond to the UpdateCommand and CancelCommand events, respectively. The event handler for the CancelCommand simply sets the EditItemIndex to -1 causing any editable items to be placed back into a noneditable state. The UpdateCommand event handler is called when the user clicks the update link button, and it updates a row in the database with the new values the user entered. In the previous recipe, you were able to simply get the value of the controls within the template by using the FindControl method and passing the ID of the control. However, because the controls for the DataGrid are automatically generated, there is no way of knowing the identifiers of the controls. The DataGridCommandEventArgs parameter in the event handler contains a Cells collection representing each column within the row being edited. Furthermore, because each column can potentially contain several controls, use the Controls collection to find the correct control containing the updated data. Listing 16.7 updates a DataGrid row for the Products table by accessing the individual cells and their corresponding Controls collection. Also note that each control must be cast to its correct control type.

Listing 16.7 Handling the DataGrid Update Command

 private void DataGrid1_UpdateCommand(object source,     System.Web.UI.WebControls.DataGridCommandEventArgs e) {     // stop editing and select item     DataGrid1.EditItemIndex = -1;     DataGrid1.SelectedIndex = e.Item.ItemIndex;     sqlDataAdapter1.Fill( productsDS1 );     // get the row from the database     ProductsDS.ProductsRow row = productsDS1.Products.FindByProductID (         (int)DataGrid1.DataKeys[e.Item.DataSetIndex]);     // set corresponding values from datagrid     row["ProductName"] =     ((TextBox) e.Item.Cells[2].Controls[0]).Text;     row["QuantityPerUnit"] = ((TextBox) e.Item.Cells[3].Controls[0]).Text;     row["UnitPrice"] =       ((TextBox) e.Item.Cells[4].Controls[0]).Text;     row["UnitsInStock"]=     ((TextBox) e.Item.Cells[5].Controls[0]).Text;     row["UnitsOnOrder"]=     ((TextBox) e.Item.Cells[6].Controls[0]).Text;     row["Discontinued"]=     ((CheckBox) e.Item.Cells[7].Controls[1]).Checked;     // update database and rebind     sqlDataAdapter1.Update( productsDS1 );     DataBind(); } 

Comments

By adding editing capabilities to the DataGrid control, you are able to create a full-fledged database-editing application that can be used over the Web. The final output of the DataGrid is a simple HTML table with HTML controls interspersed within each cell . All the functionality that the DataGrid represents can be used on any platform supporting the latest HTML standards, which in turn makes a DataGrid in a Web application extremely versatile.

This recipe and the last two recipes covered a lot of ground explaining the various facets of the DataGrid control. The DataGrid control was designed to take away a lot of the burden in creating and adding functionality to the control, allowing you to focus on visual appearance and database interaction. So far in this chapter, you might have noticed that the data adapter fills the dataset with most operations. For a large data table, this constant database interaction can be time-consuming , especially if the Web page is serving multiple clients at the same time. The next few recipes demonstrate how to persist objects during the timeframe of a single user session to prevent a constant data flow that rarely changes.