This Is a Tutorial for Adding filter option in a Table.But this can be used for filtering the data on a Gridview in ASP.NET. After rendering a gridview we will get a table so this can be used to filter data from GridView. I am using a JQuery Script so you will need to include JQuery to your page to make this Filter work.
Add this to the <Head> tag of the page.you can add the google link or direct link to the file
then add the script file for filter
download the jquery.uitablefilter.js file and add it to your solution explorer
(I have added JQuery file Directly instead of using the Google)
My Solution Explorer Looks like this.
Add the Link of the Jquery.Uitablefilter.js as
because it is in the root directory of the solution explorer
so we have added the JQuery file and the Script to uitablefilter.The next step is to add the script to call the function written inside the js file.
#filter is the Id of the textbox (input ) where we enter text for filtering the table
Next create the gridview with id=gv and class=gv
first is the textbox and below it is the grid that we just created
the total code look like this
I have created a test dataTable to bind to this grid
By binding the data and Running the website you can see the page as
type something on the textbox and you can see the grid filtering without postbacking
I am attaching My sample code here
Link : Download
Add this to the <Head> tag of the page.you can add the google link or direct link to the file
Google JQuery : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
then add the script file for filter
Filter link : https://github.com/gregwebs/jquery-uitablefilter
the page of original developer : http://gregweber.info/projects/uitablefilter
download the jquery.uitablefilter.js file and add it to your solution explorer
(I have added JQuery file Directly instead of using the Google)
Add the Link of the Jquery.Uitablefilter.js as
<script src="jquery.uitablefilter.js" type="text/javascript"></script>
because it is in the root directory of the solution explorer
so we have added the JQuery file and the Script to uitablefilter.The next step is to add the script to call the function written inside the js file.
<script type="text/javascript" language="javascript">here gv is the id and the class name of the table (Gridview in our case).if your gridview's Id is 'datagrid' the you have to write like this var
$(function () {
var theTable = $('table.gv')
$("#filter").keyup(function () {
$.uiTableFilter(theTable, this.value);
})
});
</script>
theTable = $('table.datagrid ')
#filter is the Id of the textbox (input ) where we enter text for filtering the table
<input name="filter" id="filter" value="" maxlength="30" size="30" type="text"/>
Next create the gridview with id=gv and class=gv
<asp:GridView runat="server" ID="gv" class="gv">by changing to design view you can see this
</asp:GridView>
first is the textbox and below it is the grid that we just created
the total code look like this
I have created a test dataTable to bind to this grid
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
DataColumn col1 = new DataColumn("ID");
DataColumn col2 = new DataColumn("Name");
DataColumn col3 = new DataColumn("Checked");
DataColumn col4 = new DataColumn("Description");
DataColumn col5 = new DataColumn("Price");
DataColumn col6 = new DataColumn("Brand");
DataColumn col7 = new DataColumn("Remarks");
col1.DataType = System.Type.GetType("System.Int16");
col2.DataType = System.Type.GetType("System.String");
col3.DataType = System.Type.GetType("System.Boolean");
col4.DataType = System.Type.GetType("System.String");
col5.DataType = System.Type.GetType("System.Double");
col6.DataType = System.Type.GetType("System.String");
col7.DataType = System.Type.GetType("System.String");
table.Columns.Add(col1);
table.Columns.Add(col2);
table.Columns.Add(col3);
table.Columns.Add(col4);
table.Columns.Add(col5);
table.Columns.Add(col6);
table.Columns.Add(col7);
DataRow row = table.NewRow();
row[col1] = 1100;
row[col2] = "Computer Set";
row[col3] = true;
row[col4] = "New computer set";
row[col5] = 32000.00;
row[col6] = "NEW BRAND-1100";
row[col7] = "Purchased on July 30,2008";
table.Rows.Add(row);
DataRow row1 = table.NewRow();
row1[col1] = 1100;
row1[col2] = "sad";
row1[col3] = true;
row1[col4] = "fsd";
row1[col5] = 32000.00;
row1[col6] = "rter";
row1[col7] = "werwe";
table.Rows.Add(row1);
DataRow row2 = table.NewRow();
row2[col1] = 1100;
row2[col2] = "wqe";
row2[col3] = true;
row2[col4] = "sdfds";
row2[col5] = 32000.00;
row2[col6] = "zX";
row2[col7] = "sdfdsg";
table.Rows.Add(row2);
gv.DataSource = table;
gv.DataBind();
}
}
By binding the data and Running the website you can see the page as
type something on the textbox and you can see the grid filtering without postbacking
I am attaching My sample code here
Link : Download
Thank you :) it's a nice example.
ReplyDeleteregards