Sunday, 10 August 2014

How to Filter GridView Data By using jquery in ASP.NET.



Objective:-Create a Program in ASP.NET to Filter GridView Data By using jquery..........

STEPS :-
STEP:- 1  CREATE NEW PROJECT.
Go to File -> New -> Project -> Select asp.net web forms application -> Entry Application Name -> Click OK.
STEP:-2 Attach  "jquery-1.7.1.min" file in Scripts Folder



********HTML Code***************
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title>Filter GridView Data</title>
  5.     <style type="text/css">
  6.     body
  7.     {
  8.         font-family: Arial;
  9.         font-size : 10pt;
  10.     }
  11.     .links
  12.     {
  13.         font-weight: bold;
  14.     }
  15.     </style>
  16.     <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
  17.     <script type="text/javascript" language="javascript">
  18.     $(document).ready(function() {
  19.         $('#<%=lblNoRecords.ClientID%>').css('display','none');
  20.         $('.links').click(function(e){
  21.             $('#<%=lblNoRecords.ClientID%>').css('display','none'); 
  22.             var lnkText = $(this).text().toLowerCase();
  23.             var iCounter = 0;
  24.             $("#<%=gdRows.ClientID%> tr:has(td)").each(function() {
  25.                 var cell = $(this).find("td:eq(1)").text().toLowerCase();
  26.                 if(lnkText != 'all')
  27.                 {
  28.                     if(cell.indexOf(lnkText) != 0)
  29.                         $(this).css('display','none');
  30.                     else
  31.                     {
  32.                         $(this).css('display','');
  33.                         iCounter++;
  34.                     }    
  35.                 }
  36.                 else
  37.                 {
  38.                     $(this).css('display','');
  39.                     iCounter++;
  40.                 }
  41.             });
  42.             if(iCounter == 0)
  43.             {
  44.                 $('#<%=lblNoRecords.ClientID%>').css('display','');
  45.             }
  46.             e.preventDefault();
  47.         });
  48.     });
  49.     </script>
  50. </head>
  51. <body>
  52.     <form id="form1" runat="server">
  53.         <br />
  54.         <br />
  55.         <asp:LinkButton ID="lnkA" Text="A" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  56.         <asp:LinkButton ID="lnkB" Text="B" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  57.         <asp:LinkButton ID="lnkC" Text="C" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  58.         <asp:LinkButton ID="lnkD" Text="D" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  59.         <asp:LinkButton ID="lnkE" Text="E" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  60.         <asp:LinkButton ID="lnkF" Text="F" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  61.         <asp:LinkButton ID="lnkG" Text="G" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  62.         <asp:LinkButton ID="lnkH" Text="H" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  63.         <asp:LinkButton ID="lnkI" Text="I" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  64.         <asp:LinkButton ID="lnkJ" Text="J" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  65.         <asp:LinkButton ID="lnkK" Text="K" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  66.         <asp:LinkButton ID="lnkL" Text="L" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  67.         <asp:LinkButton ID="lnkM" Text="M" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  68.         <asp:LinkButton ID="lnkN" Text="N" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  69.         <asp:LinkButton ID="lnkO" Text="O" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  70.         <asp:LinkButton ID="lnkP" Text="P" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  71.         <asp:LinkButton ID="lnkQ" Text="Q" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  72.         <asp:LinkButton ID="lnkR" Text="R" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  73.         <asp:LinkButton ID="lnkS" Text="S" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  74.         <asp:LinkButton ID="lnkT" Text="T" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  75.         <asp:LinkButton ID="lnkU" Text="U" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  76.         <asp:LinkButton ID="lnkV" Text="V" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  77.         <asp:LinkButton ID="lnkW" Text="W" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  78.         <asp:LinkButton ID="lnkX" Text="X" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  79.         <asp:LinkButton ID="lnkY" Text="Y" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  80.         <asp:LinkButton ID="lnkZ" Text="Z" runat="server" CssClass="links" ></asp:LinkButton>&nbsp;
  81.         <asp:LinkButton ID="lnkAll" Text="All" runat="server" CssClass="links" ></asp:LinkButton>
  82.         <br />
  83.         <br />
  84.         <div>
  85.             <asp:GridView ID="gdRows" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="6" Font-Names="Arial" Font-Size="Small"
  86.                 GridLines="None" ForeColor="Black" Width="36%">
  87.                 <FooterStyle BackColor="Tan" />
  88.                 <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
  89.                 <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
  90.                 <HeaderStyle BackColor="Tan" Font-Bold="True" HorizontalAlign="Left" />
  91.                 <AlternatingRowStyle BackColor="PaleGoldenrod" />
  92.             </asp:GridView>
  93.             <asp:Label ID="lblNoRecords" Text="No records to display" runat="server" ForeColor="red"></asp:Label>
  94.         </div>
  95.     </form>
  96. </body>
  97. </html>



