Mudah Membuat Chained Drop Down

Combo Box
January 30 2014

In:

Tutorial

Programming

ADO.NET

VB.net

C#

Data Binding

Posted By: nurhidayat

Comments: 0

Belajar Programming | Chained Dropdown List, atau Chained Combo Box, atau Chained
Select, atau jika di Indonesiakan menjadi Select Bertingkat atau Combo Box
Bertingkat, adalah salah satu teknik yang sering ditanyakan di forum-forum pemrograman.
Dengan teknik ini, kita membuat seolah-olah beberapa dropdown list atau combobox saling
berhubungan, misalkan combobox nama-nama kota akan terisi otomatis sesuai dengan pilihan
negara di combobox lainnya. Atau combobox list pegawai akan berubah sesuai dengan
departemen yang dipilih. Teknik ini sebenarnya sangatlah sederhana, namun memerlukan
pemahaman yang cukup komprehensif mengenai mengenai beberapa hal, seperti
 cara mengambil data dari database
cara mengisi data ke combobox atau dropdown list
cara mengambil pilihan pengguna sebagai referensi untuk mengisi combobox lainnya.

Berikut ini saya coba jabarkan implementasi Teknik Combo Box Bertingkat menggunakan query
ADO.NET sederhana saja. Untuk studi kasus ini, kita akan coba menghubungkan 3 (tiga) buah
combobox yang berisikan daftar benua - negara - kota. Combobox Negara akan terisi sesuai
dengan Benua yang dipilih, dan Combobox Kota akan terisi sesuai dengan Negara yang dipilih.
Sedangkan bahasa pemrograman yang dipakai adalah C# dan VB.net untuk memudahkan teman-
teman memahaminya.

Devide and Conquer

Dengan sedikit analisa sederhana terhadap kasus ini, kita coba pecah kasus ini menjadi beberapa
kasus kecil untuk mempermudah kita menyelesaikannya, antara lain,

bagaimana desain yang pas untuk kasus seperti ini

bagaimana cara mengisi combobox benua
bagaimana cara mengisi combobox negara
bagaimana cara mengisi combobox kota
bagaimana cara menangkap perubahan pilihan benua
bagaimana cara menangkap perubahan pilihan negara

Teknik "memecah problem besar menjadi beberapa problem-problem kecil" adalah salah satu
teknik untuk membangun algoritma, yaitu teknik devide and conquer. Dengan memecah
problem besar menjadi sejumlah problem kecil, kelihatannya memang seolah problem yang
dihadapi menjadi semakin banyak, namun... walaupun kelihatan banyak, sejumlah problem kecil
ini justru jauh lebih mudah kita selesaikan sehingga problem besar utama kita otomatis ikut
terpecahkan.

Mari Kita Mulai...!

Pertama-tama, desain database harus kita buat dengan hati-hati agar mudah dalam proses
retrieval atau pengambilan datanya. Cara paling efektif adalah denga membuat 3 (tiga) buah
table yang saling berelasi, yaitu table Continents, table Countries dengan foreign key yang
berelasi ke table Continents. dan terakhir, table Cities dengan foreign key yang berelasi dengan
table Countries. Seperti terlihat pada gambar di bawah ini.

Hide Desain Database seperti ini

Sedangkan untuk desain Form, kita buat desain sederhana saja seperti yang ada di gambar ini.

Hide Desain Form seperti ini

Mengisi Combobox dari Database
Untuk mengisi Combo Box, algoritma-nya adalah seperti ini,

Siapkan koneksi database

Ambil data dari database
Binding data ke combobox

Dengan mengetahui langkah-langkah dasar di atas, maka kita bisa dengan mudah
menterjemahkannya ke bahasa pemrograman apapun. Untuk keperluan ini, kita membuat tiga
buah fungsi FillComboContinents, FillComboCountries, dan FillComboCities, masing-
masing untuk mengisi data benua, negara, dan kota. Dalam bahasa pemrograman VB.net seperti
ini.

