| When you click the Edit link for a row, by default, the DataGrid control provides editing controls for all the columns within the control that can be edited. As you can see in Figure 17.5, hyperlink values can't be edited. You've seen how to add a detail page and link to that page in order to edit all the columns within a row. What if you'd like to be able to view the ProductName field as a link, but when editing a row, be able to edit the ProductName field on the grid? By default, that's not possible. The DataGrid control allows you to replace the layout of any column with your own content. That is, you can supply the exact layout information for the content you'd like in the header and footer for the column as well as the standard display and editing display for the column. You could add any control (or controls) to be used in the standard display (this is how you might add a DropDownList as a control within a DataGrid control, for example) and perhaps a different control when editing the column. In this example, to add editing support for a Hyperlink column, you'll need to first convert the column to a Template column (that's the type of column that allows you to supply the layout information). Then, you'll need to lay out the edit template and the item template. Finally, you'll need to set up the data binding so that the correct information will display within both controls, and you'll need to modify the grdProducts_UpdateCommand procedure so that it retrieves the value from the correct control within the cell when it's time to save the changes. Setting Up the Template Column To add the template column, follow these steps: -
Open ProductsEdit.aspx in the Visual Studio .NET page designer. -
Right-click the DataGrid control and select Property Builder from the context menu. -
Select the Columns tab. -
Select the Product Description entry in the Selected Columns list. -
At the bottom of the dialog box, click Convert This Column into a Template Column. (Once you do, several options on the page disappear.) Click OK to dismiss the dialog box. -
Right-click the DataGrid control again, and this time select from the context menu Edit Template, Columns[3] Product Description. -
At this point, you'll see a template editor, like the one shown in Figure 17.6. (The figure contains the finished template you haven't added the text box yet.) Figure 17.6. After creating your template column, you'll have both a hyperlink and a text box.
-
Select the HyperLink control that's already been added to the ItemTemplate section. Set the ID property for the control to hypProductDetails. -
From the Toolbox window, drag a TextBox control into the EditItemTemplate section of the designer. -
Set the new TextBox's ID property to txtProductDetails. At this point, your templates should look just like Figure 17.6. At this point, you've created the content that will display for the normal rows (the HyperLink control) and the content that will display when editing (the TextBox control). The final issue to handle is the data binding. By default, when you converted the column into a Template column, Visual Studio .NET handled the data binding for the HyperLink control, because that control was already on the grid. For the TextBox control, however, you'll need to do the work yourself. Follow these steps to add data binding to the TextBox control: -
In the template designer, select the HyperLink control hypProductDetails. -
In the Properties window, scroll to the top and select the DataBindings property. -
At the right of the window, click the … button to bring up the hypProductDetails DataBindings dialog box. -
In the Bindable Properties list, select the Text property. -
In the Custom Binding Expression box, select the entire contents and then press Ctrl+C to copy the contents to the Windows Clipboard. Click OK to dismiss the dialog box without modifying anything. TIP The declarative binding for the HyperLink control uses a DataBinder object and its Eval method to perform the binding at runtime. In addition, the Eval method uses the Container and DataItem objects. Although these are important concepts, we'll put off discussion of what they're doing and how they work until the next chapter. For now, accept that the expression you've selected somehow provides runtime data binding, and let it go until the next chapter. -
Select the TextBox control txtProductDetails. In the Properties window, select the DataBindings property and click the … button to display the txtProductDetails DataBindings dialog box, just as you did previously. -
From the Bindable Properties list, select the Text property. -
Select the Custom Binding Expression option button and press Ctrl+V to paste in the binding expression you copied from the HyperLink control. When you're done, the dialog box should look like Figure 17.7. Click OK to dismiss the dialog box. Figure 17.7. Paste the data-binding expression into the DataBindings dialog box.
-
Right-click the template editor and then select End Template Editing from the context menu. In the past few steps, you've set up data binding so that the DataGrid control "knows" how to display data in both the HyperLink control and in the TextBox control. The HyperLink control only appears while in normal view, and the TextBox control only appears when you're editing a row that flexibility is the point of creating a template column. Modifying the UpdateCommand Procedure The original grdProducts_UpdateCommand procedure expected to find the ProductName field embedded in the HyperLink control (that is, Controls(0)) within its cell. After modifying the column so that it contains two controls (a HyperLink control and a TextBox control), you must modify grdProducts_UpdateCommand so that it now retrieves this value from Controls(1) (the text box) within the column. To finish grdProducts_UpdateCommand, follow these steps: -
With ProductsEdit.aspx selected, use the View, Code menu item to display the page's code-behind file. -
Find the grdProducts_UpdateCommand procedure. -
Replace text as shown in the following code fragment: ' Replace this: strName = _ CType(.Cells(3).Controls(0), HyperLink).Text ' with this: strName = _ CType(.Cells(3).Controls(1), TextBox).Text -
 | Test out your newly modified DataGrid control by browsing to the page and clicking the Edit link on a row. Compare this nearly completed version (see Figure 17.1) with the version that didn't include the template column (see Figure 17.5). |
|
