Unbound GridControl

Sebelum ini, bagi anda yang belum tahu kenapa saya menggunakan Unbound ini bisa ke Populate Data to GridControl, sehingga apa yang saya sajikan bisa terstruktur, sehingga tidak ada kesan loncat kepermasalahan yang lain.

Pada bahasan ini kita akan menampilkan data yang tidak terikat dengan data dari hasil query, pada contoh di Populate Data to GridControl, kita mempunya genderid 0 (nol) dan 1 (satu).
Jadi jika 0 (nol) adalah Laki dan 1 (satu) adalah Perempuan
untuk menyelesaikan kasus ini, sebenarnya kita mempunya beberapa pilihan :

1. Dari Query yaitu dengan menggunakan Case When... Then Else End
2. Setting diProgram /GridControl

1. Query
Tabel di database :

saya hanya memiliki 3 column name/fieldname yaitu no_urut, nama dan genderid
Baiklah buatlah tambahan tampilan seperti berikut :

pastikan column GridColumn4/Gender Desc untuk FieldName = gen_desc

scripts sebagai berikut :

Imports DevExpress.XtraEditors
Imports DevExpress.UserSkins.BonusSkins
Imports DevExpress.UserSkins.OfficeSkins
Imports System.Data
Imports System.Data.SqlClient
Imports DevExpress.XtraGrid.Views.Grid

Inherits DevExpress.XtraEditors.XtraForm
    Private connStr As String = "data source=sony-vaio;database=sample;integrated security=true"
    Dim dtTable As DataTable
    Private Sub GridControlSample_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            DevExpress.Skins.SkinManager.Default.RegisterAssembly(GetType(DevExpress.UserSkins.BonusSkins).Assembly)
            DevExpress.Skins.SkinManager.Default.RegisterAssembly(GetType(DevExpress.UserSkins.OfficeSkins).Assembly)
            DevExpress.Skins.SkinManager.EnableMdiFormSkins()
            DevExpress.Skins.SkinManager.EnableFormSkins()
            DevExpress.Skins.SkinManager.EnableFormSkinsIfNotVista()
            DevExpress.LookAndFeel.LookAndFeelHelper.ForceDefaultLookAndFeelChanged()
        Catch ex As Exception
            Exit Sub
        End Try
    End Sub

Sub ConnectionDB()

        Dim conn As New SqlConnection(connStr)
        Try
            conn.Open()
            Dim cmd As New SqlCommand("select *,(Case When (genderid =0) Then 'Laki' Else 'Perempuan' End) AS gen_desc from gender", conn)
            Dim ada As New SqlDataAdapter(cmd)
            dtTable = New DataTable
            ada.Fill(dtTable)
        Catch ex As Exception
            XtraMessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error)
            Exit Sub
        Finally
            conn.Close()
        End Try
    End Sub

 Jalankan program atau tekan tombol F5 kemudian tekan tombol Retrieve maka hasilnya akan seperti ini :

kita sudah mendapatkan hasil untuk cara pertama, mungkin cara pertama jika datanya tidak banyak dan link hanya sedikit tidak terlalu memberatkan Server, tapi bagaimana jika dari sisi program yang menangani hal tersebut, mungkin agak sedikit meringankan beban server.


2. Unbound GridControl
Karena ada permintaan dari sahabat, agar tampilan Unbound berbentuk Combobox, sekarang kita akan melakukan perubahan pada bagian GridControl, terutama pada bagian kolom Gender Desc.

kiranya seperti itu, jadi di dalam kolom grid ada yang berbentuk comboxbox (semoga seperti ini ...hehehehe)... dan isinya sudah ada yaitu index(0) Laki dan Index(1) Perempuan.

Cara membuat kolom tersebut sebagai berikut : masuk ke dalam Run Designer, kemudian pilih Columns--> gridcolumn4(Gender Desc)

Dalam FieldName di gridcolumn4 saya beri nama gen_desc, penamaan bisa apa saja, Fieldname ini tidak ada/terikat dengan table di database(berdiri sendiri, ini yg kita sebut unbound)

Pada Properties ColumnEdit-->New --> ComboBoxEdit , nanti akan terbentuk secara otomatis namanya menjadi RepositoryItemComboBox1, seperti pada gambar di atas, klik tanda + pada ColumnEdit, kemudian cari Items -->(Collection), isikan seperti berikut :

Jika telah selesai tekan tombol OK.

Setting selanjutnya yang sangat penting yaitu UnboundType, pastikan unboundtype anda telah di sesuaikan, karena saya bertipe String, maka UnboundType=String.

Kalau dalam tabel perubahan GridColumn4 Properties seperti ini :
<>

No	Properties	Value
1	Name	gridcolumn4
2	Caption	Gender Desc
3	FieldName	gen_desc
4	ColumnEdit
	A. New--> ComboBoxEdit	RepositoryItemComboBox1
	B. Items
	B.1. Add Index(0)	Laki
	B.2. Add Index(1)	Perempuan
