Mengubah warna baris di DataGrid VB.net

Membangun aplikasi software tidak hanya diperlukan keahlian dalam melakukan coding, akan tetapi perlu diperhatikan juga masalah tampilan dan user interfacenya.
Pada kesempatan kali akan dipaparkan salah satu cara memperindah tampilan program.
Pembahan kali ini jatuh pada properti DataGridView VB.net, khususnya VB.net 2008.


Sesuai dengan kata pepatah, "banyak jalan menuju roma", sama juga halnya dengan pembuatan sebuah program. Banyak sekali cara dan trik berbeda yang diterapkan oleh masing-masing programmer.

Berikut ini cara yang cukup sederhana dan mudah dimengerti dalam mengisikan data di datagrid dan mengubah warna disetiap baris genap dan garis ganjil.



Jalankan VB.Net 2008, pilih File | New | Project

Pada kolom sebelah kiri, pilih Visual basic, kemudian pilih Windows Forms Application. Setelah itu tekan Next.

Maka akan muncul tampilan windows yang barus, kemudian siapkan properti sebagai berikut :
DatagridView 1x, Label 2x, Button 2x.
Kemudian atur tampilan seperti pada gambar ini :

Ketikan kode berikut ini pada jendela code

Public Class Form1
    Private ClrDialog As New ColorDialog
    Private BarisGenap = Color.AliceBlue
    Private BarisGanjil = Color.LightBlue

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'menghilangkan row header
        dg.RowHeadersVisible = False
        'agar ketika baris di datagrid diklik 1x melalui mouse atau kursor, satu baris penuh yang pilih, bukan per kolom
        dg.SelectionMode = DataGridViewSelectionMode.FullRowSelect
        'agar ketika baris di datagrid diklik 1x melalui mouse atau kursor, tidak ada warna backgroud
        dg.DefaultCellStyle.SelectionBackColor = Color.Transparent
        'agar ketika baris di datagrid diklik 1x melalui mouse atau kursor, warna tulisan yang berubah
        dg.DefaultCellStyle.SelectionForeColor = Color.Chocolate

        'Membuat Header per kolom
        dg.Columns.Add("baris_1", "Baris 1")
        dg.Columns(0).HeaderCell.Style.Alignment = DataGridViewContentAlignment.MiddleCenter
        dg.Columns.Add("baris_2", "Baris 2")
        dg.Columns(1).HeaderCell.Style.Alignment = DataGridViewContentAlignment.MiddleCenter
        dg.Columns.Add("baris_3", "Baris 3")
        dg.Columns(2).HeaderCell.Style.Alignment = DataGridViewContentAlignment.MiddleCenter

        'Menyiapkan 10 baris
        For i = 0 To 9
            dg.Rows.Add()
        Next

        'mengisi data di setiap baris dan setiap kolom
        For i = 0 To 10
            For y = 0 To dg.ColumnCount - 1
                dg.Item(y, i).Value = "Baris " & i & ", Kolom " & y
            Next
       Next

        'mengubah warna background setiap baris
        GantiWarna(dg, BarisGenap, BarisGanjil)

    End Sub

    Private Sub cmd_BarisGenap_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmd_BarisGenap.Click
        'menampilkan dialog pemilihan warna
        ClrDialog.ShowDialog()
        'hasil pemilihan warna disimpan di variabel
        BarisGenap = ClrDialog.Color
        'proses pengantian warna datagrid
        GantiWarna(dg, BarisGenap, BarisGanjil)
    End Sub

    Private Sub cmd_GarisGanjil_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmd_GarisGanjil.Click
        'menampilkan dialog pemilihan warna
        ClrDialog.ShowDialog()
        'hasil pemilihan warna disimpan di variabel
        BarisGanjil = ClrDialog.Color
        'proses penggantian warna datagrid
        GantiWarna(dg, BarisGenap, BarisGanjil)
    End Sub

    Private Sub GantiWarna(ByVal DataGrid As DataGridView, ByVal BrsGenap As Color, ByVal BrsGanjil As Color)
        '###########################################################################################################
        '# Baris di datagrid dimulai dari 0, sehingga ketika memiliki warna genap, baris paling atas ikut berubah. #
        '# Bukan karena salah program, tetapi karena 0 dianggap bilangan bulat                                     #
         '###########################################################################################################

        'diulang sebanyak jumlah baris yang ditampilkan
        For i = 0 To DataGrid.RowCount - 1
            'jika baris genap, maka warna background sesuai dengan variabel yang telah ditentukan
            If i Mod 2 = 0 Then
                DataGrid.Rows(i).DefaultCellStyle.BackColor = BrsGenap
            Else
               'jika baris genap, maka warna background sesuai dengan variabel yang telah ditentukan
                DataGrid.Rows(i).DefaultCellStyle.BackColor = BrsGanjil
            End If
        Next
    End Sub
End Class

Kode tersebut hanya berlakun ketika pengisian data ke dalam datagrid melalui cara menual (masing2 data dimasukan satu per satu). Jika datagrid dikoneksikan ke database, atau pengisian data dengan menggungunakan datatabel ataupun langsung dari query, proses pengubahan warna untuk masing-masing baris dengan menggunakan event DataBindingComplete

    Private Sub dg_DataBindingComplete(ByVal sender As Object, ByVal e As System.Windows.Forms.DataGridViewBindingCompleteEventArgs) Handles dg.DataBindingComplete
        For i = 0 To dg.RowCount - 1
            'jika baris genap, maka warna background sesuai dengan variabel yang telah ditentukan
            If i Mod 2 = 0 Then
                dg.Rows(i).DefaultCellStyle.BackColor = BarisGenap
            Else
                'jika baris genap, maka warna background sesuai dengan variabel yang telah ditentukan
                dg.Rows(i).DefaultCellStyle.BackColor = BarisGanjil
            End If
        Next
    End Sub

Nah, mudah bukan?
Berikut ini source code yang dapat diunduh secara gratis.