Editing DataGrid Controls

If you use DataGrid controls in your .NET Web application, chances are good that what you really need is an editable, tabular component that works in much the same way as an Excel worksheet. Typically, Excel worksheets appear to be read-only until the user points to a particular cell by using the cursor via the mouse or keyboard. In that moment of pointing to a cell, the user interface of the worksheet changes. The clicked cell is rendered through an interactive input control—such as a text box or a combo box. The user enters the new text and then closes the input operation by clicking a button. Clicking another button cancels the user’s operation, restoring the original text in the cell.

This user interface perfectly matches the functionality of the DataGrid control’s in-place editing feature. The output of the DataGrid control is an HTML table in which all cells are rendered as literal controls, links, or a custom layout defined by templated columns. Regardless of the column structure, all item rows in the resulting table are drawn in the same way. When the user triggers an event that begins the editing phase, the visible part of the grid is redrawn and—like Excel’s cells—the row selected for editing is rendered in a different way, using text box controls instead of literals and labels. The DataGrid control completes its own user interface with a couple of link buttons to allow the user to commit or roll back changes.

This suite of functions looks like a rather complex feature, but it’s yours for free—almost. All you have to do is set up a few attributes to enable editing and make all changes persistent. But is the in-place editing feature efficient and effective? That’s another story, indeed a rather interesting story, but with a happy ending. Let me tell you about it.