TDataGrid

TDatagrid adalah kontrol penting dalam membangun aplikasi Web yang kompleks. Ia menampilkan data dalam format tabular dengan baris (juga disebut item) dan kolom. Baris dibuat dengan sel, sementara kolom mengatur bagaimana sel harus ditampilkan berdasarkan kaitannya dengan kolom. Data yang ditetapkan melalui DataSource atau DataSourceID terikat pada baris dan mengisi kontek ke sel.

TDataGrid sangat interaktif. Para pengguna dapat mengurut data sepanjang kolom yang ditetapkan, mengendalikannya melalui halaman data yang berbeda, dan melakukan aksi, seperti mengedit dan menghapus, pada baris data.

Baris TDataGrid dapat diakses melalui properti Items. Baris (item) bisa berupa salah satu dari beberapa mode: browse, mengedit dab memilih, yang mempengaruhi bagaimana sel dalam bariis ditampilkan. Untuk mengubah mode item, modifikasi EditItemIndex atau SelectedItemIndex. Catatan, jika item dalam mode edit, maka memilih item ini tidak terpengaruh.

Kolom

Kolom pada data grid menentukan bagaimana sel terkait ditampilkan. Sebagai contoh, sel yang dikaitkan dengan TBoundColumn ditampilkan secara berbeda tergantung dari modenya. Sebuah sel ditampilkan sebagai teks statis jika sel dalam mode browse, kotak teks jika dalam mode edit, dan seterusnya.

PRADO menyediakan lima tipe kolom:

TBoundColumn menghubungkan sel dengan field data dan menampilkan sel berdasarkan modenya.
TLiteralColumn menghubungkan sel dengan field data spesifik dan menampilkan sel dengan teks statis.
TCheckBoxColumn menghubungkan sel dengan field data spesifik dan menampilkan kotak centang dalam setiap sel yang kondisi centangnya ditentukan oleh nilai field data.
TDropDownListColumn menghubungkan sel dengan field data spesifik dan menampilkan sel berdasarkan modenya. Jika dalam mode edit, sel akan ditampilkan dengan TDropDownList.
THyperLinkColumn menampilkan hiperlink dalam sel yang URL dan judulnya bisa berupa secara statis ditetapkan atau terikat ke beberapa field data.
TEditCommandColumn menampilkan tombol perintah edit/update/cancel dalam sel untuk menyatakan item yang berada di dalamnya.
TButtonColumn menampilkan tombol perintah dalam sel.
TTemplateColumn menampilkan sel berdasarkan pada template berbeda yang didefinisikan untuknya.

Gaya Item

TDataGrid mendefinisikan gaya yang diterapkan pada itemnya. Sebagai contoh, AlternatingItemStyle diterapkan untuk mengganti item (item 2, 4, 6, dll.) Melalui properti ini, seseorang dapat menyetel field gaya CSS atau kelas CSS untuk item-item tersebut.

Gaya item diterapkan dalam cara hirarkis. Gaya dalam hirarki lebih tinggi akan diturunkan dari gaya dalam hirarki lebih rendah. Mulai dari hirarki terendah, gaya item termasuk gaya item itu sendiri, ItemStyle, AlternatingItemStyle, SelectedItemStyle, dan EditItemStyle. Oleh karena itu, jika warna latar belakang disetel merah dalam ItemStyle, EditItemStyle juga akan memiliki warna latar belakang merah, kecuali dinyatakan secara eksplisit ke nilai yang berbeda.

Event

TDataGrid menyediakan beberapa event untuk menjembatani manipulasi item datanya,

OnItemCreated - muncul setiap kali item baru saja dibuat. Ketika event muncul, data dan kontrol anak keduanya tersedia bagi item baru.
OnItemDataBound - muncul setiap kali item selesai menyatukan data. Ketika event muncul, data dan kontrol anak keduanya tersedia untuk item, dan item telah selesai menyatukan data dari dirinya sendiri dan seluruh kontrol anaknya.
OnItemCommand - muncul ketika kontrol anak pada beberapa item (seperti TButton) memunculkan event OnCommand.
command events - muncul saat event kontrol anak OnCommand mempunyai nama perintah spesifik,
- OnSelectedIndexChanged - jika nama perintah adalah select.
- OnEditCommand - jika nama perintah adalah edit.
- OnDeleteCommand - jika nama perintah adalah delete.
- OnUpdateCommand - jika nama perintah adalah update.
- OnCancelCommand - jika nama perintah adalah cancel.
- OnSortCommand - jika nama perintah adalah sort.
- OnPageIndexChanged - jika nama perintah adalah page.

