Filter GridView using javaScript in ASP.Net

Last Reply on Oct 08, 2015 03:27 AM By Shashikant

Posted on Oct 07, 2015 08:32 PM

The code woks fine until i put it into a page using a master page. i am just hard coding the grid for now if i get it working i would like to load from SQL server. I mostly do SQL this is just something I would like to get working the right way instead of hacking a page and not use the master page. thanks in advance for any help 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="RHMP.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript">
        function Search_Gridview(strKey, strGV) {
            var strData = strKey.value.toLowerCase().split(" ");
            
            
        
        var tblData = document.getElementById('strGV');
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                        styleDisplay = '';
                    else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
            }
        }    
    </script>


        <div style="border: 1px solid Black; width: 800px; padding: 20px; height: 350px;
            font-size: 20px;">
            Search :
            <asp:TextBox ID="txtSearch" runat="server" Font-Size="20px" onkeyup="Search_Gridview(this, 'gvTest')" OnTextChanged="txtSearch_TextChanged"></asp:TextBox><br />
            <br />
            <asp:GridView ID="gvTest" runat="server" ClientIDMode="AutoID" CellPadding="10" Width="500px" AutoGenerateColumns="False">
            </asp:GridView>
        </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

namespace JavaScript_Gridview_Search
{
    public partial class Gridview_Search : System.Web.UI.Page
    {
        DataTable dt = new DataTable();
        protected void Page_Load(object sender, EventArgs e)
        {
            //Columns Add To DataTable...
            dt.Columns.Add("AgtId", typeof(int));
            dt.Columns.Add("AgtName", typeof(string));
            dt.Columns.Add("AgtAge", typeof(int));
            dt.Columns.Add("AgtCity", typeof(string));
            //Rows Add To DataTable...
            dt.Rows.Add(1, "Johnny", 25, "Test");
            dt.Rows.Add(2, "Jenny", 32, "8675309");
            dt.Rows.Add(3, "Tom", 23, "Hariy");
            dt.Rows.Add(3, "esdfs", 25, "smith");
            dt.Rows.Add(3, "Max", 28, "Power");
            //DataTable Bind To Gridview...
          
            
            gvTest.DataSource = dt;
            gvTest.DataBind();
        }

        protected void txtSearch_TextChanged(object sender, EventArgs e)
        {

        }
    }
}

 

Posted on Oct 08, 2015 03:27 AM

Hi dennysavard,

Here I have created sample that will help you out.

Content Page

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
        <script type="text/javascript">
            function Search_Gridview(strKey) {
                var strData = strKey.value.toLowerCase().split(" ");
                var tblData = document.getElementById("<%=gvTest.ClientID %>");
                var rowData;
                for (var i = 1; i < tblData.rows.length; i++) {
                    rowData = tblData.rows[i].innerHTML;
                    var styleDisplay = 'none';
                    for (var j = 0; j < strData.length; j++) {
                        if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                            styleDisplay = '';
                        else {
                            styleDisplay = 'none';
                            break;
                        }
                    }
                    tblData.rows[i].style.display = styleDisplay;
                }
            }   
        </script>
        <div style="border: 1px solid Black; width: 800px; padding: 20px; height: 350px;
            font-size: 20px;">
            Search :
            <asp:TextBox ID="txtSearch" runat="server" Font-Size="20px" onkeyup="Search_Gridview(this)"></asp:TextBox><br />
            <br />
            <asp:GridView ID="gvTest" runat="server" ClientIDMode="AutoID" CellPadding="10" Width="500px"
                AutoGenerateColumns="true">
            </asp:GridView>
        </div>
    </div>
</asp:Content>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();            
        dt.Columns.Add("AgtId", typeof(int));
        dt.Columns.Add("AgtName", typeof(string));
        dt.Columns.Add("AgtAge", typeof(int));
        dt.Columns.Add("AgtCity", typeof(string));
        dt.Rows.Add(1, "Johnny", 25, "Test");
        dt.Rows.Add(2, "Jenny", 32, "8675309");
        dt.Rows.Add(3, "Tom", 23, "Hariy");
        dt.Rows.Add(3, "esdfs", 25, "smith");
        dt.Rows.Add(3, "Max", 28, "Power");
        gvTest.DataSource = dt;
        gvTest.DataBind();
    }
} 

Screenshot