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 :
- Dari Query yaitu dengan menggunakan Case When... Then Else End
- 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:
