Filtering an ASP.NET GridView control with jQuery (C#)
Filtering an ASP.NET GridView control with jQuery (C#)
DataBase Name : Northwind Sample db
Sample
Download : jquery-1.4.1.js
Download : jquery.quicksearch.js
In Default.aspx page
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('input#id_search').quicksearch('table#table_example tbody tr');
})
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
<b>Filtering an ASP.NET GridView control with jQuery (C#)</b></h2>
<strong>Search :</strong>
<input id=id_search type=text placeholder="Search"><br /><br />
<asp:GridView ID="table_example" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ClientIDMode="Static" onprerender="table_example_PreRender">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" ReadOnly="True"
SortExpression="CategoryID" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName"
SortExpression="CategoryName" />
<asp:BoundField DataField="Description" HeaderText="Description"
SortExpression="Description" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * FROM [Categories] ">
</asp:SqlDataSource>
</asp:Content>
In aspx.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void table_example_PreRender(object sender, EventArgs e)
{
if (table_example.Rows.Count > 0)
{
table_example.UseAccessibleHeader = true;
table_example.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
}
Download Sample Project - Download
DataBase Name : Northwind Sample db
Sample
Download : jquery-1.4.1.js
Download : jquery.quicksearch.js
In Default.aspx page
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('input#id_search').quicksearch('table#table_example tbody tr');
})
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
<b>Filtering an ASP.NET GridView control with jQuery (C#)</b></h2>
<strong>Search :</strong>
<input id=id_search type=text placeholder="Search"><br /><br />
<asp:GridView ID="table_example" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ClientIDMode="Static" onprerender="table_example_PreRender">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID" ReadOnly="True"
SortExpression="CategoryID" />
<asp:BoundField DataField="CategoryName" HeaderText="CategoryName"
SortExpression="CategoryName" />
<asp:BoundField DataField="Description" HeaderText="Description"
SortExpression="Description" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT * FROM [Categories] ">
</asp:SqlDataSource>
</asp:Content>
In aspx.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void table_example_PreRender(object sender, EventArgs e)
{
if (table_example.Rows.Count > 0)
{
table_example.UseAccessibleHeader = true;
table_example.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
}
Download Sample Project - Download
Filtering an ASP.NET GridView control with jQuery (C#)
Reviewed by (C#) Csharp examples
on
9:38 AM
Rating:
No comments: