An Extensive Examination of the DataGrid Web Control: Part 9
By 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 onclick event.
In this part we'll examine how to enhance the DataGrid's editing interface by having the editing
interface's TextBox receive focus when the page is loaded.
|
|
Introduction
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
EditItemIndex
is 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
INPUT
tag. 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
field's focus()
method. To have this occur when the page is loaded, we can wire up the
BODY
tag's 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
ID
s 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 ID
of txtDesc
. It's 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.