Gridview'de Çoklu Seçim ve Silme İşlemi

Bu yazımda verilerin gösterimi için çok kullanılan Gridview kontrolüne bir kaç fonksiyonellik eklemeye çalışacağım. Bu foksiyonelikler çoklu seçim ve silme işlemini içerecek.

Bu yazımda verilerin gösterimi için çok kullanılan Gridview kontrolüne bir kaç fonksiyonellik eklemeye çalışacağım. Bu foksiyonelikler çoklu seçim ve silme işlemini içerecek.

Özellikle biz programcıların admin yönetimi konusunda çok hassas olduğumuz bilinir, yani özellikle grid'ler bizim en çok özen gösterdiğimiz kontollerdir. Çeşitli 3.party bileşenlerle farklı grid kontollerini kullanabiliriz. Örneğin en çok kullanılan Telerik'in RadGrid Kontolü, DevExpress kontolleri gibi. Fakat bunlar ücretli. Tabi, trial'lerle alıştırmalar yapabilirsiniz, fakat yayınlama konusunda sıkıntı çekersiniz. Bu yazıda amacım VisualStudio ile birlikte halihazırda gelen kontolleri nasıl fonksiyonlu hale getirebileceğimize değineceğiz.

Arka planda neler oluyor?

VisualStudio ile birlikte gelen kontroller bildiğiniz gibi runat="servet" noduna sahip elementlerdir ve client tarafında kontroller üzerinde yaptığınız özellikler html olarak sayfaya yansırlar. Örneğin bir Asp:checkbox kontolü çalıştırıp sayfa kaynağını görüntülediğinizde input elementi olarak göreceksiniz.

Peki Gridview arkaplanda nasıl yansıyor?


<table cellspacing="0" cellpadding="4" id="Table1" style="color:#333333border-collapse:collapse;">

    <tr style="color:White;background-color:#5D7B9D;font-weight:bold;">

        <th scope="col">

            <input id="GridView1_chkAll" type="checkbox" name="GridView1$ctl01$chkAll"

            onclick="javascript:SelectAllCheckboxesSpecific(this);" />

            </th><th scope="col">FirstName</th><th scope="col">LastName</th>

            <th scope="col">Email</th><th scope="col">Country</th>

        </tr>

    <tr style="color:#333333;background-color:#F7F6F3;">

        <td>

            <span title="4"><input id="GridView1_chkDelete_0" type="checkbox" name="GridView1$ctl02$chkDelete" /></span>

        </td>

        <td>Margaret</td><td>Park</td><td>margaret@chinookcorp.com</td><td>Canada</td>

    </tr>

    <tr style="color:#284775;background-color:White;">

        <td>

            <span title="5"><input id="GridView1_chkDelete_1" type="checkbox" name="GridView1$ctl03$chkDelete" /></span>

            </td>

        <td>Steve</td><td>Johnson</td><td>steve@chinookcorp.com</td><td>Canada</td>

    </tr>

</table>



Gridview arkaplanda html tabloya dönüşüyor aslında bunu bilmek ya da farkında olmak tasarım açısından da güzel sonuçlar doğurabilir. Gridview'i sistemin sağladığı tasarımları seçerek değil, kendi tasarımınızı oluşturarak yapmak daha iyidir. Sayfanıza bir tablo ekleyin ve onun için bir CSS tasarımı yapın ve yapılan stili gridview için kullanın.

Evet, fazla uzatmadan örneğimize başlayalım.

Gridview'de gösterilen kayıtların toplu seçim işlemini yapacağız ve bunu yapmak için javascript'ten faydalanacağız. Örneğimizin sonucunda aşağıdaki resimde görünen yapı elde edilecek.




NOT: Bu örnekte verileri Entity Data Modeli kullanarak elde ediyorum ve kobay veritabanı olan Chinook'u kullandım. Şimdi Gridview'imizin kaynağına bakalım.


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">

    <Columns>

        <asp:TemplateField>

            <HeaderTemplate>

                <asp:CheckBox ID="chkAll"

                onclick="javascript:SelectAllCheckboxesSpecific(this);" runat="server"/>

            </HeaderTemplate>

            <ItemTemplate>

            <asp:CheckBox ID="chkDelete" runat="server" ToolTip='<%# Eval("EmployeeId") %>' />

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField DataField="FirstName" HeaderText="FirstName"

            SortExpression="FirstName" />

        <asp:BoundField DataField="LastName" HeaderText="LastName"

            SortExpression="LastName" />

        <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />

        <asp:BoundField DataField="Country" HeaderText="Country"

            SortExpression="Country" />

    </Columns>

</asp:GridView>



Dikkat ederseniz, üst kısımda TemplateField oluşturarak buraya her kayıt için oluşacak checkbox ları oluşturdum ve kayıtların Id değerini checkbox'ın tooltip özelliğine atayarak kullanacağım. Header kısmında bütün kayıtları seçmek için bir javascript fonksiyonu çağırılıyor. Şimdi bunu görelim.


<script type="text/javascript">

       function SelectAllCheckboxesSpecific(spanChk)

       {

           var IsChecked = spanChk.checked;

           var Chk = spanChk;

           Parent = document.getElementById('GridView1');          

           var items = Parent.getElementsByTagName('input');                         

            for(i=0;i<items.length;i++)

            {               

                if(items.id != Chk && items.type=="checkbox")

                {           

                    if(items.checked!= IsChecked)

                    {    

                        items.click();    

                    }

                }

            }            

       }

</script>



Şu an Gridview kayıtlarını çoklu seçim yapabiliyoruz. Yapılan seçimler sonucunda silme işlemini sağlayacak buton methodunu ve PageLoad olayında verilerimizi gridview e aktarma işlemlerini yapalım.


protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        LoadData();

    }

}

 

protected void Button1_Click(object sender, EventArgs e)

{

    ChinookEntities context = new ChinookEntities();

 

    foreach (GridViewRow row in GridView1.Rows)

    {

        CheckBox checkbox = (CheckBox)row.FindControl("chkDelete");

 

        if (checkbox.Checked)

        {

            int employeeID = Convert.ToInt32(checkbox.ToolTip);

            var result = context.Employees.FirstOrDefault(d => d.EmployeeId == employeeID);

            context.Employees.DeleteObject(result);

            context.SaveChanges();

 

        }

    }

 

    LoadData();

}

 

void LoadData() 

{

    using (ChinookEntities context=new ChinookEntities())

    {

        GridView1.DataSource = context.Employees.ToList();

        GridView1.DataBind();

    }

}



Buton olay methodunda Checkbox kontollerinin tekrar seçilip seçilmediğini kontrol ediyoruz; çünkü kayıtların hepsini seçtikten sonra aralarda bir kaç tanesinin seçimini kaldırabiliriz.

Bu yazımızın sonuna geldik. Umarım faydalı olmuştur.

İyi çalışmalar dilerim.

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 7 yıl önce
güzel bi çalışma olmuş emeğine sağlık ;)

Yukarı Git