Showing posts with label jQuery GridView. Show all posts
Showing posts with label jQuery GridView. Show all posts
Monday, August 6, 2012
Tuesday, July 31, 2012
Asp.Net jQuery GridView Tutorial
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.
Asp.Net jQuery GridView Filter Autocomplete Style
jQuery can be used to perform a dynamic (Autocomplete style) filter on the rows of an Asp.Net GridView control. The Client side Filter operation can be performed by looping through all the rows in the GridView and filtering the text in a specific column whenever the text is changed in the filter TextBox.
In this example we shall see on how to implement a client side Autocomplete style filter on a GridView control using jQuery.
Asp.Net jQuery GridView Search Client Side
jQuery can be used to perform a Client side Search operation on the Asp.Net GridView control. The search operation can be performed by looping through all the rows in the GridView and filtering the text in a specific column.
In this example we shall see on how to implement a client side search on a GridView control using jQuery.
Wednesday, July 25, 2012
Asp.Net jQuery GridView Selected Row Values
The click event on the
row of a GridView can be tracked using the click event handler of jQuery and
the cell values of the selected row can be obtained by referring to the nth
cell in the row as follows.
$("#grdEmployee tr").click(function(event) {
var ID = $(this).find("td:nth-child(1)").html();
var Name =
$(this).find("td:nth-child(2)").html();
alert('ID: '
+ ID + '\nName: ' + Name);
});
When we click on any of the rows in the GridView, the click event gets triggered and the values of the cells in the row are displayed in a message box.
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");
//
//
// Selected Row Values
$("#grdEmployee tr").click(function(event) {
var ID = $(this).find("td:nth-child(1)").html();
var Name = $(this).find("td:nth-child(2)").html();
alert('ID: ' + ID + '\nName:
' + Name);
});
});
</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;
}
Asp.Net jQuery GridView Selected Row Index
The click event on the
row of a GridView can be tracked using the click event handler of jQuery and
the index of the selected row can be obtained using the rows index() value as
follows.
$("#grdEmployee tr").click(function(event) {
alert($(this).index());
});
When we click on any of the rows in the GridView, the click event gets triggered and the index of the selected Row is displayed in a message box.
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");
//
//
// Row Selected Index
$("#grdEmployee tr").click(function(event) {
alert($(this).index());
});
});
</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;
}
Asp.Net jQuery GridView Row Click Event
The click event on the
row of a GridView can be tracked using the click event handler of jQuery using
the following script.
$("#grdEmployee tr").click(function(event) {
alert("Row
Clicked");
});
When we click on any of the rows in the GridView, the click event gets triggered
and the Row Clicked message box is displayed.
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");
//
//
// Row Click Event
$("#grdEmployee tr").click(function(event) {
alert("Row Clicked");
});
});
</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;
}Asp.Net jQuery GridView Row Selected
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;
}
Subscribe to:
Posts (Atom)
