Highlight DataGridView Row using CSS

It’s very simple to highlight a row in a “DataGridView” using the “CSS”. 

In a datagrid you can define the property “RowStyle” and assign a style for each line. 

Here a simple example of datagrid with the property “RowStyle” defined (see row 21): 


When “IIS” generates the HMTL page, The “datgridview” is transformed into a HTML table and the code looks like this (see row 2):

 

<asp:GridView ID="LISTA" Width="100%" runat="server"
AutoGenerateColumns="False" CellPadding="2" CellSpacing="3" GridLines="None"
AllowPaging="True" AllowSorting="True"
OnPageIndexChanging="LISTA_PageIndexChanging"
CaptionAlign="Top" PageSize="20" onsorting="LISTA_Sorting">
<Columns>
<asp:TemplateField HeaderText="Sel">
<ItemStyle CssClass="ROW_CENTER" Width="5%" />
<HeaderStyle CssClass="LIST_HEADER_CENTER" />
<ItemTemplate>
<asp:CheckBox runat="server" ID="The_Selection"> </asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="qte_user" HeaderText="Manager"
SortExpression="qte_user" HtmlEncode="False">
<ItemStyle CssClass="ROW_CENTER" Width="5%" />
<HeaderStyle CssClass="LIST_HEADER_CENTER" />
</asp:BoundField>
</Columns>
<PagerStyle Font-Size="Smaller" Font-Names="Verdana" Font-Underline="True" />
<RowStyle CssClass="THE_ROW_STYLE" />
<PagerSettings Mode="NumericFirstLast" FirstPageText=""
LastPageText="Last page" NextPageText="" Position="TopAndBottom"
PreviousPageText="" />
</asp:GridView>

 

...cut the code
<tr class="THE_ROW_STYLE">
<td class="ROW_CENTER" style="width:5%;">
<input id="LISTA_ctl04_The_Selection" type="checkbox" name="LISTA$ctl04$The_Selection" />
</td>
<td class="ROW_CENTER" style="width:5%;">xxxxxx</td>
</tr>
...cut the code

 

Now you can use “CSS” classes to highlight the rows at each “mouse hover”.

See the “CSS” classes to do this:




.THE_ROW_STYLE
{
	border: none 0;
	font-family: Arial, Verdana, Tahoma;
	font-size: 8pt;
	background-color: #FFFFFF;
}

.THE_ROW_STYLE:hover
{
	border: none 0;
	font-family: Arial, Verdana, Tahoma;
	font-size: 8pt;
	background-color: #e6e67d;
}

Marchesi Dante

Advertisement