Introduction:
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.
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="Arial"
ForeColor="#333333"
GridLines="None"
OnRowDataBound="gvUsers_RowDataBound">
<Columns>
<asp:TemplateField
HeaderText="Points">
<ItemTemplate>
<asp:TextBox
ID="txtPoint"
runat="server"
/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField
HeaderText="First
Name">
<ItemTemplate>
<asp:Label
ID="lblFirstName"
runat="server"
Text='<%#
Eval("FirstName") %>'
/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField
HeaderText="Address">
<ItemTemplate>
<asp:Label
ID="lblAddress"
runat="server"
Text='<%#
Eval("Address") %>'
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle
BackColor="#990000"
Font-Bold="True"
ForeColor="White"
/>
<RowStyle
CssClass="RowStyleBackGroundColor"
ForeColor="#333333"
/>
<SelectedRowStyle
BackColor="#FFCC66"
Font-Bold="True"
ForeColor="Navy"
/>
<PagerStyle
BackColor="#FFCC66"
ForeColor="#333333"
HorizontalAlign="Center"
/>
<HeaderStyle
BackColor="#990000"
Font-Bold="True"
ForeColor="White"
/>
<AlternatingRowStyle
CssClass="RowAlternateStyleBackGroundColor"
/>
</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.
| <script
language="javascript">
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!