An Extensive Examination of the DataGrid Web Control: Part 9By Scott Mitchell
|The Ninth Part in a Multi-Part Series|
This article is the ninth piece of a multi-part series on using the DataGrid Web control that will span
several months. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
Part 2. In Part 3
we examined how to associate custom events with the DataGrid.
In Part 4 we looked at how to extend
Part 3 to provide custom sorting on the results of a DataGrid. In
Part 5 we examined how to use templates to further customize
the DataGrid's appearance. Part 6 examined how to use the
DataGrid's built-in editing capabilities, while Part 7 looked at
customizing the editing interface using the EditItemTemplate. In Part 8
we looked at how to add client-side code to a ButtonColumn's client-side |
In Part 6 of this article series we examined how to use the DataGrid to provide editing capabilities. Recall that when using the DataGrid's built-in editing capabilities each row of the DataGrid contains an "Edit" command button. When this command button is clicked, the ASP.NET Web form is posted back, the DataGrid's
EditItemIndexis set, and the row whose "Edit" button was clicked is displayed in "editing mode." Editing mode adds an "Update" and "Cancel" command button pair to the row, as well as displaying some sort of editing interface for the non-readonly columns in the row. In Part 7 we looked at how to use the EditItemTemplate to customize the editing interface. By specifying an EditItemTemplate we could use a DropDownList, or a customized TextBox for the editing interfaces of each row.
A common question I've seen on the DataGrid Forum on the ASP.NET Forums is along the lines of: "How can I have a TextBox in the EditItemTemplate receive focus when the row is selected for editing?" By "receiving focus" the user means the keyboard cursor immediately appearing in the TextBox when the page loads. (For an example of this, see Google's homepage; note that when the page loads, the cursor immediately appears in the search TextBox, so that you can type your query in and hit enter without having to touch the mouse at all.) In this article we will examine how to provide such functionality.
Setting the Focus to a Control
Before we delve into how we will set the focus of a TextBox Web control in a DataGrid, we should quickly discuss how one sets focus to a Web page input field. (By input field I mean some sort of HTML element generated by the HTML
INPUTtag. For example, the following HTML markup creates a TextBox:
<input type="text" id="textBoxID" />.) First, realize that by setting the focus to a input field, such as a TextBox, the user's keyboard will be in control of that field from the get-go. By default no input field has focus - if you want to start typing into a TextBox you have to move your mouse over the TextBox and click it, or keep hitting Tab until the TextBox receives focus.
To set the focus of an input field we need to use client-side script. Specifically, we call the input
focus() method. To have this occur when the page is loaded, we can wire up the
onload event to some client-side event handler that contains code
that calls the input field's
focus() method. For example, the following simple HTML page
demonstrates how to accomplish this:
For some more examples of this concept, there are a ton of online resources worth checking out, such as Focus OnLoad. A Google search can yield more results...
Declaring our DataGrid
In order to set the focus to a TextBox in the EditItemTemplate, we first must create a DataGrid that has editing capabilities and an EditItemTemplate with a TextBox. Our example for this article, like with the other examples in this article series, will use the ASPFAQs.com database. Specifically, the DataGrid will display an "Edit" column along with the FAQID (marked readonly) and the FAQ question (the Q in FAQ). Thus our DataGrid's declaration will look like:
The important parts of the above code snippet are in boldface. You may be wondering why the
ID properties of all of the server controls are bolded. As we'll see shortly, these
IDs are quite important, for they will be used to identify the control in our client-side
code. Also note that the EditItemTemplate contains a TextBox Web control with an
Text property is set, via data binding syntax, to the
value of the
Description field from the DataGrid's
DataSource. Code very
similar to this was examined in Part 7 of this article series.
In order to have the EditItemTemplate's TextBox receive focus when the row is selected for editing, we'll need to conceive of some way to add the appropriate client-side script to the ASP.NET Web page. In Part 2 of this article we'll look at how to add the needed client-side code to the Web page when a row's "Edit" button is clicked.