We can highlight the
selected row in a GridView using jQuery script as follows.
$("#grdEmployee tr").click(function(event) {
$(this).addClass("GridRowSelected");
});
});
We add a style class to highlight the selected rows, in the following example; we will highlight the selected rows, and also un-highlight the row if the user clicks on the same row again.
Example
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
// Add Grid Style
$("#grdEmployee").addClass("Grid");
//
// Add Grid Cell Style
$("#grdEmployee
td").addClass("GridCell");
//
// Add Header
Style
$("#grdEmployee
th").addClass("GridHeader");
//
// Add Row
Style
$("#grdEmployee
tr").addClass("GridRow");
//
//
$("#grdEmployee
tr").click(function(event) {
// Check if Row
is already Selected
if($(this).hasClass('GridRowSelected'))
{
// If
selected, Remove the Selected class
$(this).removeClass("GridRowSelected");
}
else
{
// If not
selected, Add the Selected class
$(this).addClass("GridRowSelected");
}
});
</script>
<asp:GridView
</script>
<asp:GridView
ID="grdEmployee"
runat="server"
AutoGenerateColumns="true"></asp:GridView>
Add your logic in codebehind to populate the Grid with data.
Stylesheet.css
.Grid
{
border: 1px solid #000000;
}
.GridCell
{
padding: 3px 3px 3px 3px; /* Cellpadding */
border: 1px solid #000000;
font-family:Verdana;
font-size:10pt;
}
.GridHeader
{
background-color:#999966;
}
.GridRow
.GridRow
{
background-color:#ffffcc;
}
.GridRowSelected
{
background-color:#CC99FF;
}
No comments:
Post a Comment