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. - continued - Read Part 10 Read Part 11 Read Part 12 Read Part 13 Read Part 14 Read Part 15 Read Part 16 Read Part 17 Read Part 18

ASP.NET Data Web Controls Kick Start ASP.NET Data Web Controls Kick Start is author Scott Mitchell's most recent book, which thoroughly examines three of the most commonly used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls can be difficult to master due to their numerous features and capabilities. With this book, you'll quickly become an expert, learning the gritty details and true capabilities of each. This 400+ page book explores the topics in this article series in much greater depth, along with examining various topics and techniques not covered here. Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET books. [Buy this Book] [Visit the Book's Companion Web Site]

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:

<html> <head> <script language="JavaScript"> function setFocus() { frmInfo.name.focus(); } </script> </head> <body onload="setFocus();"> <form id="frmInfo"> Name: <input type="text" id="name" /><br /> Age: <input type="text" id="age" /> </form> </body> </html>

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:

<form runat="server" id="frmEditFAQs"> <asp:datagrid id="dgPopularFAQs" runat="server" AutoGenerateColumns="False" ... OnEditCommand="dgPopularFAQs_Edit" OnUpdateCommand="dgPopularFAQs_Update" OnCancelCommand="dgPopularFAQs_Cancel"> <Columns> <asp:EditCommandColumn EditText="Edit" UpdateText="Update" CancelText="Cancel" /> <asp:BoundColumn DataField="FAQID" HeaderText="FAQ ID" ItemStyle-HorizontalAlign="Center" ReadOnly="True" /> <asp:TemplateColumn HeaderText="Question"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "Description") %> </ItemTemplate> <EditItemTemplate> <asp:TextBox id="txtDesc" runat="server" Width="95%" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>' /> </EditItemTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid> </form>

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 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.

Read Part 2