Makale Özeti

Bu makalemde sizlerle birlikte DataGrid'de çok fazla veri göstermek zorunda olduğumuz durumlarda kullanıcıların bu verilerin arasında aradıkları veriyi bulmalarının çok zor olduğu düşünülerek DataGrid üzerinde çalışabilecek basit bir filitreleme bileşenini nasıl yazacağımızı inceleyeceğiz.

Makale

         Merhabalar,

         Bu makalemde sizlerle birlikte DataGrid'de çok fazla veri göstermek zorunda olduğumuz durumlarda kullanıcıların bu verilerin arasında aradıkları veriyi bulmalarının çok zor olduğu düşünülerek DataGrid üzerinde çalışabilecek basit bir filitreleme bileşenini nasıl yazacağımızı inceleyeceğiz. Bunun için projemize ilk önce uctToolBar adında bir UserControl oluşturuyoruz. Oluşturduğumuz bu UserControl'un GUI'sinin neye benzeyeceği aşağıdaki resimde gösterilmiştir.


         Şimdi ise bu User Control'ün Designer kısmındaki Html kodunu inceleyelim. Bu kodun yazılması aşağıdadır.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="uctToolbar.ascx.cs" Inherits="uctToolbar" %>
<table style="border-right: navy thin solid; table-layout: auto; border-top: navy thin solid; border-left: navy thin solid; border-bottom: navy thin solid; position: static; background-color: silver">
    <tr>
        <td>
            <asp:TextBox ID=txtSearch runat="server"></asp:TextBox>
            <asp:DropDownList ID=ddlColumnNames runat="server"></asp:DropDownList>
            <asp:DropDownList ID=ddlSearchType runat="server">
               
            </asp:DropDownList>
            <asp:ImageButton ID=ibtSearch runat="server" ImageUrl="~/images/search.gif" OnClick="ibtSearch_Click" />
        </td>
        <td>
            <asp:ImageButton ID=ibtReset runat="server" ImageUrl="~/images/reset.gif" OnClick="ibtReset_Click" />
        </td>
    </tr>