********C# Code***************
  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Web;
  5. using System.Web.Security;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  8. using System.Web.UI.WebControls.WebParts;
  9. using System.Web.UI.HtmlControls;

  11. public partial class _Default : System.Web.UI.Page 
  12. {
  13.     protected void Page_Load(object sender, EventArgs e)
  14.     {
  15.         if (!IsPostBack)
  16.             BindGrid();
  17.     }

  19.     private void BindGrid()
  20.     {
  21.         DataTable dt = new DataTable();
  22.         DataColumn dc;
  23.         dc = new DataColumn();
  24.         dc.ColumnName = "ID";
  25.         dc.DataType = System.Type.GetType("System.Int32");
  26.         dt.Columns.Add(dc);

  28.         dc = new DataColumn();
  29.         dc.ColumnName = "ProductName";
  30.         dt.Columns.Add(dc);

  32.         dc = new DataColumn();
  33.         dc.ColumnName = "Quantity";
  34.         dc.DataType = System.Type.GetType("System.Int32");
  35.         dt.Columns.Add(dc);

  37.         dc = new DataColumn();
  38.         dc.ColumnName = "Price";
  39.         dc.DataType = System.Type.GetType("System.Int32");
  40.         dt.Columns.Add(dc);


  43.         DataRow dr;
  44.         dr = dt.NewRow();
  45.         dr["ID"] = 1;
  46.         dr["ProductName"] = "Mouse";
  47.         dr["Quantity"] = 10;
  48.         dr["Price"] = 100;
  49.         dt.Rows.Add(dr);

  51.         dr = dt.NewRow();
  52.         dr["ID"] = 2;
  53.         dr["ProductName"] = "Speaker";
  54.         dr["Quantity"] = 15;
  55.         dr["Price"] = 990;
  56.         dt.Rows.Add(dr);

  58.         dr = dt.NewRow();
  59.         dr["ID"] = 3;
  60.         dr["ProductName"] = "Hard Drive";
  61.         dr["Quantity"] = 35;
  62.         dr["Price"] = 3990;
  63.         dt.Rows.Add(dr);

  65.         dr = dt.NewRow();
  66.         dr["ID"] = 4;
  67.         dr["ProductName"] = "RAM";
  68.         dr["Quantity"] = 22;
  69.         dr["Price"] = 399;
  70.         dt.Rows.Add(dr);

  72.         dr = dt.NewRow();
  73.         dr["ID"] = 5;
  74.         dr["ProductName"] = "Wireless Keyboard";
  75.         dr["Quantity"] = 10;
  76.         dr["Price"] = 3500;
  77.         dt.Rows.Add(dr);

  79.         dr = dt.NewRow();
  80.         dr["ID"] = 6;
  81.         dr["ProductName"] = "Wi-Fi Router";
  82.         dr["Quantity"] = 1;
  83.         dr["Price"] = 3990;
  84.         dt.Rows.Add(dr);

  86.         dr = dt.NewRow();
  87.         dr["ID"] = 7;
  88.         dr["ProductName"] = "LCD";
  89.         dr["Quantity"] = 62;
  90.         dr["Price"] = 3000;
  91.         dt.Rows.Add(dr);

  93.         dr = dt.NewRow();
  94.         dr["ID"] = 8;
  95.         dr["ProductName"] = "Intel Processor";
  96.         dr["Quantity"] = 5;
  97.         dr["Price"] = 7000;
  98.         dt.Rows.Add(dr);

  100.         dr = dt.NewRow();
  101.         dr["ID"] = 9;
  102.         dr["ProductName"] = "Monitor";
  103.         dr["Quantity"] = 25;
  104.         dr["Price"] = 1990;
  105.         dt.Rows.Add(dr);

  107.         dr = dt.NewRow();
  108.         dr["ID"] = 10;
  109.         dr["ProductName"] = "Keyboard";
  110.         dr["Quantity"] = 20;
  111.         dr["Price"] = 350;
  112.         dt.Rows.Add(dr);

  114.         dr = dt.NewRow();
  115.         dr["ID"] = 11;
  116.         dr["ProductName"] = "headphones";
  117.         dr["Quantity"] = 12;
  118.         dr["Price"] = 500;
  119.         dt.Rows.Add(dr);

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

  124.     }
  125. }
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)