Menggunakan TDataGrid

Kolom yang Dibuat Secara Otomatis

TDataGrid standarnya akan membuat sebuah daftar kolom berdasarkan struktur data terikat. TDataGrid akan membaca baris pertama data, menguraikan nama field dari baris, dan mengkonstruksi kolom untuks setiap field. Setiap field adalah tipe TBoundColumn.

Contoh berikut menampilkan daftar informasi produk komputer menggunakan TDataGrid. Kolom secara otomatis dibuat. Perhatikan bagaimana gaya item ditetapkan dan diturunkan. Data dipopulasi ke dalam datagrid menggunakan kode berikut yang umum diantara kebanyakan aplikasi datagrid,

public function onLoad($param) { parent::onLoad($param); if(!$this->IsPostBack) { $this->DataGrid->DataSource=$this->Data; $this->DataGrid->dataBind(); } }

Kolom Ditetapkan secara Manual

Menggunakan kolom yang dibuat secara otomatis memberikan cara cepat melihat data tabular. Dalam aplikasi sebenarnya, kolom yang dibuat secara otomatis sering tidak mencukupi karena para pengembang tidak memiliki cara mengkustomisasi penampilannya. Kolom yang dibuat secara manual jauh lebih diinginkan.

Untuk menetapkan kolom secara manual, setel AutoGenerateColumns ke false, dan tetapkan kolom dalam template seperti berikut,

<com:TDataGrid ...> <com:TBoundColumn DataField="name" .../> <com:TBoundColumn DataField="price" .../> <com:TEditCommandColumn ...> ... </com:TDataGrid>

Catatan, jika AutoGenerateColumns adalah true dan di sana ditetapkan kolom secara manual, kolom yang dibuat secara otomatis akan diterapkan ke kolom yang ditetapkan secara manual. Catat juga, properti Columns datagrid hanya berisi kolom yang ditetapkan secara manual dan bukan yang secara otomatis dibuat.

Contoh berikut menggunakan kolom yang ditetapkan secara manual untuk memperlihatkan daftar informasi buku,

Book title - ditampilkan sebagai hiperlink mengarah ke halaman buku amazon.com terkait. THyperLinkColumn dipakai.
Publisher - ditampilkan sebagai bagian teks menggunakan TBoundColumn.
Price - ditampilkan sebagai bagian teks menggunakan TBoundColumn dengan output berformat string dan gaya dikustomisasi.
In-stock or not - ditampilkan sebagai kotak centang menggunakan TCheckBoxColumn.
Rating - ditampilkan sebagai gambar menggunakan TTemplateColumn yang membolehkan kebebasan maksimum dalam menetapkan konten sel.

Perhatikan bagaimana gaya item (baris) dan kolom bekerja sama untuk mempengaruhi penampilan sel dalam datagrid.

Berinteraksi dengan TDataGrid

Selain kaya fungsionalitas penyajian data seperti didemonstrasikan dalam bagian sebelumnya, TDataGrid juga sangat interaktif bagi pengguna. Pemakaian impor TDataGrid adalah mengedit atau menghapus baris data. TBoundColumn dapat menyesuaikan penyajian sel terkait berdasarkan mode item datagrid. Ketika item dalam mode browse, sel ditampilkan dengan teks statis; ketika item ditampilkan dalam mode edit, kotak teks ditampilkan untuk menampung input pengguna. TDataGrid menyediakan TEditCommandColumn untuk mengalihkan mode item. Sebagai tambahan, TButtonColumn menawarkan kepada para pengembang fleksibilitas dari pembuatan tombol bebas untuk berbagai interaksi pengguna.

Contoh berikut memperlihatkan bagaimana untuk membuat tabel informasi buku sebelumnya menjadi interaktif. Ia membolehkan pengguna untuk mengedit dan menghapus item buku dari tabel. Dua kolom tambahan dipakai dalam contoh untuk membolehkan interaksi para penggunak dengan datagrid: TEditCommandColumn dan TButtonColumn. Sebagai tambahan, TDropDownListColumn mengganti TTemplateColumn sebelumnya untuk membolehkan pengguna memilih peringkat dari daftar dropdown. Catatan, Ini juga memungkinkan untuk menggunakan TTemplateColumn guna menyelesaikan tugas yang sama.

Pengurutan

TDataGrid mendukung pengurutan itemnya yang terkait dengan kolom tertentu. Untuk menghidupkan pengurutan, setel AllowSorting ke true. Ini akan mengubah header kolom menjadi tombol yang bisa diklik jika properti SortExpression tidak kosong. Ketika para pengguna mengklik pada tombol header, event OnSortCommand akan dimunculkan. Para pengembang dapat menulis pengendali guna merespon perintah pengurutan dan mengurut data berdasarkan SortExpression yang ditetapkan dalam kolom terkait.