Hide Pengambilan Data Versi VB.net

?
''' <summary>
1 ''' Mengisi Combo Box pertama (continents)
2 ''' </summary>
3 Private Sub FillComboContinents()
4 ' siapkan variable koneksi database
Dim cn As New
5 SqlCeConnection(My.MySettings.Default.dbSampleConnectionString)
6 Dim da As New SqlCeDataAdapter("SELECT * FROM Continents", cn)
7 ' siapkan data table untuk menampung data dari database
8 Dim dt As New DataTable()
9 ' selalu gunakan try-catch block
Try
10 ' isi dataset
11 da.Fill(dt)
12 ' binding dataset ke combobox kedua
13 comboBox1.ValueMember = "ID"
comboBox1.DisplayMember = "Name"
14
comboBox1.DataSource = dt
15 Catch ex As Exception
16 ' infokan ke user, jika ada error
17 MessageBox.Show(ex.Message)
18 End Try
End Sub
19
20''' <summary>
21''' Mengisi Combo Box kedua (countries)
22''' </summary>
23''' <param name="ContinentID"></param>
24Private Sub FillComboCountries(ContinentID As Integer)
' siapkan variable koneksi database
25 Dim cn As New
26SqlCeConnection(My.MySettings.Default.dbSampleConnectionString)
27 Dim da As New SqlCeDataAdapter("SELECT * FROM Countries WHERE
28 ContinentID=@p1", cn)
' siapkan data table untuk menampung data dari database
29 Dim dt As New DataTable()
30 ' selalu gunakan try-catch block
31 Try
32 ' isikan parameter Continent'Benua
33 da.SelectCommand.Parameters.AddWithValue("@p1", ContinentID)
' isi dataset
34 da.Fill(dt)
35 ' binding dataset ke combobox kedua
36 comboBox2.ValueMember = "ID"
37 comboBox2.DisplayMember = "Name"
comboBox2.DataSource = dt
38 Catch ex As Exception
39 ' infokan ke user, jika ada error
40 MessageBox.Show(ex.Message)
41 End Try
42End Sub
43
44
''' <summary>
45''' Mengisi Combo Box ketiga (cities)
46''' </summary>
47''' <param name="CountryID"></param>
Private Sub FillComboCities(CountryID As Integer)
48 ' siapkan variable koneksi database
49 Dim cn As New
50SqlCeConnection(My.MySettings.Default.dbSampleConnectionString)
51 Dim da As New SqlCeDataAdapter("SELECT * FROM Cities WHERE
CountryID=@p1", cn)
52 ' siapkan data table untuk menampung data dari database
53 Dim dt As New DataTable()
54 ' selalu gunakan try-catch block
55 Try
56 ' isikan parameter Continent'Benua
da.SelectCommand.Parameters.AddWithValue("@p1", CountryID)
57 ' isi dataset
58 da.Fill(dt)
59 ' binding dataset ke combobox kedua
60 comboBox3.ValueMember = "ID"
comboBox3.DisplayMember = "Name"
61 comboBox3.DataSource = dt
62 Catch ex As Exception
63 ' infokan ke user, jika ada error
64 MessageBox.Show(ex.Message)
65 End Try
End Sub
66
67
68
69
70
71
72
73
74
75

Sedangkan versi C# nya adalah sebagai berikut

Hide Pengambilan Data Versi C#

?
1 /// <summary>
/// Mengisi Combo Box pertama (continents)
2 /// </summary>
3 private void FillComboContinents()
4 {
5 // siapkan variable koneksi database
SqlCeConnection cn = new
6 SqlCeConnection(Properties.Settings.Default.dbSampleConnectionString);
7 SqlCeDataAdapter da = new SqlCeDataAdapter("SELECT * FROM Continents",
8 cn);
9 // siapkan data table untuk menampung data dari database
DataTable dt = new DataTable();
10
// selalu gunakan try-catch block
11 try
12 {
13 // isi dataset
da.Fill(dt);
14 // binding dataset ke combobox pertama
15 comboBox1.ValueMember = "ID";
16 comboBox1.DisplayMember = "Name";
17 comboBox1.DataSource = dt;
}
18 catch (Exception ex)
19 {
20 // infokan ke user, jika ada error
21 MessageBox.Show(ex.Message);
22 }
}
23
24/// <summary>
25/// Mengisi Combo Box kedua (countries)
26/// </summary>
27/// <param name="ContinentID"></param>
28private void FillComboCountries(int ContinentID)
{
29 // siapkan variable koneksi database
30 SqlCeConnection cn = new
31SqlCeConnection(Properties.Settings.Default.dbSampleConnectionString);
32 SqlCeDataAdapter da = new SqlCeDataAdapter("SELECT * FROM Countries
WHERE ContinentID=@p1", cn);
33 // siapkan data table untuk menampung data dari database
34 DataTable dt = new DataTable();
35 // selalu gunakan try-catch block
36 try
37 {
// isikan parameter Continent/Benua
38 da.SelectCommand.Parameters.AddWithValue("@p1", ContinentID);
39 // isi dataset
40 da.Fill(dt);
41 // binding dataset ke combobox kedua
comboBox2.ValueMember = "ID";
42 comboBox2.DisplayMember = "Name";
43 comboBox2.DataSource = dt;
44 }
45 catch (Exception ex)
46 {
// infokan ke user, jika ada error
47 MessageBox.Show(ex.Message);
48 }
49}
50
51/// <summary>
52/// Mengisi Combo Box ketiga (cities)
/// </summary>
53/// <param name="CountryID"></param>
54private void FillComboCities(int CountryID)
55{
56 // siapkan variable koneksi database
SqlCeConnection cn = new
57SqlCeConnection(Properties.Settings.Default.dbSampleConnectionString);
58 SqlCeDataAdapter da = new SqlCeDataAdapter("SELECT * FROM Cities WHERE
59 CountryID=@p1", cn);
// siapkan data table untuk menampung data dari database
60 DataTable dt = new DataTable();
61 // selalu gunakan try-catch block
62 try
63 {
// isikan parameter Continent/Benua
64 da.SelectCommand.Parameters.AddWithValue("@p1", CountryID);
65 // isi dataset
66 da.Fill(dt);
67 // binding dataset ke combobox ketiga
68 comboBox3.ValueMember = "ID";
comboBox3.DisplayMember = "Name";
69 comboBox3.DataSource = dt;
70 }
71 catch (Exception ex)
72 {
// infokan ke user, jika ada error
73 MessageBox.Show(ex.Message);
74 }
75}
76
77
78
79
80
81
82
83
84
85
86

Menangkap Perubahan Pilihan Combo Box

Untuk menangkap perubahan pilihan pengguna, maka kita perlu mendeklarasikan beberapa
event handler untuk menangani event SelectedValueChanged. Setiap kali ada perubahan di
Combo Box yang berisikan data benua, maka otomatis event handler ini akan mengambil ID
dari benua bersangkutan, kemudian memanggil fungsi FillCOmboCounteries yang sudah kita
buat sebelumnya untuk mengisi combobox negara sesuai dengan pilihan benuanya. Logika yang
sama diterapkan untuk combobox yang berisi data negara, otomatis fungsi FillComboCities
akan dipanggil setiap kali ada perubahan pilihan negara. Implementasi pengambilan data
dalam VB.net menjadi seperti ini,

Hide Menangkap Perubahan Pilihan Combo Box Versi VB.net

?
1 ''' <summary>
''' Form Constructor
2 ''' Inisialisasi event handler dan mengisi combo box pertama
3 ''' </summary>
4 ''' <remarks></remarks>
5 Public Sub New()
InitializeComponent()
6 InitializeEventHandlers()
7 FillComboContinents()
8 End Sub
9
10''' <summary>
11''' InitializeEventHandlers, menentukan event delegate
''' untuk menangani event SelectedValueChanged setiap kali
12''' user memilih item baru di combo box pertama (continents)
13''' dan memilih item baru di combo box kedua (countries)
14''' </summary>
15Private Sub InitializeEventHandlers()
AddHandler comboBox1.SelectedValueChanged, AddressOf
16comboBox1_SelectedIndexChanged
17 AddHandler comboBox2.SelectedValueChanged, AddressOf
18comboBox2_SelectedIndexChanged
19End Sub
20
21''' <summary>
''' Setiap kali user memilih benua baru,
22''' maka isi combo box kedua dengan negara yang sesuai
23''' </summary>
24Private Sub comboBox1_SelectedIndexChanged(sender As Object, e As EventArgs)
25 '' pastikan pilihan benar
If (Not IsNothing(comboBox1.SelectedValue)) Then
26 '' ambil ID benua yang dipilih user
27 Dim id As Integer = comboBox1.SelectedValue
28 '' isi combobox country berdasarkan benua yang dipilih
29 FillComboCountries(id)
30 End If
End Sub
31
32''' <summary>
33''' Setiap kali user memilih negara baru,
34''' maka isi combo box ketiga dengan kota yang sesuai
35''' </summary>
36Private Sub comboBox2_SelectedIndexChanged(sender As Object, e As EventArgs)
'' pastikan pilihan benar
37 If (Not IsNothing(comboBox2.SelectedValue)) Then
38 '' ambil ID benua yang dipilih user
39 Dim id As Integer = comboBox2.SelectedValue
40 '' isi combobox country berdasarkan benua yang dipilih
FillComboCities(id)
41 End If
42End Sub
43
44
45
46
47
48
49
Dan implementasi pengambilan data dalam bahasa C# menjadi seperti ini,

