PopUpMenu In Row GridControl DevExpress

Jika anda terbiasa dengan menggunakan ContexMenuStrip, bagaimana jika kita membuatnya dengan menggunakan PopUpMenu DevExpress, pada artikel sebelumnya yaitu Basic Control DevExpress, anda sudah diperkenalkan pada PopUpMenu.


Sedikit mengulang saja, untuk membuat Menu pada PopUpMenu harus selalu berdampingan dengan BarManager, pertama kali anda menaruh BarManager di dalam form, maka akan terbentuk tiga(3) menu yaitu : Main Menu, Tools dan Status Bar. Anda harus menghapus semua menu tersebut jika anda tidak memerlukannya.

Untuk PopUpMenu, anda harus menentukan terlebih dahulu posisi mouse jika di klik kanan oleh user, penentuan posisi mouse inilah yang menjadi kunci.

GridView1.CalcHitInfo(GridControl1.PointToClient(MousePosition))

Download
PopUpMenuInGridControl

Search or Filter Data in GridControl

Terkadang, data yang kita tampilkan dalam bentuk grid, jika hanya beberapa baris mungkin akan mudah mencarinya, tapi jika data yang di tampilkan berjumlah ratusan bahkan ribuan data, apa kita harus mencarinya satu persatu, pasti akan memakan waktu yang lama dan perlu ketelitian.

Dalam GridControl telah disediakan untuk Search dan Filter melalui grid, berikut akan saya tampilkan fitur bawaan dari gridcontrol dalam hal searching dan filter tanpa code.

Buatlah New Project baru, kemudian tambahkan GridControl kedalam form tersebut, isikan dock dengan fill, sehingga akan memenuhi form tersebut, seperti gambar berikut :

• Masukkan ImageCollection kedalam form
• Masukkan gambar kedalam ImageCollection1
• Pada GridControl1 --> UsedEmbeddedNavigator = True
• Pada Properties GridView1, tambahkan Images= ImageCollections1
• Pada Properties GridView1 tambakan column 5 column
• Pada gridcolumns2-->ColumnEdit -->ImageComboboxEdit
• Pada gridcolumns3 -->ColumnEdit--> DateEdit
• Pada gridcolumns3 -->UnboundType = String
• pada gridcolumns4 --> Visibled = False

Pada properties masing-masing control anda bisa lihat pada source code yang telah di sediakan diakhir posting ini, anda bisa lihat perubahan apa saja di dalam properties GridControl atau GridView.

Pada contoh ini, saya menggunakan database access, sehingga untuk koneksi ke database saya menggunakan oledb sbb:

Public con As New OleDb.OleDbConnection

    Dim dtTable As DataTable

    Public Sub opencon()

        Try

            Dim Path As String = Application.StartupPath + "\" + "udinsofyanblogspotcom.accdb"

            con = New OleDb.OleDbConnection

            con.ConnectionString = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source= " & Path & ";Jet OLEDB:Database Password=; "

            If con.State = ConnectionState.Closed Then con.Open()

        Catch ex As OleDbException

            Throw ex

End Sub

Pada script di atas saya mengambil databasenya sama dengan direktori dimana program ini di jalankan, jadi pastikan database dalam satu direktory, kecuali anda rubah path database sendiri.

Untuk mengambil data dari database saya menggunakan script berikut :

Sub ConnectionDB()
        Try

            opencon()

            Dim cmd As New OleDbCommand("select * from sample", con)

            Dim ada As New OleDbDataAdapter(cmd)

            dtTable = New DataTable

            ada.Fill(dtTable)

            GridControl1.DataSource = Nothing

            GridControl1.DataSource = dtTable

        Catch ex As Exception

            MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error)

            Exit Sub

        Finally

            con.Close()

        End Try

    End Sub

 Jika Program dijalankan akan seperti ini :

 Jika kita ingin Search di No Id dengan awalan dari b maka akan seperti ini :

anda bisa lihat, begitu huruf b di tulis langsung semua data dalam grid akan filter data di column No Id menjadi awalan b semua, anda juga bisa lihat pada garis merah, pada column tersebut anda bisa mencari data berdasarkan No Id, Nama Gender atau Tanggal .... tidak perlu code lagi dan tidak perlu buat script untuk membuat hal tersebut.


sekarang apa saja yang bisa di filter oleh grid

anda bisa perhatikan pada column No Id, coba anda klik tanda filter samping kanan atas column No Id, jika di klik akan seperti itu, sekarang coba klik Edit Filter di kanan bawah seperti pada lingkaran tersebut, maka akan keluar seperti berikut :

