Menambahkan Kolom GridView Berisi Kotak Centang (C#)

2025-04-30

Tutorial ini melihat cara menambahkan kolom kotak centang ke kontrol GridView untuk memberi pengguna cara intuitif untuk memilih beberapa baris GridView.

Pendahuluan

Dalam tutorial sebelumnya, kami memeriksa cara menambahkan kolom tombol radio ke GridView untuk tujuan memilih rekaman tertentu. Kolom tombol radio adalah antarmuka pengguna yang sesuai saat pengguna hanya dapat memilih paling banyak satu item dari tabel. Namun, terkadang, kami mungkin ingin mengizinkan pengguna untuk memilih jumlah item berapa pun dari kisi. Klien email berbasis web, misalnya, biasanya menampilkan daftar pesan dengan kolom kotak centang. Pengguna dapat memilih jumlah pesan arbitrer lalu melakukan beberapa tindakan, seperti memindahkan email ke folder lain atau menghapusnya.

Dalam tutorial ini kita akan melihat cara menambahkan kolom kotak centang dan cara menentukan kotak centang apa yang dicentang pada postback. Secara khusus, kita akan membuat contoh yang sangat meniru antarmuka pengguna dari klien email berbasis web. Contoh kami akan menyertakan GridView halaman yang mencantumkan produk dalam Products tabel database dengan kotak centang di setiap baris (lihat Gambar 1). Tombol Hapus Produk yang Dipilih, saat diklik, akan menghapus produk tersebut yang dipilih.

Gambar 1: Setiap Baris Produk Menyertakan Kotak Centang (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Menambahkan Paged GridView yang Mencantumkan Informasi Produk

Sebelum kita khawatir tentang menambahkan kolom kotak centang, mari kita fokus terlebih dahulu pada mencantumkan produk di GridView yang mendukung halaman. Mulai dengan membuka halaman CheckBoxField.aspx di dalam folder EnhancedGridView dan seret GridView dari Kotak Alat ke Desainer, menetapkan ID ke Products. Selanjutnya, pilih untuk mengikat GridView ke ObjectDataSource baru bernama ProductsDataSource. Konfigurasikan ObjectDataSource untuk menggunakan ProductsBLL kelas , memanggil GetProducts() metode untuk mengembalikan data. Karena GridView ini akan bersifat baca-saja, atur daftar drop-down di tab PERBARUI, SISIPKAN, dan HAPUS ke (Tidak Ada) .

Gambar 2: Buat ObjectDataSource Baru Bernama ProductsDataSource (Klik untuk melihat gambar ukuran penuh)

Gambar 3: Konfigurasikan ObjectDataSource untuk Mengambil Data Menggunakan GetProducts() Metode (Klik untuk melihat gambar ukuran penuh)

Gambar 4: Atur Daftar Drop-Down di Tab PERBARUI, SISIPKAN, dan HAPUS ke (Tidak Ada) (Klik untuk melihat gambar ukuran penuh)

Setelah menyelesaikan wizard Konfigurasi Sumber Data, Visual Studio akan secara otomatis membuat BoundColumns dan CheckBoxColumn untuk bidang data terkait produk. Seperti yang kami lakukan di tutorial sebelumnya, hapus semua kecuali ProductName, , CategoryNamedan UnitPrice BoundFields, dan ubah HeaderText properti menjadi Produk, Kategori, dan Harga. Konfigurasikan UnitPrice BoundField sehingga nilainya diformat sebagai mata uang. Konfigurasikan juga GridView untuk mendukung penomoran halaman dengan mencentang kotak Aktifkan Penomoran Halaman dari smart tag.

Mari kita tambahkan juga antarmuka pengguna untuk menghapus produk yang dipilih. Tambahkan kontrol Web Button di bawah GridView, atur ID ke DeleteSelectedProducts dan propertinya Text ke Hapus Produk yang Dipilih. Daripada benar-benar menghapus produk dari database, untuk contoh ini kita hanya akan menampilkan pesan yang menyatakan produk yang akan dihapus. Untuk mengakomodasi hal ini, tambahkan kontrol Web Label di bawah Tombol. Atur ID-nya ke DeleteResults, hapus propertinya Text , dan atur Visible properti dan EnableViewState ke false.

Setelah membuat perubahan ini, markup deklaratif GridView, ObjectDataSource, Button, dan Label harus mirip dengan yang berikut ini:

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

Luangkan waktu sejenak untuk melihat halaman di browser (lihat Gambar 5). Pada titik ini Anda akan melihat nama, kategori, dan harga sepuluh produk pertama.

Gambar 5: Nama, Kategori, dan Harga Sepuluh Produk Pertama Tercantum (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Menambahkan Kolom Kotak Centang

Karena ASP.NET 2.0 menyertakan CheckBoxField, orang mungkin berpikir bahwa itu dapat digunakan untuk menambahkan kolom kotak centang ke GridView. Sayangnya, itu tidak terjadi, karena CheckBoxField dirancang untuk bekerja dengan bidang data Boolean. Artinya, untuk menggunakan CheckBoxField, kita harus menentukan bidang data yang mendasar yang nilainya dikonsultasikan untuk menentukan apakah kotak centang yang dirender dicentang. Kami tidak dapat menggunakan CheckBoxField untuk hanya menyertakan kolom kotak centang yang tidak dicentang.

Sebagai gantinya, kita harus menambahkan TemplateField dan menambahkan kontrol Web CheckBox ke dalam ItemTemplate. Lanjutkan dan tambahkan TemplateField ke Products GridView dan jadikan bidang pertama (paling kiri). Dari smart tag GridView, klik tautan Edit Templates lalu seret kontrol Web CheckBox dari Toolbox ke ItemTemplate. Atur properti Kotak ID Centang ini ke ProductSelector.

Gambar 6: Tambahkan Kontrol Web Kotak Centang Bernama ProductSelector ke Bidang ItemTemplate Templat (Klik untuk melihat gambar ukuran penuh)

Dengan kontrol Web TemplateField dan CheckBox ditambahkan, setiap baris sekarang menyertakan kotak centang. Gambar 7 memperlihatkan halaman ini, saat ditampilkan melalui browser, setelah TemplateField dan CheckBox ditambahkan.

Gambar 7: Setiap Baris Produk Sekarang Menyertakan Kotak Centang (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menentukan kotak centang apa yang diperiksa saat Postback

Pada titik ini kami memiliki kolom kotak centang tetapi tidak ada cara untuk menentukan kotak centang apa yang dicentang pada postback. Namun, ketika tombol Hapus Produk yang Dipilih diklik, kita perlu mengetahui kotak centang apa yang dicentang untuk menghapus produk tersebut.

Properti GridView menyediakan Rows akses ke baris data di GridView. Kita dapat melakukan iterasi melalui baris ini, secara terprogram mengakses kontrol CheckBox, lalu berkonsultasi dengan propertinya Checked untuk menentukan apakah Kotak Centang telah dipilih.

Buat penanganan acara untuk acara kontrol Tombol Web DeleteSelectedProducts dan tambahkan kode berikut:

protected void DeleteSelectedProducts_Click(object sender, EventArgs e)
{
    bool atLeastOneRowDeleted = false;
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null && cb.Checked)
        {
            // Delete row! (Well, not really...)
            atLeastOneRowDeleted = true;
            // First, get the ProductID for the selected row
            int productID = 
                Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);
            // "Delete" the row
            DeleteResults.Text += string.Format(
                "This would have deleted ProductID {0}<br />", productID);
        }
    }
    // Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted;
}

Properti Rows mengembalikan kumpulan GridViewRow instans yang membentuk baris data GridView. Perulangan foreach di sini menghitung koleksi ini. Untuk setiap GridViewRow objek, Kotak Centang baris diakses secara terprogram menggunakan row.FindControl("controlID"). Jika kotak centang dicentang, nilai ProductID yang sesuai dengan baris tersebut akan diambil dari koleksi DataKeys. Dalam latihan ini, kami hanya menampilkan pesan informatif di DeleteResults Label. Namun, dalam aplikasi yang sudah berfungsi, kami sebaliknya akan membuat panggilan ke metode di kelas ProductsBLLDeleteProduct(productID).

Dengan penambahan penanganan aktivitas ini, mengklik tombol Hapus Produk yang Dipilih sekarang menampilkan ProductID produk yang dipilih.

Gambar 8: Saat Tombol Hapus Produk yang Dipilih diklik Produk ProductID yang Dipilih tercantum (Klik untuk melihat gambar ukuran penuh)

Langkah 4: Menambahkan Centang Semua dan Hapus Centang Semua Tombol

Jika pengguna ingin menghapus semua produk di halaman saat ini, mereka harus memeriksa masing-masing dari sepuluh kotak centang. Kami dapat membantu mempercepat proses ini dengan menambahkan tombol Periksa Semua yang, ketika diklik, memilih semua kotak centang di kisi. Tombol Hapus Centang Semua akan sama-sama berguna.

Tambahkan dua kontrol Tombol Web ke halaman, dan letakkan di atas GridView. Atur yang ID pertama ke CheckAll dan propertinya Text ke Periksa Semua ; atur yang ID kedua ke UncheckAll dan propertinya Text ke Hapus Centang Semua .

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

Selanjutnya, buat metode di kelas code-behind bernama ToggleCheckState(checkState) yang, saat dipanggil, mengiterasi koleksi Products dari GridView dan mengatur properti Rows dari setiap CheckBox ke nilai yang diteruskan dalam parameter Checked.

private void ToggleCheckState(bool checkState)
{
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null)
            cb.Checked = checkState;
    }
}