Contoh berikut mengubah datagrid dalam Contoh 2 menjadi yang bisa diurutkan. Para pengguna dapat mengklik pada tombol link yang ditampilkan dalam setiap kolom, dan data akan diurut dalam urutan membesar sepanjang kolom tersebut.

Lembaran

Ketika berhadapan dengan dataset besar, lembaran sangat membantu dalam mengurangi ukuran halaman dan kompleksitasnya. TDataGrid disertai lembaran yang membolehkan para pengguna menetapkan di halaman mana data ingin mereka lihat. Lembaran bisa dikustomisasi melalui PagerStyle. Sebagai contoh, PagerStyle.Visible menentukan apakah lembaran terlihat atau tidak; PagerStyle.Position menunjukan di mana lembaran ditampilkan; dan PagerStyle.Mode menetapkan tipe lembaran apa yang ditampilkan, numerik atau kata berikutnya-sebelumnya.

Untuk menghidupkan lembaran, setel AllowPaging ke true. Jumlah baris data yang ditampilkan dalam halaman ditetapkan oleh PageSize, sementara indeks (berbasis-nol) pada halaman yang saat ini terlihat bagi para pengguna adalah dengan CurrentPageIndex. Ketika para pengguna mengklik pada tombol lembar, TDataGrid memunculkan event OnPageIndexChanged. Biasanya, pengendali event ditulis seperti berikut,

public function pageIndexChanged($sender,$param) { $this->DataGrid->CurrentPageIndex=$param->NewPageIndex; $this->DataGrid->DataSource=$this->Data; $this->DataGrid->dataBind(); }

Contoh berikut menghidupkan fungsionalitas lembar dari datagrid yang ditampilkan dalam Contoh 1. Dalam contoh ini, anda dapat menyetel berbagai gaya lembar secara interaktif untuk melihat bagaimana pengaruh tampilan lembar halaman.

Lembar Kustom

Fungsionalitas lembar halaman yang ditampilkan di atas memerlukan pengambilan seluruh data ke dalam memori, meskipun hanya sebagian darinya ditampilkan dalam sebuah halaman. Untuk dataset besar, ini tidak efisien dan mungkin tidak selalu layak. TDataGrid menyediakan lembar kustom untuk memecahkan masalah ini. Lembar kustom hanya memerlukan sebagian data untuk ditampilkan kepada pengguna akhir.

Untuk menghidupkan lembat kustom, setel AllowPaging dan AllowCustomPaging ke true. Beritahu TDataGrid jumlah item data (baris) yang tersedia dengan menyetel VirtualItemCount. Dan merespon ke event OnPageIndexChanged. Dalam pengendali event, gunakan properti NewPageIndex atas parameter event untuk megnambil lembar baru data dari sumber data. Untuk MySQL database, ini bisa dikerjakan dengan menggunakan klausul LIMIT dalam pernyataan SQL select.

Memperluas TDataGrid

Selain turunan kelas tradisional, kemampuan diperluas TDataGrid dikembangkan terutama melalui komponen kolom datagrid. Sebagai contoh, seseorang mungkin ingin menampilkan sebuah kolom bergambar. Dia dapat menggunakan TTemplateColumn untuk menyelesaikan tugas ini. Solusi yang lebih baik adalah mengembangkan komponen kolom gambar pekerjaan tersebut bisa dipakai ulang dengan mudah dalam proyek lain.

Semua komponen kolom datagrid harus diturunkan dari TDataGridColumn. Metode utama yang perlu diganti adalah initializeCell() yang membuat konten untuk sel dalam kolom terkait. Karena setiap sel juga dalam sebuah item (baris) dan item dapat memiliki tipe berbeda (seperti Header, AltneratingItem, dll.), konten berbeda bisa dibuat berdasarkan tipe item. Untuk contoh kolom gambar, seseorang dapat membuat kontrol TImage di dalam sel dalam item dari tipe Item dan AlterantingItem.

class ImageColumn extends TDataGridColumn { ... public function initializeCell($cell,$columnIndex,$itemType) { parent::initializeCell($cell,$columnIndex,$itemType); if($itemType==='Item' || $itemType==='AlternatingItem') { $image=new TImage; // ... kustomisasi gambar $cell->Controls[]=$image; } } }

Dalam initializeCell(), jangan lupa untuk memanggil implementasi leluhur, karena ia menginisialisasi sel dalam item dari tipe Header dan Footer.