GridControl Basic Design Bag. 1

Salah satu component/control yang menarik buat saya adalah GridControl, untuk merancang tampilan di dalam GridControl di bagi menjadi beberapa tampilan, yaitu :

1. GridView
2. CardView
3. BandedGridView
4. AdvBandedGridView
5. LayoutView

disini saya hanya menjelaskan untuk GridView dan AdvBandedGridView saja, untuk yang lainnya sebenarnya sama saja caranya, hanya yang membedakan bentuk tampilan saja


 GridView

Sebagai Latihan, buatlah tambahan form windows di project yang sudah ada caranya seperti berikut :

seperti gambar di atas, tambahkan windows from ke dalam project kemudian tambahkan beberapa control ke dalam sehingga akan membentuk seperti gambar berikut :

Langkahnya adalah sebagai berikut :
1. Tambahkan PanelControl --> nama otomatis menjadi Panelcontrol1
    pada propertiesnya isikan Dock dengan Bottom, sesuaikan tingginya untuk tombol button nantinya
2. Tambahkan PanelControl  --> nama otomatis menjadi Panelcontrol2
    Klik PanelControl1 tersebut kemudian pada propertiesnya isikan Dock dengan Fill
3. Tambahkan SimpleButtom di dalam Panelcontrol1  --> nama otomatis menjadi SimpleButtom1
    di Properties SimpleButtom1 isikan Dock dengan Right
4. Tambahkan SimpleButtom di dalam Panelcontrol1  --> nama otomatis menjadi SimpleButtom2
    di Properties SimpleButtom2 isikan Dock dengan Fill
5. Tambahkan GridControl --> nama otomatis menjadi GridControl1
    di Properties GridControl1 isikan Dock dengan Fill

Tabel

<><><><>

<><><><>

<><><><>

<><><><>

<><><><>

Control	Properties
	Dock	Name
Panelcontrol	Bottom	Panelcontrol1
Panelcontrol	Fill	Panelcontrol2
Simplebuttom	Right	Simplebuttom1
Simplebuttom	Fill	Simplebuttom2
GridControl	Fill	GridControl1

sekarang kita sudah sampai menambahkan control kedalam form, selanjutnya adalah menambahkan kolom-kolom kedalam grid tersebut.

pada GridControl1 tersebut terdapat tombol Retrieve Detail dan Run Designer, karena kita ingin menambahkan kolom-kolom pada gridcontrol tersbut, maka klik tombol Run Designer

Run Designer

kita sudah masuk kedalam Run Designer untuk GridControl1 seperti gambar di atas, selanjutnya kita akan sedikit setting untuk View, arahkan pada OptionsView , seperti gambar di bawah ini :

Rubahlah nilai dari beberapa properties seperti pada gambar diatas (ada tanda bintang merah), biasanya jika ada properties yang di rubah nilai defaultnya maka nilai yang di rubah hurufnya menjadi lebih tebal(Bold).

Selanjutnya klik menu Columns yang ada di sebelah kiri, pada bagian ini ada Tombol Add, klik 3 kali untuk menambahkan kolom sebanyak tiga kolom, isikan masing-masing kolom dengan Judul(Caption) dan Fieldname-nya seperti gambar berikut :

Penjelasan sedikit :
Caption adalah Judul pada kolom, sehingga nantinya kita akan melihat pada kolom tersebut adalah yang tertera pada Caption ini.
Fieldname adalah identitas dari kolom tersebut jika kita nanti akan mengisi kolom tersebut dengan data (contoh pada bab berikutnya)

Setelah itu selanjutnya kita ke Layout, di dalam layout ini kita bisa memperbesar ukuran lebar dari kolom tersebut, di sesuaikan dengan panjang karakter data yang akan di isi nantinya, seperti gambar berikut :

nantinya tampilan dari Grid yang kita design akan seperti ini, seperti dijelaskan di atas, temen-temen bisa merubah lebar kolom disini, jika sudah selesai jangan lupa tekan tombol Apply, setelah itu close Run Designer-nya, maka hasilnya akan nampak seperti di bawah ini :

Baiklah, untuk Bagian 1 ini cukup sampai disini dulu, temen-temen bisa berkreasi di didalam Run Designer disesuaikan dengan kebutuhan program


Salam