Selanjutnya, buat Click penanganan aktivitas untuk tombol CheckAll dan UncheckAll . Dalam CheckAll penanganan aktivitas, cukup panggil ToggleCheckState(true); di UncheckAll, panggil ToggleCheckState(false).

protected void CheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(true);
}
protected void UncheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(false);
}

Dengan kode ini, mengklik tombol Periksa Semua menyebabkan postback dan memeriksa semua kotak centang di GridView. Begitu pula, mengklik Hapus Centang Semua menghapus semua kotak centang. Gambar 9 memperlihatkan layar setelah tombol Periksa Semua telah dicentang.

Gambar 9: Mengklik Tombol Centang Semua Pilih Semua Kotak Centang (Klik untuk melihat gambar ukuran penuh)

Nota

Saat menampilkan kolom kotak centang, satu pendekatan untuk memilih atau membatalkan pilihan semua kotak centang adalah melalui kotak centang di baris header. Selain itu, saat ini implementasi Centang Semua / Batalkan Centang Semua memerlukan pengiriman ulang halaman. Kotak centang dapat dicentang atau tidak dicentang, namun, sepenuhnya melalui skrip sisi klien, sehingga memberikan pengalaman pengguna snappier. Untuk mempelajari penggunaan kotak centang di baris header untuk Centang Semua dan Batalkan Centang Semua secara rinci, bersama dengan diskusi tentang teknik sisi klien, lihat Memeriksa Semua Kotak Centang di GridView Menggunakan Skrip Client-Side dan Centang Semua Kotak Centang.

Ringkasan

Dalam kasus di mana Anda perlu mengizinkan pengguna memilih jumlah baris sewenang-wenang dari GridView sebelum melanjutkan, menambahkan kolom kotak centang adalah salah satu opsi. Seperti yang kita lihat dalam tutorial ini, termasuk kolom kotak centang di GridView memerlukan penambahan TemplateField dengan Kotak Centang sebagai kontrol Web. Dengan menggunakan kontrol Web (berbanding menyuntikkan markup langsung ke dalam template, seperti yang kami lakukan dalam tutorial sebelumnya), ASP.NET secara otomatis mengingat CheckBox mana yang telah dan belum dicentang saat postback terjadi. Kami juga dapat secara terprogram mengakses Kotak Centang dalam kode untuk menentukan apakah Kotak Centang tertentu dicentang, atau untuk mengubah status yang dicentang.

Tutorial ini dan yang terakhir melihat penambahan kolom pemilih baris ke GridView. Dalam tutorial berikutnya kita akan memeriksa bagaimana, dengan sedikit pekerjaan, kita dapat menambahkan kemampuan penyisipan ke GridView.

Selamat Pemrograman!

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Sebelumnya Berikutnya

Bagikan melalui