Highlighting Rows with TextBox OnFocus

Some time back I wrote an article in which I described how to highlight the GridView rows when the mouse moves over it. In another article I explained that how you can make the rows of the GridView control clickable and highlight them when they are clicked. In this article I will explain that how you can highlight the GridView rows when you focus on the TextBox which is contained inside the GridView control.

Introduction:

Changing GridView Row Color OnMouseOver: This article explains that how you can change the GridView row color when the mouse cursor is placed on the row.

Changing GridView Row Color OnMouseClick: This article explains that how you can change the GridView row color when the user clicks on the row.

Database:

In this article I will be using a custom database called "School". The "School" database contains a single table called "Users" which hold some information about the users. Take a look at the screen shot below to have a clear idea of the table schema.

Populating the GridView:

The first task is to populate the GridView control. The method BindData shown below is used to connect to the database and pull out the required data which is used to populate the GridView control. Take a look at the BindData method given below:

private void BindData()

{

SqlConnection myConnection = new SqlConnection("Server=localhost;Database=School;Trusted_Connection=true");

SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Users", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds);

// assign the data source

gvUsers.DataSource = ds;

gvUsers.DataBind();

}

The next step is to add a TextBox inside the GridView control so that when the user focuses on the TextBox the selected row is highlighted.

Adding a Template Column with a TextBox:

In order to add a TextBox to the GridView you will need to add a Template Column. In most of the cases I suggest that you use the Template Column instead of the Bound Column. The reason is that by using the Template Column you can refer to the column by finding the control which exists inside the column. Bound Column works by using indexes which means that if later you add another column and change the columns placement then you will need to change all the columns respectively. Take a look at the code below which adds Template Columns to the GridView.

<asp:GridView ID="gvUsers" runat="server" CellPadding="4" Font-Names="Georgia" ForeColor="#333333" GridLines="None" OnRowDataBound="gvUsers_RowDataBound">

<asp:TemplateField HeaderText="Points">

<asp:TextBox ID="txtPoint" runat="server" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="First Name">

<asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FirstName") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Address">

<asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Now, if you run the application you will see the GridView populated with the dummy data.

If you have noticed I have also used the CSS class to color the rows of the GridView control. The CSS class is given below and is used later in this article to retrieve the old color for the GridView rows.

Site.css:

.RowStyleBackGroundColor

{

background-color:#FFFBD6;

}

.RowAlternateStyleBackGroundColor

{

background-color:White;

}

.HighLightRowColor

{

background-color:Yellow;

}

The last functionality that we need to add is that when the user focuses on the TextBox control inside the GridView then the row becomes highlighted.

Highlighting Rows Using JavaScript:

We need to highlight the row when the focus is on the TextBox. For this we can attach a simple client side event to the TextBox which is called "onFocus". The onFocus event is fired whenever a focus is made on the control. Take a look at the code below which demonstrate how to add the onFocus event to the TextBox control.

<asp:TextBox onFocus="ChangeColor()" ID="txtPoint" runat="server" />

The implementation of the ChangeColor function is given below. As, you have noticed the variable oldRowColor is taken as the public variable and is used to hold the previous color class name. The property window.event.srcElement is used to get the name of the control which triggered the event. The obj.parentElement.parentElement will return you the <TR> tag which means it returns you one complete row. Later the new class "HighLightRowColor" is assign to the object obj which in this case is the <TR> element and hence the row is highlighted.

var oldRowColor;

// this function is used to change the backgound color

function ChangeColor()

{

var obj = window.event.srcElement;

if(obj.tagName == "INPUT" && obj.type == "text")

{

obj = obj.parentElement.parentElement;

oldRowColor = obj.className;

obj.className = "HighLightRowColor";

}

The code is not over yet as we need to implement the onBlur event which is fired when the user leaves the focus from the control. Take a look at the code below which adds the onBlur event to the TextBox control.

<asp:TextBox onBlur="ResetColor()" onFocus="ChangeColor()" ID="txtPoint" runat="server" />

And here is the implementation of the ResetColor function.

// this function is used to reset the background color

function ResetColor()

{

var obj = window.event.srcElement;

if(obj.tagName == "INPUT" && obj.type == "text")

{

obj = obj.parentElement.parentElement;

obj.className = oldRowColor;

}

The ResetColor simply assigns the class name to the object through the use of the public variable oldRowColor. This technique takes for the alternating row back colors.

Now, run the application and focus on one of the TextBoxes and the appropriate row will be highlighted. This feature is great if you have a large GridView containing several records and you need to provide more visibility to the user. It can also be used in a scenario in which the user is entering some information for each row and wants to know which row he/she is currently on.

Conclusion:

Highlighting rows can be achieved in different ways and depends on the scenario of the application. In this article I covered the scenario which most users will find useful when they are editing large amounts of data in a massive GridView control.

I hope you liked the article, happy coding!