jQuery
provides a number of useful client side functionalities on the Asp.net GridView control
like Style, Row count, Column count, Search, Filter etc
In the following example I have tried to
cover all the possible scenarios which we come across while using a GridView control.
Running the sample
To run the sample at your desk, create a new Asp.net page; copy the entire code below, change reference of the jQuery & Stylesheet files to point to your local directory. Build and run the application.
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>jQuery
GridView</title>
<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 Style
$("#grdEmployee
td").addClass("GridCell");
/*
// Add Cell Style
$("#grdEmployee
td").filter(":even").addClass("GridCellEven");
$("#grdEmployee
td").filter(":odd").addClass("GridCellOdd");
*/
//
// Add
Header Style
$("#grdEmployee
th").addClass("GridHeader");
//
// Add
Row Style
$("#grdEmployee
tr").addClass("GridRow");
//
// Add
Alternating Row Style
$("#grdEmployee
tr").filter(":even").addClass("GridRowEven");
$("#grdEmployee
tr").filter(":odd").addClass("GridRowOdd");
// Add
Row Hover Style
//
MouseOver
$("#grdEmployee
tr").mouseover(function() {
$(this).addClass("GridRowHover");
})
//
MouseLeave
$("#grdEmployee
tr").mouseleave(function() {
$(this).removeClass("GridRowHover");
})
//
// Get
Row Count
var
rowCount = "Total Rows: " + ($("#grdEmployee tr").length -
1).toString();
document.getElementById("lblRowCount").innerText = rowCount;
//
// Get
Column Count
var
columnCount = "Total Columns: " +
($("#grdEmployee").find('tr')[0].cells.length).toString();
document.getElementById("lblColumnCount").innerText = columnCount;
//
// Client
Side Search
// Get
the search Key from the TextBox
//
Iterate through the 2nd Column.
//
td:nth-child(2) - Filters only the 2nd Column
// If
there is a match show the row [$(this).parent() gives the Row]
// Else
hide the row [$(this).parent() gives the Row]
$('#cmdSearch').click(function(event) {
event.preventDefault();
var
searchKey = $('#txtName').val().toLowerCase();
$("#grdEmployee
tr td:nth-child(2)").each(function()
{
var
cellText = $(this).text().toLowerCase();
if
(cellText.indexOf(searchKey) >= 0) {
$(this).parent().show();
}
else
{
$(this).parent().hide();
}
});
});
//
// Client
Side Search (Autocomplete)
// Get
the search Key from the TextBox
//
Iterate through the 1st Column.
//
td:nth-child(1) - Filters only the 1st Column
// If
there is a match show the row [$(this).parent() gives the Row]
// Else
hide the row [$(this).parent() gives the Row]
$('#txtID').keyup(function(event) {
var
searchKey = $(this).val().toLowerCase();
$("#grdEmployee
tr td:nth-child(1)").each(function()
{
var
cellText = $(this).text().toLowerCase();
if
(cellText.indexOf(searchKey) >= 0) {
$(this).parent().show();
}
else
{
$(this).parent().hide();
}
});
});
//
// Clear
Search
// Clear
the Search textbox
//
Iterate through all the rows
// Set
the visibility of all the rows to Show()
$('#cmdClear').click(function(event) {
event.preventDefault();
$('#txtName').val('');
$("#grdEmployee
tr").each(function() {
$(this).show();
});
});
//
// Get
Row Count
$('#cmdGetRowCount').click(function(event) {
event.preventDefault();
var
rowCount = "Total Rows: " + ($("#grdEmployee tr").length -
1).toString();
alert(rowCount);
});
//
// Get
Column Count
$('#cmdGetColumnCount').click(function(event) {
event.preventDefault();
var
columnCount = "Total Columns: " +
($("#grdEmployee").find('tr')[0].cells.length).toString();
alert(columnCount);
});
//
// 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());
});
});
//
// Loop
Through a Specific Row (2nd Row)
// Column
index starts with 0
$('#cmdRow2').click(function(event) {
event.preventDefault();
$("#grdEmployee
tr:nth-child(3) td").each(function()
{
alert($(this).text());
});
});
//
$("#grdEmployee
tr").click(function(event) {
//
Check if Row is already Selected
if
($(this).hasClass('GridRowSelected'))
{
//
If selected, un-Select row
$(this).removeClass("GridRowSelected");
}
else
{
//
If not selected, Select row
$(this).addClass("GridRowSelected");
}
});
//
// Get
Selected Row Cell Values
$("#grdEmployee
tr").click(function(event) {
alert("Row
Clicked");
alert($(this).index());
var
ID = $(this).find("td:nth-child(1)").html();
var
Name = $(this).find("td:nth-child(2)").html();
alert('ID:
' + ID + '\nName: ' + Name);
});
});
</script>
</head>
<body>
<form id="frmGridView" runat="server">
<table>
<tr>
<td>
Search Name:
<asp:TextBox ID="txtName" runat="server" Width="100"></asp:TextBox>
<asp:Button ID="cmdSearch" runat="server" Text="Search" />
<asp:Button ID="cmdClear" runat="server" Text="Clear" />
</td>
</tr>
<tr>
<td>
Search ID (Autocomplete):
<asp:TextBox ID="txtID" runat="server" Width="100"></asp:TextBox>
</td>
</tr>
<tr valign="top">
<td>
<div id="divEmployee">
<asp:GridView
ID="grdEmployee"
runat="server"
AutoGenerateColumns="true"></asp:GridView>
</div>
</td>
</tr>
<tr>
<td align="left">
<span id="lblRowCount" class="Label"></span>
</td>
</tr>
<tr>
<td align="left">
<span id="lblColumnCount" class="Label"></span>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="Label">
Get Row Count:
<asp:Button ID="cmdGetRowCount" runat="server" Text="Get Row Count" />
</td>
</tr>
<tr>
<td class="Label">
Get Column Count:
<asp:Button ID="cmdGetColumnCount" runat="server"
Text="Get Column
Count" />
</td>
</tr>
<tr>
<td class="Label">
Loop Through a Specific
Column (Names):
<asp:Button ID="cmdGetNames" runat="server" Text="Get Names" />
</td>
</tr>
<tr>
<td class="Label">
Loop Through a Specific Row (2nd
Row):
<asp:Button ID="cmdRow2" runat="server" Text="Get 2nd Row" />
</td>
</tr>
</table>
</form>
</body>
</html>
Add your logic in codebehind to populate the Grid with data.
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;
}
.GridCellEven
{
background-color:#ffffcc;
}
.GridCellOdd
{
background-color:#fedcba;
}
.GridHeader
{
background-color:#999966;
}
.GridRow
{
background-color:#ffffcc;
}
.GridRowEven
{
background-color:#ffffcc;
}
.GridRowOdd
{
background-color:#FEDCBA;
}
.GridRowHover
{
background-color:#CCCCCC;
}
.GridRowSelected
{
background-color:#CC99FF;
}
2 comments:
The cells propery comes up undefined.
Thanks, this is generally helpful.
Still, I followed step-by-step your method in this
dot net online training
Dot net online training hyderabad
Post a Comment