The values in a
specific column of a GridView can be obtained using the following jQuery
script.
$("#grdEmployee tr td:nth-child(n)").each(function() {
alert($(this).text());
});
Here n refers to the column whose value is to be obtained, in the following example we will get the values of the 2nd column from the GridView grdEmployee. Column index starts with 0.
Example
<script type="text/javascript"
<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");
//
//
// Add Row
Hover Style
// MouseOver
$("#grdEmployee
tr").mouseover(function() {
$(this).addClass("GridRowHover");
})
// MouseLeave
$("#grdEmployee
tr").mouseleave(function() {
$(this).removeClass("GridRowHover");
})
//
// Loop Through
a Specific Column (Names)
// Column index
starts with 1
$('#cmdGetNames').click(function(event) {
event.preventDefault();
$("#grdEmployee
tr td:nth-child(2)").each(function()
{
alert($(this).text());
});
});
});
</script>
<asp:GridView
</script>
<asp:GridView
ID="grdEmployee"
runat="server"
AutoGenerateColumns="true"></asp:GridView>
<br>
<asp:Button ID="cmdGetNames" runat="server" Text="Get Names" />
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;
}
.GridRowHover
.GridRowHover
{
background-color:#CCCCCC;
}
1 comment:
Custom GridView Column creation
Post a Comment