anda di berikan custom filter lagi untuk menyaring data yang di perlukan, anda bisa explore lagi untuk edit filter ini. ...... selamat mencoba...



Salam

Download source code:
Search Or Filter Data In GridControl

Get Row Data in GridControl

Terkadang kita ingin mengambil data yang ada dalam row grid atau dalam cell , biasanya kita memilih dengan menggunakan mouse, lalu data tersebut kita tampilkan di textbox atau kita simpan dalam variabel.

Saya akan mencoba membuat yang sederhana untuk mengambil data row dalam gridcontrol tentunya, saya asumsikan anda telah punya database sendiri, disini saya akan pakai db Sql Server Express. Baiklah, mari  kita mulai dengan membuat New Project atau jika anda ingin menggunakan project yang sudah ada, maka anda hanya tinggal add windows form saja.

Buatlah tampilan seperti ini :

Jadi nantinya jika kita klik mouse di dalam gridcontrol tersebut maka data yang ada di dalam grid akan tampil di textbox yang telah di sediakan.
Sekarang kita akan buat koneksi ke database untuk mengambil data dari database, kemudian kita akan munculkan di dalam gridcontrol pada saat form tersebut di panggil/dijalankan(load).

Ini adalah Table di database:

Properties Untuk GridColum

No	Control	Properties
		Name	Caption	FieldName
1	GridCOlumn1	GridCOlumn1	No. ID	no_urut
2	GridCOlumn2	GridCOlumn2	Nama	nama

Berikut line code pada View Code

Untuk Koneksi ke server dan nama database disesuaikan dengan yang ada di tempat kita coba, jika telah selesai, jalankan program dengan menekan tombol F5

Untuk saat ini kita hanya baru sampai Load data kedalam GridControl belum bisa mendapatkan Row Data di dalam grid.
Sekarang kita pindah ke View Code, Cari GridView1 terus pilih Even MouseUp, kemudian berikan scripts seperti gambar berikut :

Jalankan program dengan menekan tombol F5, klik mouse pada row pertama maka akan tampak seperti berikut:

jika pilih row kedua akan tampak seperti ini

Sekarang kita coba pakai Even DoubleClick , tambahkan scripts berikut pada Even DoubleClick untuk GridView1

kalau anda perhatikan pada Event DoubleClick, ada yang di ulang pada scriptnya seperti pada event MouseUp, kenapa ? karena terkadang Evens MouseUp tidak terbaca sehingga perlu pengulangan pada Event DoubleClick, sebenarnya pada Event DoubleClick cukup seperti ini : XtraMessageBox.Show(TextEdit1.Text.Trim & VbCrlt & TextEdit2.Text.Trim).
Jalankan Program kemudian Double Click pada row kedua , maka akan seperti ini :

Jika ingin bisa DoubleClick di Row manapun tapi tetap keluar data yang kita inginkan maka lakukan perubahan sedikit pada Properties GridView/AdvBandedGridView seperti berikut :

Main	Properties	Value
View
	FocusrecStyle	RowFocus
	OptionsBehaviar
	- EditValue	FALSE
	- ReadOnly	TRUE

selamat mencoba....

Salam

Download source code:
GetRowData

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

Populate Data to GridControl

Untuk memasukkan data dari database ke dalam GridControl sangatlah mudah, berikut cara Populate Date dari database (disini sebagai contoh saya gunakan MS.Sql Server).
Jika anda sudah punya Project di Visual Studio, buatlah new Windows Form, jika belum ada Project untuk latihan anda bisa buat New Project.
Kemudian buatlah tampilan seperti berikut:

anda bisa berkreasi sendiri menurut kesukaan anda, jika anda belum mengetahui Basic Design dari GridControl dan Penggunaan Skins bisa lihat di posting sebelumnya.

Perubahan yang dilakukan didalam GridControl di Properties Design adalah sebagai berikut :

Dari semua perubahan yang paling penting adalah di Main Column yaitu pada FieldName.

• Pastikan isikan FieldName dengan nama Field/Column Table pada Database
• Pastikan huruf besar dan kecil, salah dalam penulisan huruf besar atau kecil , data tidak masuk

misalkan table anda di database sebagai berikut :

Jadi pastikan pada Run Designer di gridcolumn1(No ID) untuk FielName-nya wajib sama dengan Column Name no_urut yang ada di table database.

setelah selesai dalam merancang tampilan, sekarang saat kita masuk dalam View Code di form tersebut, isinya sebagai berikut :

Import Component yang diperlukan

