Ada berbagai cara untuk menampilkan data secara tabulasi. Jika program tersebut database, maka programmer sering memakai DbGrid. Ada cara lain untuk menampilkan data secara tabulasi, yaitu dengan menggunakan TStringGrid. Kelebihan dari TStringGrid adalah gampang di-kustomisasi. Kita dapat merubah warna, font atau bisa juga dipakai untuk edit data secara berkelompok, misal Purchasing Order atau data-data lainnya yang membutuhkan master-detil.
Pada artikel ini, saya mengotak-atik TStringGrid agar dapat memberikan tampilan yang lumayan profesional.
Letakkan satu string grid pada form.
Kita letakkan kode program berikut di event OnCreate milik form.
StringGrid1->RowCount = 2;
StringGrid1->ColCount = 3;
StringGrid1->Cells[0][0] = "No";
StringGrid1->ColWidths[0] = 30;
StringGrid1->Cells[1][0] = "Nama Dokter";
StringGrid1->ColWidths[1] = 200;
StringGrid1->Cells[2][0] = "Jabatan";
StringGrid1->ColWidths[2] = 100;
Sekarang kita isi sel-sel TStringGrid yang bukan header. Masukkan kode program dibawah ini langsung dibawah kode program diatas:
StringGrid1->Cells[1][1] = "dr. Joni Bergundy";
StringGrid1->Cells[2][1] = "Ahli Bedah";
StringGrid1->Cells[1][2] = "dr. Juminten Kloaka";
StringGrid1->Cells[2][2] = "Ahli Anestesi";
StringGrid1->Cells[1][3] = "dr. Lanang Branang, SpAnd";
StringGrid1->Cells[2][3] = "Andrologi";
Kita belum puas! Yuk otak-atik lagi. Kita akan buat agar tulisan header berada di tengah-tengah sel, sedangkan diluar header rata kiri.
Ketik kode program berikut di bagian OnDrawCell:
void __fastcall TForm2::sg2DrawCell(TObject *Sender, int ACol, int ARow, TRect &Rect,
TGridDrawState State)
{
StringGrid1->Canvas->FillRect(Rect);
if (ARow == 0) {
::DrawText(StringGrid1->Canvas->Handle,
StringGrid1->Cells[ACol][ARow].c_str(), -1, &Rect,
DT_CENTER | DT_VCENTER | DT_SINGLELINE );
} else
::DrawText(StringGrid1->Canvas->Handle,
StringGrid1->Cells[ACol][ARow].c_str(), -1, &Rect,
DT_LEFT | DT_VCENTER | DT_SINGLELINE );
}
Rect adalah isi dari sel. Kita perlu memberitahukan pada Windows isi dari sel tadi setelah menyimpannya terlebih dahulu.
StringGrid1->Canvas->FillRect(Rect);
Kita siapkan tempat sebesar isi text (c_str()):
StringGrid1->Cells[ACol][ARow].c_str()
Perintah berikut digunakan text di dalam sel rata kiri:
DT_LEFT | DT_VCENTER | DT_SINGLELINE
sedangkan yang ini untuk tampil di tengah-tengah sel:
DT_CENTER | DT_VCENTER | DT_SINGLELINE
hasil akhir sementara form akan seperti ini:
Kita iseng lagi. Kita buat agar header berwarna merah. Bagaimana? Gampang! Tapi pertama-tama kita perlu tahu. Secara default, property DefaultDrawing adalah true. Artinya, Windows sendiri yang menggambar untuk kita. Tapi karena sekarang kita ingin setting yang lain, maka kita akan membuatnya menjadi false. Dengan demikian, tanggung jawab menggambar terletak di pundah programmer.
__fastcall TForm2::TForm2(TComponent* Owner)
: TForm(Owner)
{
sg2->DefaultDrawing = false;
}
Apabila Anda nekat menjalankan program setelah mengganti DefaultDrawing menjadi false, maka Anda akan mendapati form kita menjadi seputih salju seperti ini:
Jangan kuatir. Otak-atik kita memang belum selesai.
if (State.Contains(gdFixed))
{
StringGrid1->Canvas->Brush->Color = clRed;
StringGrid1->Canvas->Font->Color = clWhite;
StringGrid1->Canvas->Font->Name = "TAHOMA";
StringGrid1->Canvas->Font->Style = TFontStyles() << fsBold;
Frame3D(StringGrid1->Canvas, Rect, clBtnHighlight, clBtnShadow, 1) ;
StringGrid1->Canvas->FillRect(Rect);
} else if (State.Contains(gdSelected))
{
StringGrid1->Canvas->Brush->Color = clHighlight;
StringGrid1->Canvas->Font->Color = clYellow;
StringGrid1->Canvas->Font->Style = TFontStyles();
StringGrid1->Canvas->FillRect(Rect);
} else {
StringGrid1->Canvas->Brush->Color = sg2->Color;
StringGrid1->Canvas->Font->Color = sg2->Font->Color;
StringGrid1->Canvas->Font->Style = TFontStyles();
StringGrid1->Canvas->FillRect(Rect);
}
Ada tiga keadaan grid pada TStringGrid, yaitu: gdFixed, gdSelected, dan diluar dari keduanya. Dari kata-katanya sudah terlihat maksudnya. gdFixed adalah pemberitahuan bahwa sekarang sel yang disentuh oleh TStringGrid adalah bagian header. Sedangkan gdSelected adalah bagian saat suatu sel tersorot oleh pointer.
Saat sel header terpilih. Kita mengubah font menjadi bold:
StringGrid1->Canvas->Font->Style = TFontStyles() << fsBold;
serta mengubah jenis tulisan, warna background sel dan warna font:
StringGrid1->Canvas->Brush->Color = clRed;
StringGrid1->Canvas->Font->Color = clWhite;
StringGrid1->Canvas->Font->Name = "TAHOMA";
sedangkan pada saat tersorot. Kita mengubah font dari bold menjad tulisan biasa:
StringGrid1->Canvas->Font->Style = TFontStyles();
Kode berikut:
Frame3D(StringGrid1->Canvas, Rect, clBtnHighlight, clBtnShadow, 1);
Akan membuat efek 3D di garis-garis TStringGrid. Untuk mengetahui efeknya, coba hilangkan kode program ini.
Bentuk form terakhir akan menjadi seperti dibawah ini:
Nah, sekarang tinggal satu lagi. Terkadang kita juga menginginkan agar pointer sorot memilih secara baris (memanjang) atau cuma satu sel. Tampilan ini dapat kita lakukan dengan mengotak-atik property options. Gunakan kode berikut ini agar pointer memilih baris:
StringGrid1->Options << goRowSelect;
dan ubah menjadi seperti ini agar dapat memilih hanya sel tertentu saja:
StringGrid1->Options >> goRowSelect;
0 comments:
Posting Komentar