Cara Membuat Warna Baris Selang seling Di cxGrid

Untuk mempercantik tampilan cxGrid, kita bisa melakukan perubahan warna baris-barisnya. Kita bedakan warna antara baris ganjil dan genap. Untuk melakukan ini, ikuti langkah-langkah berikut :

1.       Masukkan komponen cxGrid

-          Set alignmentnya menjadi alTOP

-          Ganti viewnya yang tadinya DBTable menjadi Table (jika anda akan langsung mengkases data ke database bisa tetap menggunakan DBTable), namakan dengn : cxGridTableGrid1TableView1

-          Tambahkan tiga kolom mis :  Nama Barang, Harga

2.       Masukkan komponen cxStyleRepository

-          Klik Kanan > Edit

-          Tambahkan dua style dengan klik tombol Add

-          Namakan kedua style tersebut dengan cxStyleRepEven dan cxStyleRepOdd

-          Setting warna baris dari masing-masing style tersebut mis untuk cxStyleRepEven Color > clInactiveBorder, cxStyleRepOdd Color > clMoneyGreen

-          Klik tombol close

3.       Klik table yang ada di cxGrid

-          Expand property Style dengan klik tanda  +

-          Set style ContentEvent, pilih cxStyleRepEven

-          Set style ContentOdd, pilih cxStyleRepOdd

4.       Untuk meliha hasilnya, kita harus mengisi table tersebut dengan data. Kita akan isi datanya pada saat form ini dicreate. Untuk melakukan langkah berikut :

-          Double klik di form untuk mengarahan ke method formcreate()

-          Isikan baris kode berikut ini :

with cxGridTableGrid1TableView1 do

  begin

    DataController.RecordCount := 5;

    DataController.Values[0,0] := 'Biskuat';

    DataController.Values[0,1] := '500';

    DataController.Values[1,0] := 'Aqua Galon';

    DataController.Values[1,1] := '11500';

    DataController.Values[2,0] := 'Beng-beng';

    DataController.Values[2,1] := '500';

    DataController.Values[3,0] := 'Sabun Lux';

    DataController.Values[3,1] := '1500';

    DataController.Values[4,0] := 'Biskuit';

    DataController.Values[4,1] := '22500';

  end;

5.       Lihat tampilannya

Selamat berkreasi