Jan 29, 2011

How to Gridview Header Filtering in Asp.net



In Asp.net Grid view control use to header row filtering for each column to search condition based on that start with first character for each column data. In this sample grid view filter application to used Linq query concepts and also data bind from the data table objects. It is used to Linq query for filtering purpose such as select statement like operator.

GridviewFilterExample.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewFilterExample.aspx.cs" Inherits="GridviewFilterExample" %>

<!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>Gridview Filter Example</title>
    <link rel="stylesheet" type="text/css" href="gridview.css" media="all" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <table style="width: 640px" border="0" cellpadding="0" cellspacing="6" class="GridviewTable">
        <tr >
            <td style="width: 120px">
                Product ID
            </td>
            <td style="width: 120px">
                Product Name
            </td>
            <td style="width: 120px">
                Product Weight
            </td>
            <td style="width: 120px">
                Product Price
            </td>
            <td style="width: 120px">
                Product Expiry Date
            </td>
         </tr>
          <tr >
                <td style="width: 120px;">
                    <asp:TextBox ID="txtProductId" runat="server" Width="75px"></asp:TextBox>
                    &nbsp;<asp:Button ID="btnProductId" runat="server" Text="Go" 
                        onclick="btnProductId_Click" />
                </td>
                <td style="width: 120px;">
                <asp:TextBox ID="txtProductName" runat="server" Width="75px"></asp:TextBox>
                   &nbsp;<asp:Button ID="btnProductName" runat="server" Text="Go" 
                        onclick="btnProductName_Click" />
                </td>
                <td style="width: 120px;">
                <asp:TextBox ID="txtProductWeight" runat="server" Width="75px"></asp:TextBox>
                    &nbsp;<asp:Button ID="btnProductWeight" runat="server" Text="Go" 
                        onclick="btnProductWeight_Click" />
                </td>
                <td style="width: 130px;">                       
                    <asp:TextBox ID="txtProductPrice" runat="server" Width="75px"></asp:TextBox>
                    &nbsp;<asp:Button ID="btnProductPrice" runat="server" Text="Go" 
                        onclick="btnProductPrice_Click" />
                </td>
                <td style="width: 130px;">                       
                    <asp:TextBox ID="txtProductExpiryDate" runat="server" Width="75px"></asp:TextBox>
                    &nbsp;<asp:Button ID="btnProductExpiryDate" runat="server" Text="Go" 
                        onclick="btnProductExpiryDate_Click" />
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <asp:GridView ID="gvProductDtls" runat="server" AutoGenerateColumns="False"
                         Width="640px" CssClass="Gridview" ShowHeader="False" >                       
                        <Columns>
                            <asp:BoundField DataField="ProducId" ItemStyle-Width="120px" >
                            <ItemStyle Width="120px"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="ProductName" ItemStyle-Width="120px" >
                            <ItemStyle Width="120px"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="ProductWeight" ItemStyle-Width="120px" >
                            <ItemStyle Width="120px"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="ProductPrice" ItemStyle-Width="130px" >
                            <ItemStyle Width="130px"></ItemStyle>
                            </asp:BoundField>
                            <asp:BoundField DataField="ProductExpiryDate" ItemStyle-Width="130px" >
                            <ItemStyle Width="130px"></ItemStyle>
                            </asp:BoundField>
                        </Columns>                       
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>


GridviewFilterExample.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
/// 
/// Gridview Filter Example 
/// 
public partial class GridviewFilterExample : System.Web.UI.Page
{
    DataTable productTable;
    /// 
    /// Page load event is call to bind data from datatable in gridview
    /// 
    /// /// protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            productTable = new DataTable();
            productTable = CreateDataTable();
            Session["ProductTable"] = productTable;

            this.gvProductDtls.DataSource = ((DataTable)Session["ProductTable"]).DefaultView;
            this.gvProductDtls.DataBind();
        }
    }

    /// 
    /// Create a datatable columns and rows 
    /// 
    /// 
    private DataTable CreateDataTable()
    {
        DataTable myDataTable = new DataTable();

        DataColumn myDataColumn;

        myDataColumn = new DataColumn();
        myDataColumn.DataType = Type.GetType("System.String");
        myDataColumn.ColumnName = "ProducId";
        myDataTable.Columns.Add(myDataColumn);

        myDataColumn = new DataColumn();
        myDataColumn.DataType = Type.GetType("System.String");
        myDataColumn.ColumnName = "ProductName";
        myDataTable.Columns.Add(myDataColumn);

        myDataColumn = new DataColumn();
        myDataColumn.DataType = Type.GetType("System.String");
        myDataColumn.ColumnName = "ProductWeight";
        myDataTable.Columns.Add(myDataColumn);

        myDataColumn = new DataColumn();
        myDataColumn.DataType = Type.GetType("System.String");
        myDataColumn.ColumnName = "ProductPrice";
        myDataTable.Columns.Add(myDataColumn);

        myDataColumn = new DataColumn();
        myDataColumn.DataType = Type.GetType("System.String");
        myDataColumn.ColumnName = "ProductExpiryDate";
        myDataTable.Columns.Add(myDataColumn);

        myDataTable.Rows.Add("01", "G Powder", "500mg", "1,500.00", "12/12/2011");
        myDataTable.Rows.Add("02", "G Eye Drops", "50ml", "200.00", "02/04/2012");
        myDataTable.Rows.Add("03", "G Syrup", "250ml", "150.00", "08/10/2011");

        return myDataTable;
    }

    /// 
    /// Gridview filter based on the Product id 
    /// 
    /// /// protected void btnProductId_Click(object sender, EventArgs e)
    {
        if (txtProductId.Text.ToString().Trim() != "")
        {
            DataTable dt = (DataTable)Session["ProductTable"];
            var query = from t in dt.AsEnumerable()
                        where t.Field("ProducId").StartsWith(txtProductId.Text.ToString().Trim())
                        || t.Field("ProducId").Contains(txtProductId.Text.ToString().Trim())
                        select t;
            DataTable dtable = new DataTable();
            dtable = query.CopyToDataTable();
            this.gvProductDtls.DataSource = dtable;
            this.gvProductDtls.DataBind();
        }
        else
        {
            this.gvProductDtls.DataSource = ((DataTable)Session["ProductTable"]).DefaultView;
            this.gvProductDtls.DataBind();
        }
    }
)

Output:


1 comment:

  1. Thanks for the posting..Can we do the same for an Oracle Table
    Please help with coding for the same

    ReplyDelete