Herkese ilk önce başka bir binary günden merhaba demek istiyorum 
(01.11.2011) Özellikle web projelerimizde çok kullandığımız asp.net gridview için hepimiz belli başlı özelliklere göre filtreleme işlemleri yapmaktayız. Bu işlemleri yaparken bazen sql procedurelere bazen codebehind tarafındaki kodlarımıza sayesinde yaparız. Alternatif seçenek aslında oldukça çok. Fakat basit bir filtreleme işlemi için sistemi yormadan ve en hızlı bir şekilde yapmak için velinimetimiz olan Jquery hemen imdadımıza yetişir. Jquery.quicksearch plugini sayesinde çok rahat ve hızlı bir şekilde istediğimiz aramayı gerçekleştirebiliriz. Bunu küçük bir örnek ile açıklarsak ;
<asp:TextBox ID="id_search" runat="server" placeholder="Search">
</asp:TextBox>
Filtreleme yapmak için bir tane textbox ekledik. Ardından hemen listelenecek olan veriler için xml data file eklenir.
<asp:XmlDataSource ID="productsDataSource" Runat="server" DataFile="~/App_Data/Products.xml">
</asp:XmlDataSource>
Sonra verileri listeleyeceğimiz gridview eklenir ve onprerender parametresine codebehind tarafında yazacağımız fonksiyonun adı yazılır.
<asp:GridView ID="grd_telefonDurumu" Runat="server"
DataSourceID="productsDataSource" AutoGenerateColumns="False"
ClientIDMode="Static" onprerender="grd_telefonDurumu_PreRender" >
<Columns>
<asp:BoundField HeaderText="" DataField="ProductID"
SortExpression="ProductID" ItemStyle-HorizontalAlign="Center"></asp:BoundField>
<asp:BoundField HeaderText="Model" DataField="ProductName"
SortExpression="ProductName"></asp:BoundField>
<asp:BoundField HeaderText="Fiyat" DataField="UnitPrice"
SortExpression="UnitPrice"></asp:BoundField>
<asp:BoundField HeaderText="Stok(Adet)" DataField="UnitsInStock"
SortExpression="UnitsInStock"></asp:BoundField>
</Columns>
</asp:GridView>
Codebehind tarafına geçip aşağıdaki kodlar yazılır. Bunu yapmamızdaki neden ise; gridview sonuçta bir table olarak bize dönüş yapıyor. Biz, jquery quicksearch eklentisini kullanırken, gridview içinde arama yaparken headerlara takılmaması için tablo yapısını <thead></thead> ve <tbody></tbody> şeklinde ikiye ayırıyoruz. Böylece tbody içinde arama yapıp istediğimiz sonuca ulaşıyoruz.
protected void grd_telefonDurumu_PreRender(object sender, EventArgs e)
{
if (grd_telefonDurumu.Rows.Count > 0)
{
grd_telefonDurumu.UseAccessibleHeader = true;
grd_telefonDurumu.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
Buraya kadar işlemlerimiz tamamladıysak artık Jquery kısmına geçelim. Hemen kullandığımız script dosyalarını ekleyelim.
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>
Ardından arama scriptimizi yazalım.
<script type="text/javascript">
$(function () {
$('input#id_search').quicksearch('table#grd_telefonDurumu tbody tr');
})
</script>
Plugin sayesinde gridview içinde istrediğimizi aramak bu kadar basit. Plugini kendi istediğiniz şekilde, daha etkili bir biçimde kullanabilirsiniz.
Quicksearch plugini keşfetmek istiyorsanız burayı, örnek uygulamayı indirmek istiyorsanız quicksearch.rar (34,65 kb) tıklayınız.