Cell Major dan Minor dalam DataGridView

Merancang User Interface(UI) digambar akan terasa indah dan fungtional. Banyak fungsi dan ide yang ingin diwujudkan. Dan pada saat mengimplentasikannya baru kita tahu itu tidak mudah. Rencana perjalanan terhalang tembok besar.

Melihat gambar dibawah. Ada sebuah DataGridView yang memiliki cell dengan dua data. Ditambah lagi data minor-nya memiliki warna yang berbeda. Secara rancangan konsep UI memang menarik, mengelompokkan data dalam satu cell. Sayangnya control DataGridView tidak dibuat seperti itu. Ia rancang untuk kebutuhan umum saja.

Form

Kita akan coba membuat cell yang kita impikan itu dalam WinForm. Oleh karena itu kita siapkan sebuah Form yang isinya sebuah DataGridView. Sederhana saja, karena kita fokus didalam Grid-nya.

Column

Untuk kebutuhan rancangan ini, yang kita perlukan adalah custom control untuk cell-nya. Dan kita buat class ini agar WinForm Designer dan DataGridView dapat mengenali custom control yang akan dibuat.

< VB.Net >

< C# >

Cell

Dari banyak cara, kita pilih yang paling sederhana membuatnya. Yaitu kita turunkan dari DataGridViewImageCell. Karena kita tinggal mengambar dengan data yang ada. Kode itu ada di fungsi Paint.

Yang dilakukan fungsi itu adalah mengambar dua data dan meletakkannya pada posisi yang sesuai dengan rancangan yang di inginkan. Dan untuk minor data, kita juga perlu membuat font-nya lebih kecil dan diberikan warna yang berbeda. Karena fokus kita adalah untuk menampikan data, tentu banyak kode yang tidak ada disana. Seperti untuk fungsi soft, property untuk merubah warna minor-nya dan sebagainya.

Dan sini juga kita ada masalah untuk memasukkan dua data tersebut dalam satu cell-nya. Ini karena DataGridView memang tidak dirancang untuk menerima multi data.

Untuk mempersingkat tulisan ini, maka kita buat agar custom control ini menerima data berupa String yang merupakan gabungan dua data yang dipisahkan oleh karakter |. Hasil dari itu akan dimasukkan kedalam variable majorValue dan minorValue.

< VB.Net >

< C# >

Pengunaan

Tentu pembaca ini tahu bagaimana memasukkan data itu kedalam custom control kita itu. Maka dari itu coba perhatikan kode pada fungsi GetData. Yang berbeda disini adalah kita menambahkan column pada DataTable yang mengabungkan data dari column D1P dan D1S. Karena ini contoh saja kita buat ini secara manual, dalam implementasi aslinya data tersebut dari database dan pengabungan datanya dilakukan lewat query.

Untuk custom control cell-nya, lihat pada fungsi InitGrid. Disini kita perintahkan agar DataGridView tidak membuat column-nya secara automatis. Oleh karena itu kita setting column dengan custom control kita. Disini juga kita beritahukan agar column-nya mengambil data (lewat property DataPropertyName) yang sesuai dengan data yang akan kita masukkan kedalam DataSource.

< VB.Net >

< C# >

Penutup

Membebaskan sebebas-bebasnya perancang UI, kadang bisa membuat programmer-nya mengalami hambatan yang tidak sedikit. Tentu ada kompromi atas solusi untuk mewujudkannya dan kadang waktu tidak berpihak. Jadi jangan heran bila membuat software kadang suka terlambat oleh hal seperti ini.

Dalam membuat menyelesaikan custom control akan memerlukan waktu dan kreatifitasan, terutama bila ingin hasilnya lengkap. Dengan begitu hal tersebut harus juga jadi bahan pertimbangan ketika membuat estimasi waktu dan biaya pembuatan sebuah software.

Perhatian! Code yang ditampilkan dalam tulisan ini merupakan ilustrasi dari yang ingin dipaparkan dan bukan production ready code. Sudah banyak kejadian karena asal meng-copy-and-paste tanpa mengerti code yang diambil itu ke dalam production. Selain itu perlu ada tambahan code dan test sebelum siap untuk digunakan secara utuh.