Delphi 7 – CXGrid tabel dalam tabel

CXGrid Delphi 7

Skenarionya saya memiliki database proyek yang berisi 1 tabel “proyek” dan 1 tabel “item” serta 1 tabel relasi yang saya beri nama tabel “nilai” dimana tiap proyek memiliki banyak item pekerjaan, dan saya akan membuat mengatur grid agar bila proyek di klik maka item proyek akan tampil dalam bentuk tabel drop down.

Langkah pertama buat tabel lihat pada gambar di bawah.

CREATE DATABASE proyek;
CREATE TABLE proyek (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    proyek VARCHAR (200) 
);
CREATE TABLE item (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    item VARCHAR (200) 
);
CREATE TABLE nilai (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    proyek INTEGER,
    item INTEGER
);

Skenario tabel telah selesai. Saya beralih ke pembuatan Form delphi, pada Form utama, sebelum beralih ke tahap yang lebih hebat ada baiknya saya atur tataletak dan properties komponen yang digukan agar terlihat lebih menarik. Untuk lebih jelasnya lihat pentunjuk pada tabel ini.

Notab palettekomponenPropertiesnilai
1.standarPanelalignalLeft
bevelOutherbvNone
caption
1.1.standarGroupBox alignalTop
captionProyek
namegrp1
1.2.standarGroupBox alignalTop
captionItem
namegrp2
1.3. standarGroupBox align alTop
captionItem Proyek
namegrp3
1.1.1.standarEditnameedtproyek
1.1.2.standarButtoncaption
simpan
name btnproyek
1.2.1.standarEditnameedtitem
1.2.1.standarButtoncaptionsimpan
namebtnitem
1.3.1.standarLabelcaptionproyek
1.3.2.standarLabelcaptionitem
1.3.3.standarComboBoxnamecbproyek
1.3.4.standarComboBoxnamecbitem
1.3.5.standarButtoncaptionsimpan
namebtnitemproyek
2.Zeos Access
ZConnectionDatabaseproyek.db
protocolsqlite-3
connectedTrue
namedb1
3.Zeos AccessZQueryconnectiondb1
namezproyek
SQLkode proyek
activetrue
4.Zeos AccessZQueryconnectiondb1
name zitem
SQLkode item
activetrue
5.Zeos AccessZQueryconnectiondb1
namezitemproyek
SQLkode nilai
activetrue
6.Data AccessDataSourceDataSetzProyek
namedProyek
7.Data AccessDataSourceDataSetzItemProyek
namedItemProyek
8. Dev Express cxGridalignalClient
namecxGrid1

untuk devExpress cxGrid akan saya skenariokan melalui gambar biar lebih dapat fahamnya, dan/atau kamu dapat sesuaikan form sesuai gambar dibawah ini. dan saya menganggap tidak ada masalah dalam penulisan script CRUD, jadi saya tidak akan membahasnya di sini. 🙂 saya cuma menskenariokan bahwa saya memiliki komponen yang dapat melakukan proses CRUD tersebut. 🙂

Layout Skenario Form
//kode proyek
SELECT * FROM proyek
//kode item
SELECT * FROM item
//kode nilai
SELECT nilai.id,nilai.proyek,item.item 
FROM nilai
INNER JOIN item ON (item.id=nilai.item) 

*pengaturan databate pada Zeoz Access – ZConnection akan berbeda pada tiap DBMS. Pada Skenario saat ini saya menggunakan SQLite3.

**pada pengaturan database ZConnection untukSQLite3 kamu bisa menuliskan nama database tanpa menulis direktori database dengan syarat database berada pada direktori yang sama dengan aplikasi yang dibuat


cxGrid-langkah 1

lihat cxGrid

Pada pojok kanan bawah terdapat beberapa tombol tekan tombol costumize untuk pengaturan lanjutan cxGrig dan form costumize cxGrid akan terbuka. lihat gambar selanjutnya dan ikuti petunjuknya.

cxGrid-langkah 2
No.komponenpropertiesnilai
1.cxgridDBTableViewnamecxgrdbtblvw1
datasourcedProyek
columnAutoWidthTrue
GroupByBoxFalse

setelah datasource terhubung dengan komponen DataConnection dProyek, Tombol [Retrieve Field] akan aktif –tekan tombol tersebut. Saat ini tabel proyek pada data base telah terhubung dengan cx Grid, pada saat ini saya telah berhasil menghungkan 1 tabel dengan cxGrid dan saya akan melanjutkan menghubungkan tabel ke 2 sebagai anak dari tabel pertama, ikuti langkah berikutnya.

cxGrid-langkah 3
cxGrid-langkah 4

ikuti gambar ini pilih cxgrdlvlGrid1Level1 lalu tekan tombol Add Level, level baru akan muncul dibawah level sebelumnya. Lihat gambar berikutnya, klik kanan level baru tersebut pilih [Create View][DB Table]. dan cxgrdbtblvw2 akan terbentuk

Langkah 5 akan terlihat sama dengan langkah2, untuk pengaturan properties komponennya dapa dilihat pada tabel setelah gambar langkah 6

cxGrid-langkah 5
cxGrid-Langkah 6
No.KomponenPropertiesNilai
1. cxgridDBTableViewname cxgrdbtblvw2
DataSourcedItemProyek
DetailKeyFieldNamesproyek
KeyFieldNamesproyek
Master KeyFieldNamesid
columnAutoWidthTrue
GroupByBoxFalse

Seperti pada langkah 2 setelah datasource pada cxgrdbtblvw2 terhubung dengan komponen DataConnection dItemProyek, Tombol [Retrieve Field] akan aktif

Hasil SKenario cxGrid Multi Tabel

Tinggalkan komentar