Wednesday 25 April 2012

How to Search Contents of Gridview Using Jquery


Step 1:

 Download the jquery-1.7.1.min.js file  ans save this file at Scripts folder at solution Explorer.
Step 2


Pass the Given Below code in your source page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Search GridView Data</title>
    <style type="text/css">
    body
    {
        font-family: Arial;
        font-size : 10pt;
    }
    .links
    {
        font-weight: bold;
    }
    </style>

    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('#<%=lblNoRecords.ClientID%>').css('display','none');
       
        $('#<%=txtSearch.ClientID%>').blur(function(e)
        {
            $('#<%=lblNoRecords.ClientID%>').css('display','none'); // Hide No records to display label.
            $("#<%=gdRows.ClientID%> tr:has(td)").hide(); // Hide all the rows.
           
            var iCounter = 0;
            var sSearchTerm = $('#<%=txtSearch.ClientID%>').val(); //Get the search box value
           
            if(sSearchTerm.length == 0) //if nothing is entered then show all the rows.
            {
              $("#<%=gdRows.ClientID%> tr:has(td)").show();
              return false;
            }
            //Iterate through all the td.
            $("#<%=gdRows.ClientID%> tr:has(td)").children().each(function()
            {
                var cellText = $(this).text().toLowerCase();
                if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) //Check if data matches
                {   
                    $(this).parent().show();
                    iCounter++;
                    return true;
                }
            });
            if(iCounter == 0)
            {
                $('#<%=lblNoRecords.ClientID%>').css('display','');
            }
            e.preventDefault();
        })
    })
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <br />
        <br />
        Search Text :
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
        &nbsp;
        <asp:Button ID="btnSubmit" runat="server" Text="Search" />
        <br /><br />
        <asp:GridView ID="gdRows" runat="server" BackColor="Pink" BorderColor="Tan"
            BorderWidth="1px" CellPadding="6" Font-Names="Arial" Font-Size="Small" GridLines="None"
            ForeColor="Black" Width="36%">
            <FooterStyle BackColor="Tan" />
            <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
            <HeaderStyle BackColor="Tan" Font-Bold="True" HorizontalAlign="Left" />
            <AlternatingRowStyle BackColor="PaleGoldenrod" />
            <RowStyle HorizontalAlign="Left" />
        </asp:GridView>
        <asp:Label ID="lblNoRecords" Text="No recprd found" runat="server" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>

Note : This page has not Page directives.

Step 3:


Pass the Given Below code in code Behind :


protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            BindGrid();
    }

    private void BindGrid()
    {
        DataTable dt = new DataTable();
        DataColumn dc;
        dc = new DataColumn();
        dc.ColumnName = "ID";
        dc.DataType = System.Type.GetType("System.Int32");
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "PlayerName";
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "100s";
        dc.DataType = System.Type.GetType("System.Int32");
        dt.Columns.Add(dc);

        dc = new DataColumn();
        dc.ColumnName = "MatchPlayed";
        dc.DataType = System.Type.GetType("System.Int32");
        dt.Columns.Add(dc);


        DataRow dr;
        dr = dt.NewRow();
        dr["ID"] = 1;
        dr["PlayerName"] = "Virat Kohli";
        dr["100s"] = 10;
        dr["MatchPlayed"] = 100;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 2;
        dr["PlayerName"] = "Sachin Tendulker";
        dr["100s"] = 15;
        dr["MatchPlayed"] = 990;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 3;
        dr["PlayerName"] = "Yousuf Pathan";
        dr["100s"] = 35;
        dr["MatchPlayed"] = 3990;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 4;
        dr["PlayerName"] = "RAM";
        dr["100s"] = 22;
        dr["MatchPlayed"] = 399;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 5;
        dr["PlayerName"] = "Yuvraj Singh";
        dr["100s"] = 10;
        dr["MatchPlayed"] = 350;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 6;
        dr["PlayerName"] = "Virender Sehwag";
        dr["100s"] = 1;
        dr["MatchPlayed"] = 399;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 7;
        dr["PlayerName"] = "Kapil Dev";
        dr["100s"] = 62;
        dr["MatchPlayed"] = 300;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 8;
        dr["PlayerName"] = "Kiran Morey";
        dr["100s"] = 5;
        dr["MatchPlayed"] = 700;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 9;
        dr["PlayerName"] = "Ajay Jadeja";
        dr["100s"] = 25;
        dr["MatchPlayed"] = 199;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 10;
        dr["PlayerName"] = "Parvinder Awana";
        dr["100s"] = 20;
        dr["MatchPlayed"] = 350;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["ID"] = 11;
        dr["PlayerName"] = "Ajankya Rahane";
        dr["100s"] = 12;
        dr["MatchPlayed"] = 500;
        dt.Rows.Add(dr);

        gdRows.DataSource = dt;
        gdRows.DataBind();

    }