</table>
         
         Şimdi ise bu UserControl'ün Codebehınd kısmını inceleyelim. Şimdi bu kodu yazmaya başlayalım.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class uctToolbar : System.Web.UI.UserControl
{
    public DataTable proGridviewDataSource
    {
        get
        {
            return (DataTable)ViewState["dataSource"];
        }
        set
        {
            ViewState.Add("dataSource", value);
            if (!Page.IsPostBack)
            {
                for (int i = 0; i < value.Columns.Count; i++)
                {
                    ddlColumnNames.Items.Add(new ListItem(value.Columns[i].ColumnName, i.ToString()));
                }
            }
        }
    }
    public string proGridView
    {
        get{return ViewState["gridViewName"].ToString();}
        set{ViewState.Add("gridViewName", value);}
    }
         Bu Class'ımızda GridView'in DataSource'una verilen DataTable'ı tuttuğumuz property'i yazıyoruz ve bu property nin set metodunda bu DataTable nesnesını VıewState'e atıyoruzki sayfa postback olduğunda bu değer kaybolmasın.Ve daha sonrasında bu property'e atanan DataTable'ın kolonları arasında dolaşırak Bu kolonların isimlerini ddlColumnNames adındaki ComboBox'a Item olarak ekliyoruz. Bu eklediğimiz Item'ın Text'ine kolon ismi Value'suna ise kolonun index numarasını atıyoruz.
 
    public void funSetSearch(string parGridView, DataTable parDataTable)
    {
        proGridView = parGridView;
        proGridviewDataSource = parDataTable;
    }
    protected void Page_Load(object sender, EventArgs e)
      {
        if (!Page.IsPostBack)
        {
            ddlSearchType.Items.Add(new ListItem("Benzer", "0"));
            ddlSearchType.Items.Add(new ListItem("TamUyan", "1"));
        }
    }
          Bu class'ımızdaki funSetSearch() metodu ise biraz önce açıkladığımız iki property'e atanacak değerleri parametre olarak almakta ve bu değerleri property'lere atamaktadır. Sayfa yüklenirken ise çalışacak olan metodda diğer ComboBox'a verileri yüklüyoruz.
 
      public event ImageClickEventHandler SearchClicked;
      protected virtual void OnSearchClicked(ImageClickEventArgs e)
      {
            if (ddlColumnNames.SelectedIndex > -1)
            {
                  DataView insDataView = new DataView((DataTable)ViewState["dataSource"]);
                  if (insDataView.Table.Columns[int.Parse(ddlColumnNames.SelectedValue)].DataType.ToString().Substring(ddlColumnNames.SelectedValue.IndexOf(",") + 1) == "System.String")
                  {
                        if (ddlSearchType.SelectedValue == "1")
                        {
                             insDataView.RowFilter = ddlColumnNames.SelectedItem.Text + "='" + txtSearch.Text + "'";
                        }
                        else
                        {
                             insDataView.RowFilter = ddlColumnNames.SelectedItem.Text + " like '%" + txtSearch.Text + "%'";
                        }
                  }
                  else
                  {
                        insDataView.RowFilter = ddlColumnNames.SelectedItem.Text + "=" + txtSearch.Text;
                  }
                  ((GridView)this.Page.FindControl(ViewState["gridViewName"].ToString())).DataSource = insDataView;
                  ((GridView)this.Page.FindControl(ViewState["gridViewName"].ToString())).DataBind();
            }
            if (SearchClicked != null) SearchClicked(this, e);
      }
      protected void ibtSearch_Click(object sender, ImageClickEventArgs e)
      {
            OnSearchClicked(e);
      }
         UserControl'ümüze SearchClicked event'ini tanımlıyoruz. Bunun için ilk önce SearchClicked EventHandler'ını tanımlıyoruz. Daha sonrasında parametre olarak ImageClickEventArgs alan OnSearchClicked metodunu tanımlıyor ve bu metodun son kısmında EventHandler olarak tanımladığımız SearchClicked handler ını çağırıyoruz. ImageButton tıklandığında ise yine biraz önce yazdığımız metodu çağırıyoruz. Şimdi OnSearchClicked metodunda yaptığımız işlemi açıklayalım. Bu kısımda ddlColumnNames ComboBox'ında seçili olan değerin yani filitreleme yapılacak olan kolonun adını alıyoruz. Bunu belirtilen kolonun veri tipine göre bir RowFilter oluşturmakta kullanıyoruz ve RowFilter property'sine değer atadığımız DataView'i property olarak verdiğimiz GridView'i form içinde bularak DataSource propertysine atıyoruz.
 
      public event ImageClickEventHandler ResetClicked;
      protected virtual void OnResetClicked(ImageClickEventArgs e)
      {
            ((GridView)this.Page.FindControl(ViewState["gridViewName"].ToString())).DataSource = ((DataTable)ViewState["dataSource"]);
            ((GridView)this.Page.FindControl(ViewState["gridViewName"].ToString())).DataBind();
            if (ResetClicked != null) ResetClicked(this, e);
      }
    protected void ibtReset_Click(object sender, ImageClickEventArgs e)
    {
        OnResetClicked(e);
    }
     
}
                   ResetClicked eventınıda SearchClicked eventi gibi yukarıdaki şekilde tanımlıyoruz. Şimdi ise yazdığımız bu UserControl'u test edebileceğimiz bir Web Form hazırlıyoruz.
 
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register Src="uctToolbar.ascx" TagName="uctToolbar" TagPrefix="uc1" %>
 
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:uctToolbar ID="UctToolbar1" runat="server" />
        <asp:GridView ID=grvMenuItems runat=server></asp:GridView>
    </div>
    </form>
</body>
</html>
                   Formumuzun üzerine yazdığımız UserControl'ü koyuyoruz ve verileri saklayacağımız birde GridView koyuyoruz.
 
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.Common;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DbProviderFactory ProviderFactory = DbProviderFactories.GetFactory("System.Data.SqlClient");
            DbConnection Connection = ProviderFactory.CreateConnection();
            Connection.ConnectionString = @"data source=tameroz;initial catalog=DENEME;integrated security=SSPI";
            DbCommand cmd = ProviderFactory.CreateCommand();
            cmd.CommandText = "Select * FROM MenuItems";
            cmd.Connection = Connection;
            DbDataAdapter da = ProviderFactory.CreateDataAdapter();
            da.SelectCommand = cmd;
            DataTable dt = new DataTable();
            da.Fill(dt);
 
            grvMenuItems.DataSource = dt;
            grvMenuItems.DataBind();
            UctToolbar1.funSetSearch("grvMenuItems", dt);
        }
    }
}
         Sayfa yüklenirken verileri DataTable'a dolduruyoruz ve daha sonrasında bu verileri GridView'in DataSource property'sine atıyoruz ve GridView'de gösteriyoruz. Diğer bir yapmamız gereken işlem ise Form üzerine koduğumuz ToolBar'ın funSetSearch metoduna GridView'in ismini ve DataSource'una atadığımız DataTable ı parametre olarak vermektir.

         Bu makalede hep birlikte bir Web sayfası içinde bulunan GridView de veri sorgulamasının veya filitrelemesinin nasıl yapılacağı, çok veri olan gridlerden kullanıcıların aradıkları verileri bulmaları için nasıl kolaylaştırıcı bir yöntem izlenmesi gerektiği üzerine bilgi sahibi olduk.

oztamer@hotmail.com
tamer.oz@yazgelistir.com
oztamer@hotmail.com
Ornek Kodlar