Imports DevExpress.XtraEditors
Imports DevExpress.UserSkins.BonusSkins
Imports DevExpress.UserSkins.OfficeSkins
Imports System.Data
Imports System.Data.SqlClient

Tentukan Variable untuk koneksi ke datatbase, tabledata untuk menampung data

Inherits DevExpress.XtraEditors.XtraForm
Private connStr As String = "data source=namaserver;database=namadb;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

Buat Procedure untuk menjalankan query/ambil data ke database

Sub ConnectionDB()
Dim conn As New SqlConnection(connStr)
Try
conn.Open()
Dim cmd As New SqlCommand("select * from namatable", 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

Jika tombol SimpleButton2 di klik, maka perintah ini akan di eksekusi/dijalankan

Private Sub SimpleButton2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles SimpleButton2.Click
Try
ConnectionDB()
GridControl1.DataSource = Nothing
GridControl1.DataSource = dtTable
Catch ex As Exception
XtraMessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error)
Exit Sub
End Try
End Sub

Jika tombol SimpleButton1 diklik, maka perintah untuk keluar program akan dijalankan

Private Sub SimpleButton1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles SimpleButton1.Click
Try
Me.Dispose()
Application.Exit()
Catch ex As Exception
Exit Sub
End Try
End Sub

Sekarang jalankan program atau tekan tombol F5, kemudian tekan tombol Retrieve, maka hasilnya akan seperti ini

jika anda tekan tombol Close, maka program akan keluar/selesai..........
nah anda mukin akan bertanya itu Andreas laki atau perempuan atau Santi itu laki atau perempuan, selesai ini kita akan lanjutkan dengan Unbound GridControl, kita akan lihat siapa sebenarnya laki atau perempuan ..... bersambung disini ...


Salam

GridControl Basic Design Bag. 2

AdvBandedGridView

Pada Bagian Pertama kita sudah membuat tampilan dalam bentuk GridView, berikutnya kita akan membahan mengenai AdvBandedGridView.
Agar tidak terlalu panjang, kita mulai saja dari yang sudah pernah kita buat pada bagian pertama, kemudian kita tinggal convert ke AdvBandedGridView

kalau sudah di convert maka hasilnya akan seperti ini :

Jika sudah seperti itu, langkah berikutnya adalah ke Run Designer, kemudian pilih Properties untuk Bands

Seperti gambar di atas, kita akan membuat seperti gambar diatas , caranya :
1. Klik Add New Band.. 2x sehingga akan memunculkan Gridbands2 dan Gridband3
2. Klik Gridband1
    --> Caption = Nomor
    --> Rowcounts = 2
    --> AppearanceHeader --> TextOptions --> HAlignment = Center
3. Klik Gridband2
--> Caption = Tanggal
--> Rowcounts = 2
--> AppearanceHeader --> TextOptions --> HAlignment = Center
4. Klik Gridband3
--> Caption = Bukti
--> Rowcounts = 2
--> AppearanceHeader --> TextOptions --> HAlignment = Center
5. Klik pada Column Bukti --> Tahan Mouse Kiri-->Pindahkan ke Gridband3(Bukti)-->Lepas
6. Klik pada Column Tanggal--> Tahan Mouse Kiri-->Pindahkan ke Gridband2(Tanggal)-->Lepas

Karna tampilan Colunm masih di rata kiri, maka kita akan setting baik untuk isi dari column dan header column kita akan rata tengah.

Perhatikan gambar di atas, karna kita ingin semua rata tengah mak select All semua Column, kemudian lakukan langkah berikut :
--> AppearenceCell --> TextOptions --> HAlignment = Center
--> AppearenceHeader --> TextOptions --> HAlignment = Center

Colum sudah di setting, tapi tampilannya jadi kurang pas kalo seperti ini :

Baiknya kita sembunyikan Column Header-nya, caranya masuk kembali ke Run Designer

Pada Main di View kemudian ke propertienya OptionsView --> ShowColumnHeader = False,  seperti pada gambar di atas, keluar dari menu Run Designer , sehingga tampilannya akan menjadi seperti ini :

Lebih enak terlihat daripada tampilan seperti tadi, sekarang bagaimana jika kita ingin agar Nomor di atas sedangkan Tanggal di bawah Nomor dan Bukti tetap seperti itu, masuk kembali ke Run Designer

 Pada gambar di atas, kita berada di Main Bands, seperti tadi klik and drak aja pakai mouse, untuk lingkaran hijau adalah GridBand sedangkan garis merah adalah Column, jangan lupa untuk merubah RowCount pada Gridband1 dan Gridband2 menjadi 1... kalo sudah nantinya akan seperti ini

