Jquery ile Asp.Net Gridview Filtreleme İşlemleri

 

Asp.Net & Jquery

  Herkese ilk önce başka bir binary günden merhaba demek istiyorum Smile (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.

 

Jquery ile Asp.Net Gridview Filtreleme İşlemleri

 

Quicksearch plugini keşfetmek istiyorsanız burayı, örnek uygulamayı indirmek istiyorsanız quicksearch.rar (34,65 kb) tıklayınız.

Yorumlar (6) -

Selam, hocam güzel bir döküman olmuş teşekkürler. yalnız benim bir sorunum var. Fikir verebilirseniz sevinirim. Ben tablo içerisinde arma yaptıktan sonra diğer diğer satırların gizlenmesini değilde, bulunan kayıtların yanıp sönmesi, farklı renkte gözükmesi vs. gibi bir şekilde gözükmesini istiyorum.
Daha özelde ise tarihi yaklaşan kayıt satırlarının farklı biçimde gösterilmesini istiyorum. bununu gibi bir örek göremedim.

seo hizmetleri 4.12.2015 08:26:52

Çok aradığım paylaşımdı teşekkürler

web yazılım 20.12.2015 14:56:08

Çok güzel bir yazı olmuş teşekkürler

php yazılım 20.12.2015 15:01:21

Sitenizi yandex de gezinirken buldum çok beğendim teşekkürler

doğru web tasarım 20.12.2015 21:23:28

İyi konu olmuş teşekkürler

doğru web tasarımı 20.12.2015 21:28:20

Merhabalar nette gezinirken yazınız gözüme çarptı çok beğendim teşekkürler.

Yorum ekle