5	UnboundType	String

kita sudah setting persiapan untuk column Gender Desc, selanjutnya kita akan kembalikan posisi scripts pada prosedure ConnectionDB ke posisi semula

Sub ConnectionDB()
        Dim conn As New SqlConnection(connStr)
        Try
            conn.Open()
            Dim cmd As New SqlCommand("select * from gender", conn)
            Dim ada As New SqlDataAdapter(cmd)
            dtTable = New DataTable
            ada.Fill(dtTable)
        Catch ex As Exception
            XtraMessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error)
            Exit Sub
        Finally
            conn.Close()
        End Try
    End Sub

setelah itu, masih di dalam View Code tambahkan Scripts berikut pada CustomUnboundColumnData milik dari GridView1.

Private Sub GridView1_CustomUnboundColumnData(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Base.CustomColumnDataEventArgs) Handles GridView1.CustomUnboundColumnData
        Try
            If e.IsGetData AndAlso e.Column.FieldName = "gen_desc" Then
                Dim view As GridView = TryCast(sender, GridView)
                Dim gen As Double = CDec(Fix((TryCast(view.DataSource, DataView))(e.ListSourceRowIndex)("genderid")))
                Dim ttlVal As Object
                ttlVal = gen
                If ttlVal = 0 Then
                    e.Value = RepositoryItemComboBox1.Items.Item(0) 'nilai index
                ElseIf ttlVal = 1 Then
                    e.Value = RepositoryItemComboBox1.Items.Item(1) 'nilai index
                End If
            End If
        Catch ex As Exception
            Exit Sub
        End Try
    End Sub

sekarang sudah semua, saatnya untuk jalankan program, tekan tombol F5, kemudian tekan tombol Retrieve maka tampilannya akan seperti ini.

kalau hanya tampil seperti itu, masih kurang menarik, bagaimana kalau combobox tersebut di berikan image juga, jadi seperti ini :

caranya adalah

• Tambahkan ImageList (bawaan Visual Studio) ke dalam form
• Isi ImageList1 dengan gambar yang ada inginkan
• Klik GridView1, pada properties-nya isikan Image dengan ImageList1
• Masuk ke Run Designer -->Columns--> ColumnEdit--> New --> ImageComboboxEdit, nanti akan terbentuk dengan otomatis namanya menjadi RepositoryItemImageComboBox1
• Klik tanda + pada ColumnEdit-->LargeImage-->ImageList1
• Selanjutnya pada ColumnEdit-->Items, isikan seperti berikut

Klik Add 2 kali dan isikan, sehingga akan terbentuk 2 index.
Index(0) :
Description = Laki
ImageIndex = 1 (tergantung urutan pada ImageList1)
Value = Pria

Index(1) :
Description = Perempuan
ImageIndex = 0 (tergantung urutan pada ImageList1)
Value = Perempuan

Tabel Perubahan pada GridColumn4 :
<>

  

<>

No	Properties	Value
1	Name	gridcolumn4
2	Caption	Gender Desc
3	FieldName	gen_desc
4	ColumnEdit
	A. New--> ImageComboBoxEdit	RepositoryItemImageComboBox1
	B. LargeImages	ImageList1
	C. Items
	C.1. Add Index(0)
	Description	Laki
	ImageIndex	1
	Value	Laki
	C.2. Add Index(1)
	Description	Perempuan
	ImageIndex	0
	Value	Perempuan
5	UnboundType	String

sekarang merubah scripts untuk CustomUnboundColumnData pada GridView1 menjadi seperti ini

Private Sub GridView1_CustomUnboundColumnData(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Base.CustomColumnDataEventArgs) Handles GridView1.CustomUnboundColumnData
        Try
            If e.IsGetData AndAlso e.Column.FieldName = "gen_desc" Then 'dari gridcolumn4
                Dim view As GridView = TryCast(sender, GridView)
                Dim gen As Double = CDec(Fix((TryCast(view.DataSource, DataView))(e.ListSourceRowIndex)("genderid"))) 'diambil dari gridcolumn3
                Dim ttlVal As Object
                ttlVal = gen
                If ttlVal = 0 Then
                    e.Value = RepositoryItemImageComboBox1.Items.Item(0).Value
                ElseIf ttlVal = 1 Then
                    e.Value = RepositoryItemImageComboBox1.Items.Item(1).Value
                End If
            End If
        Catch ex As Exception
            Exit Sub
        End Try
    End Sub

jika sudah selesai jalankan program dengan menekan tombol F5, kemudian tekan tombol Retrieve

sekarang sudah jelas siapa laki dan perempuan, semoga bermanfaat buat anda....


Salam

Download source code:

PopulateDataAndUnboundGridControl