Selecting
a row in the GridView causes a postback. In order to highlight a row in
the GridView, you have to set the ‘SelectedRowStyle’ property which
takes effect when the postback occurs. In this article, we will see how
to highlight a row without causing a postback.
We
will be using the RowCreated event of the GridView. A GridViewRow
object is created for each row in the control before the GridView is
rendered. Whenever a row in the GridView gets created, the RowCreated
event is fired. Using this event, we can customize the behavior of the
GridView. For e.g.: adding client script to the row or customizing the
content of the row. Let us see an example where we will be adding some
client script to the GridView. I assume that you have some experience
of creating data sources and binding controls to it.
Perform the following steps:
Step 1: Create an asp.net website. In the Default.aspx page, add a GridView and a SqlDataSource control to it.
Step 2:
Configure the connection of SqlDataSource to point to the Northwind
database. Create query for the Select command to fetch records from
the Customer table. The resultant code will look similar to the one
given below:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City] FROM [Customers]">
</asp:SqlDataSource>
The web.config will look similar to the following
<connectionStrings>
<add name="NorthwindConnectionString" connectionString="Data Source =.;Integrated Security = SSPI; Initial Catalog=Northwind;"/>
</connectionStrings>
Step 3:
Once the SqlDataSource has been configured, bind the GridView to this
data source. Also set ‘AllowPaging’ and ‘AllowSorting’ to true. The
mark up will look similar to the following:
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True">
<Columns>
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City] FROM [Customers]">
</asp:SqlDataSource>
</form>
</body>
Step 4:
Now switch to the design mode and select the GridView. Go to the
properties window (F4) and click on the lightning like bolt to display
the events of the GridView. Double click the RowCreated event to add
the event. The mark up will look similar to the following
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True" OnRowCreated="GridView1_RowCreated">
...
</asp:GridView>
Step 5: In the code behind of Default.aspx, add the following code to the RowCreated event handler
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
e.Row.Attributes.Add("onMouseOver", "this.style.background='#eeff00'");
e.Row.Attributes.Add("onMouseOut", "this.style.background='#ffffff'");
}
As
you are already aware that the GridView is rendered as a HTML table and
each row as <TR>. In the code shown above, we are using the
Attributes property of the AttributeCollection to add extra properties
to the <TR> element. The onMouseOver and the onMouseOut events
are added that enable the row to change its color whenever the mouse is
over a particular row.
Run the application and see the color of the rows changing, that too without a postback!!
Well
that was a quick overview of the RowCreated event. You can also use the
same event to find the index of the row clicked. Just use
e.Row.DataItemIndex.ToString() to retrieve the selected row index
information.
I hope you liked the article and I thank you for viewing it.
If you liked the article, please subscribe to my RSS feed over here.