Hide Menangkap Perubahan Pilihan Combo Box Versi C#

?
1 /// <summary>
/// Form Constructor
2 /// Inisialisasi event handler dan mengisi combo box pertama
3 /// </summary>
4 public frmMain()
5 {
InitializeComponent();
6 InitializeEventHandlers();
7 FillComboContinents();
8 }
9
10/// <summary>
11/// InitializeEventHandlers, menentukan event delegate
/// untuk menangani event SelectedValueChanged setiap kali
12/// user memilih item baru di combo box pertama (continents)
13/// dan memilih item baru di combo box kedua (countries)
14/// </summary>
15private void InitializeEventHandlers()
16{ comboBox1.SelectedValueChanged += new
17EventHandler(comboBox1_SelectedValueChanged);
18 comboBox2.SelectedValueChanged += new
19EventHandler(comboBox2_SelectedValueChanged);
20}
21
/// <summary>
22/// Setiap kali user memilih benua baru,
23/// maka isi combo box kedua dengan negara yang sesuai
24/// </summary>
25void comboBox1_SelectedValueChanged(object sender, EventArgs e)
26{ // pastikan pilihan benar
27 if (comboBox1.SelectedValue != null)
28 {
29 // ambil ID benua yang dipilih user
30 int id = (int)comboBox1.SelectedValue;
// isi combobox country berdasarkan benua yang dipilih
31 FillComboCountries(id);
32 }
33}
34
35/// <summary>
36/// Setiap kali user memilih negara baru,
/// maka isi combo box ketiga dengan kota yang sesuai
37/// </summary>
38void comboBox2_SelectedValueChanged(object sender, EventArgs e)
39{
40 // pastikan pilihan benar
if (comboBox2.SelectedValue != null)
41 {
42 // ambil ID benua yang dipilih user
43 int id = (int)comboBox2.SelectedValue;
44 // isi combobox cities berdasarkan negara yang dipilih
FillComboCities(id);
45 }
46}
47
48
49
50
51
52
53
54

Hasil Akhir
Begini tampilan untuk pilihan negara sesuai benua

Dan ini tampilan kota sesuai dengan pilihan negara

Source code silakan download di sini.

ChainedComboBox.zip