Advanced GridView

Control Data GridView merupakan control data yang dapat menampung sejumlah record data. Selain itu, gridview juga dapat memanipulasi data lewat fungsi insert,update,delete. Secara default, gridview mempunyai tampilan kolom per kolom secara horizontal.

Nah, gimana caranya agar tampilan gridView bisa mempunyai tampilan kolom per kolom secara vertikal. Lalu, gimana caranya qta dapat mendesain sendri tampilan yang sesuai dengan keinginan qta atau user.
Caranya yaitu :



Misal qta mempunyai database CDCatalog. Dalam database itu, terdapat 1 tabel yaitu tabel catalog. Field-field yang terdapat di dalam tabel catalog adalah Title(Primary Key), artis, Country,Company,Year. Silahkan isi datanya sesuai dengan keinginan kalian.
1. Setelah tabel dan isi datanya telah dibuat, drag n drop tabel catalog ke dalam webForm. Ketika tabel itu di drag, maka SQL Data Source telah mlakukan konfigurasi secara otomatis baik itu query select, insert,update maupun delete. Nah, kalian akan melihat tampilan default dari gridView.

2. Klik panah kecil(smart tags) yang ada di pojok kanan atas control gridView. Pilih 'EditColumns'. Kemudian hapus field-field title,artis,country,company, Year. Lalu, Pilih 'TemplateField' pada kolom 'available Fields' , tekan tombol Add. Pada properties TemplateField, Isi 'Header Text' sesuai dengan yang anda inginkan misal qta isi CDCatalog. Klik tombol OK.

3. Klik panah kecil(smart tags) yang ada di pojok kanan atas control gridView. Pilih 'Edit Templates'.

4. Pada templates 'ItemTemplate', anda drag n drop control label yang ada di toolbox. Kemudian klik panah kecil(smart tags) yang ada di pojok kanan atas control label. Pilih 'Edit DataBindings'. Pilih 'Text'. Pada BoundTo yang ada di 'Text', pilih field yang akan anda tampilkan terlebih dahulu,misal field title. Klik Tombol OK.
Lakukan secara berulang drag n drop label dan data bindings hingga field terakhir yang ingin anda tampilkan misalnya field Year dalam kasus ini.

5. Drag n Drop LinkButton yang ada di toolbox. secara default, LinkButton memiliki nama linkbutton1. Pada properties LinkButton, ubah nama linkButton1 menjadi Edit. Pada properties commandName yang ada di linkButton, ketik SELECT.
Lakukan drag n drop LinkButton satu kali lagi. Pada properties LinkButton, ubah nama LinkButton2 menjadi Delete. Pada properties commandName yang ada di linkButton, ketik DELETE.
**Lakukan running program, jika masih ada error ttg linkButton. Anda hapus LinkButton yang udah anda buat. Drag n drop lagi kemudian setting ulang lagi.

6. Kluar dari EditTemplates adalah klik panah kecil(smart tags) yang ada di pojok kanan atas ItemTemplates. Klik 'End Templates Editing'. Cek Properties 'DataKeyNames' yang ada di GridView apakah udah ada nama field yang akan di select harus field ID yang ada primaryKey. Misal, Pada properties 'DataKeyNames' yang ada di GridView pilih Title.

7. Tambahkan FormView di webForm anda, klik panah kecil(smart tags) yang ada di pojok kanan atas control FormView. Pada ChooseDataSoure, Pilih''. Lakukan Setting Konfigurasi Data Source. Misal dalam kasus ini, yang di-select adalah semua field yang ada di dalam tabel catalog. Kemudian, tekan tombol 'where'. Pilih Column 'Title'. Pada pilihan Source, pilih 'Control'. Kemudian, pada ControlID pilih 'GridView1'. Tekan tombol Add. Lalu, tekan tombol OK. Klik Tombol Next. Kemudian klik Tombol Finish.

8. klik panah kecil(smart tags) yang ada di pojok kanan atas control gridView. Pilih 'Edit Templates'. Lalu pada 'ItemTemplates', Klik 2x pada linkButton Edit, ketik source code brikut ini:
"FormView1.ChangeMode(FormViewMode.Edit)" (tanpa tanda petik ketika anda mengetik source code itu).

9. Kemudian anda running. Ketika anda melakukan proses Update pada formView maka data di gridView akan berubah tapi tidak nampak perubahannya. Caranya gimana supaya nampak perubahannya di GridView.
Jawabannya adalah: pada file ***.aspx.vb (file itu mrupakan tempat dimana anda mengetik kode no 8). Mengerti kah? Pada 'className' (pilihan yang ada di sebelah kiri atas file vb itu), pilih 'FormView1'. Pada 'MethodName' (pilihan yang ada di sebelah kanan atas file vb itu), pilih 'ItemUpdated'. Kemudian ketik source code berikut ini:
"GridView1.DataBind()"(hilangkan tanda petiknya).

Selamat Mencoba