kita sudah merancang tampilan untuk AdvBandGridView, untuk tampilan lainnya dalam Gridcontrol sama saja, tinggal convert saja atau buat baru, hanya bagaimana kita mau seperti apa tampilannya,.. silahkan mencoba, moga bermanfaat...


Salam

GridControl Basic Design Bag. 1

Salah satu component/control yang menarik buat saya adalah GridControl, untuk merancang tampilan di dalam GridControl di bagi menjadi beberapa tampilan, yaitu :

1. GridView
2. CardView
3. BandedGridView
4. AdvBandedGridView
5. LayoutView

disini saya hanya menjelaskan untuk GridView dan AdvBandedGridView saja, untuk yang lainnya sebenarnya sama saja caranya, hanya yang membedakan bentuk tampilan saja


 GridView

Sebagai Latihan, buatlah tambahan form windows di project yang sudah ada caranya seperti berikut :

seperti gambar di atas, tambahkan windows from ke dalam project kemudian tambahkan beberapa control ke dalam sehingga akan membentuk seperti gambar berikut :

Langkahnya adalah sebagai berikut :
1. Tambahkan PanelControl --> nama otomatis menjadi Panelcontrol1
    pada propertiesnya isikan Dock dengan Bottom, sesuaikan tingginya untuk tombol button nantinya
2. Tambahkan PanelControl  --> nama otomatis menjadi Panelcontrol2
    Klik PanelControl1 tersebut kemudian pada propertiesnya isikan Dock dengan Fill
3. Tambahkan SimpleButtom di dalam Panelcontrol1  --> nama otomatis menjadi SimpleButtom1
    di Properties SimpleButtom1 isikan Dock dengan Right
4. Tambahkan SimpleButtom di dalam Panelcontrol1  --> nama otomatis menjadi SimpleButtom2
    di Properties SimpleButtom2 isikan Dock dengan Fill
5. Tambahkan GridControl --> nama otomatis menjadi GridControl1
    di Properties GridControl1 isikan Dock dengan Fill

Tabel

<><><><>

<><><><>

<><><><>

<><><><>

<><><><>

Control	Properties
	Dock	Name
Panelcontrol	Bottom	Panelcontrol1
Panelcontrol	Fill	Panelcontrol2
Simplebuttom	Right	Simplebuttom1
Simplebuttom	Fill	Simplebuttom2
GridControl	Fill	GridControl1

sekarang kita sudah sampai menambahkan control kedalam form, selanjutnya adalah menambahkan kolom-kolom kedalam grid tersebut.

pada GridControl1 tersebut terdapat tombol Retrieve Detail dan Run Designer, karena kita ingin menambahkan kolom-kolom pada gridcontrol tersbut, maka klik tombol Run Designer

Run Designer

kita sudah masuk kedalam Run Designer untuk GridControl1 seperti gambar di atas, selanjutnya kita akan sedikit setting untuk View, arahkan pada OptionsView , seperti gambar di bawah ini :

Rubahlah nilai dari beberapa properties seperti pada gambar diatas (ada tanda bintang merah), biasanya jika ada properties yang di rubah nilai defaultnya maka nilai yang di rubah hurufnya menjadi lebih tebal(Bold).

Selanjutnya klik menu Columns yang ada di sebelah kiri, pada bagian ini ada Tombol Add, klik 3 kali untuk menambahkan kolom sebanyak tiga kolom, isikan masing-masing kolom dengan Judul(Caption) dan Fieldname-nya seperti gambar berikut :

Penjelasan sedikit :
Caption adalah Judul pada kolom, sehingga nantinya kita akan melihat pada kolom tersebut adalah yang tertera pada Caption ini.
Fieldname adalah identitas dari kolom tersebut jika kita nanti akan mengisi kolom tersebut dengan data (contoh pada bab berikutnya)

Setelah itu selanjutnya kita ke Layout, di dalam layout ini kita bisa memperbesar ukuran lebar dari kolom tersebut, di sesuaikan dengan panjang karakter data yang akan di isi nantinya, seperti gambar berikut :

nantinya tampilan dari Grid yang kita design akan seperti ini, seperti dijelaskan di atas, temen-temen bisa merubah lebar kolom disini, jika sudah selesai jangan lupa tekan tombol Apply, setelah itu close Run Designer-nya, maka hasilnya akan nampak seperti di bawah ini :

Baiklah, untuk Bagian 1 ini cukup sampai disini dulu, temen-temen bisa berkreasi di didalam Run Designer disesuaikan dengan kebutuhan program


Salam