Futorial

Mengawinkan GridView dengan DetailsView

Sambil menunggu AC Milan vs Juventus, saya iseng-iseng bikin Futorial yang ringan-ringan saja. Kali ini tentang penggunaan dua ASP.NET Control yang sudah sangat terkenal di dunia persilatan Web Programming, yaitu GridView dan DetailsView. Yaa.. mungkin teman-teman yang sudah berpengalaman telah sering melakukannya. Namun buat teman-teman pemula, semoga ini bermanfaat bagi Anda.

Pertama-tama, dengan menggunakan Visual Studio 2008 atau Visual Web Developer 2008 Express Edition, buatlah sebuah Web Site. Kita beri nama Web Site tersebut sebagai MilanClub.

Kalau mempraktekkan GridView dan DetailsView, kita nggak akan jauh-jauh dari database. Untuk kasus ini, buatlah sebuah database pada folder App_Data. Biarkan namanya sebagai Database.mdf.

Pada database tersebut, buatlah sebuah tabel yang berisi spesifikasi sebagai berikut

Simpan tabel tersebut dengan nama Players.

Isi data tabel Players dengan pemain-pemain sepakbola dari AC Milan. Saya ambil gambar di bawah ini dari halaman daftar pemain tim inti di situs resmi AC Milan.

Hohohoo.. pemainnya keren-keren semua.. mantap dahh..

Ehm.. kembali ke Futorial.

Misalnya saya isi dengan 5 pemain saja

Sekarang beralih ke halaman Default.aspx. Gunakan Design View atau Split View agar bisa melakukan sihir drag-and-drop. Nah, Anda bisa drag tabel Players dari Server Explorer (atau Database Explorer kalau di Visual Web Developer 2008 Express Edition) dan di-drop di visual design area. Otomatis Visual Studio akan membuatkan sebuah GridView (yang diberi ID GridView1) dan sebuah SqlDataSource (yang diberi ID SqlDataSource1) untuk Anda. Atur agar kita bisa melakukan Sorting, Paging, dan Selection pada GridView1.

Sekarang, masih dalam mode Design View ata SplitView, drag control DetailsView dari Toolbox ke visual design area. Biarkan ID DetailsView tersebut sebagai DetailsView1, dan lokasikan di bawah SqlDataSource1. Pada menu Choose Data Source, pilih <New data source…>

Pilih Database. Biarkan nama SqlDataSource sebagai SqlDataSource2. Klik tombol “OK”.

Pilih data connection yang sudah ada (gara-gara sebelumnya kita drag-and-drop tabel Players), yaitu DatabaseConnectionString1. Klik tombol “Next”.

Beri tanda centang pada pilihan *. Kemudian klik tombol “WHERE”.

Pada window “Add WHERE Clause”, pilih Number sebagai Column, = sebagai Operator, Control sebagai Source, dan GridView1 sebagai Control ID. Klik tombol “Add”.

Sebuah kondisi akan ditambahkan di WHERE clause (lihat panel bagian bawah). Klik tombol “OK”.

Kembali ke window “Configure Data Source – SqlDataSource2”. Sekarang klik tombol Advanced… Pilih Generate INSERT, UPDATE and DELETE statements serta Use optimistic concurrency. Klik tombol “OK”.

Kembali lagi ke window “Configure Data Source – SqlDataSource2”. Klik tombol “Next”. Setelah itu, klik tombol “Finish”.

Atur agar kita bisa melakukan Inserting, Editing, dan Deleting pada DetailsView1.

Simpan semua file dengan Ctrl+Shift+S. Jalankan web site dengan Ctrl+F5.

Pada saat pertama kali tampil, yang tampak hanya GridView1 saja. Karena kondisi WHERE pada DetailsView1 tidak terpenuhi (yaitu kita belum menekan link Select pada GridView1 sehingga nilai SelectedValue dari GridView1 masih null).

Selanjutnya, pilihlah salah satu pemain, misalnya Kaká. Pastinya setelah itu DetailsView1 akan tampak. Melalui DetailsView1, ubahlah namanya menja di Kaká Fu. Setelah Anda klik link Update, data yang di DetailsView1 menjadi Kaká Fu, namun kok yang di GridView1 masih Kaká. Ini berarti kita belum sinkronisasi antara kejadian yang ada di DetailsView1 untuk di-update juga ke GridView1.

Sekarang kita kembali ke Visual Studio. Tambahkan event handler ItemUpdated pada DetailsView1.

Rebind GridView1 pada method yang menjadi handler ketika data di DetailsView1 berhasil diubah.

protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
{
    GridView1.DataBind();
}

Nah, tadi kan selain bisa Editing, kita juga bisa Inserting dan Deleting. Maka dari itu, tambahkan event handler ItemInserted dan ItemDeleted, kemudian lakukan hal yang sama pada method yang menjadi handler ItemInserted dan ItemDeleted tersebut.

protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
{
    GridView1.DataBind();
}

protected void DetailsView1_ItemDeleted(object sender, DetailsViewDeletedEventArgs e)
{
    GridView1.DataBind();
}

Simpan semua file dengan Ctrl+Shift+S. Jalankan kembali web site dengan Ctrl+F5.

Kali ini ketika saya edit salah satu pemain, misalnya Pato, kemudiang klik link “Update”, maka informasi Name yang ada di GridView juga berubah.

Begitu juga ketika saya menambahkan pemain baru. Langsung terisi pada GridView1.

Semuanya nampak lancar-lancar saja… Tapi tunggu dulu… ingat kan, bahwa ketika pertama kali halaman tampil, DetailsView1 tidak tampak. Setelah kita pilih salah satu pemain di GridView1, barulah DetailsView1 tampak. Apa yang terjadi kalau di GridView1 tidak ada data pemain sama sekali? Ya kita tambahkan pemain baru melalui DetailsView1. LHO! Tapi kan DetailsView1 tidak tampak?

Nah, begini triknya.. Pada code behind, tambahkan saja method ini

protected void Page_PreRender(object sender, EventArgs e)
{
    if (GridView1.SelectedValue == null)
    {
        DetailsView1.ChangeMode(DetailsViewMode.Insert);
    }
    else
    {
        DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
    }
}

Jadi kalau tidak ada pemain yang sedang dipilih di GridView1, DetailsView1 akan berada dalam mode Insert. Kalau ada pemain yang dipilih, ya tampilkan data pemain tersebut. Ini contoh di mana tidak ada data pemain sama sekali di database (sehingga GridView1 juga jadi kosong):

Nah, sekarang bisa Insert deh!

Wah, tidak terasa sekarang AC Milan vs Juventus sudah kick-off. OK, selamat mencoba!

-Fu-

Share this post: | | | |