[VB.NET] การนำ ComboBox Control ไปใส่ไว้ในตารางกริด DataGridView แบบ Run Time

thongkorn

จากตอนที่แล้วแอดมินได้นำเสนอ การนำเอา ComboBox Control ไปใส่ไว้ในตารางกริด MSFlexGrid สำหรับ Visual Basic 6 ในตอนนี้ก็จะขยับมาใช้ VB.NET โดยแบ่งวิธีคิดออกเป็น 3 วิธี ซึ่งแต่ละวิธีจะมีทั้งความเหมือนและความแตกต่างผสมกันไป แอดมินอยากให้ลองศึกษาและสังเกตกันให้ดีๆ เพราะสิ่งที่แอดมินนำมาเล่าสู่กันฟังนี้มันเป็นพื้นฐาน ที่จะนำทางไปสู่การแก้ปัญหาในการเขียนโปรแกรมในลำดับต่อไป ...

3 วิธีคิด แบ่งออกได้ดังต่อไปนี้
- คิดแบบ VB6
- คิดแบบ VB6 แต่ใช้ความสามารถของ VB.NET ในการสร้าง ComboBox แบบ @Run Time
- คิดแบบ Visual Basic .NET ฉบับเต็ม

สำหรับวิธีแรก คงไม่ต้องอธิบายอะไรมากมายนัก ก็คือนำเอา ComboBox มาแปะลงบนฟอร์มก่อน จากนั้นก็อาศัยหลักการเลื่อนตำแหน่ง ComboBox ไปปิดทับในแต่ละเซลล์ที่ต้องการ (ใช้หลักที่ 3 หรือ Index = 2 ตามเดิม)
โค้ดวิธีการแรก

1. Public Class frmDGVCBV1
   
2. 
   
3.     Private Sub frmDGVCBV1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
   
4.         '//
   
5.         With DataGridView1
   
6.             .AllowUserToAddRows = False
   
7.             .AllowUserToDeleteRows = False
   
8.             .SelectionMode = DataGridViewSelectionMode.CellSelect
   
9.             .AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill
   
10.             .AutoResizeColumns()
    
11.             .MultiSelect = False
    
12.             .ColumnCount = 3
    
13.             .Columns(0).Name = "Column 1"
    
14.             .Columns(1).Name = "Column 2"
    
15.             .Columns(2).Name = "Column 3"
    
16.             '// ป้องกันการเข้าไปแก้ไขในเซลล์โดยตรง
    
17.             .Columns(2).ReadOnly = True
    
18.         End With
    
19. 
    
20.         Dim row As String() = New String() {"1", "Product 1", "M100"}
    
21.         DataGridView1.Rows.Add(row)
    
22.         row = New String() {"2", "Product 2", "M100"}
    
23.         DataGridView1.Rows.Add(row)
    
24.         row = New String() {"3", "Product 3", "M150"}
    
25.         DataGridView1.Rows.Add(row)
    
26.         row = New String() {"4", "Product 4", "M16"}
    
27.         DataGridView1.Rows.Add(row)
    
28.         '//
    
29.         With ComboBox1
    
30.             .DropDownStyle = 2
    
31.             '// Load the ComboBox's list.
    
32.             .Items.Add("M100")
    
33.             .Items.Add("M150")
    
34.             .Items.Add("M16")
    
35.             ' Hidden Control
    
36.             .Visible = False
    
37.         End With
    
38.     End Sub
    
39. 
    
40.     ' / -------------------------------------------------------------------------------------
    
41.     ' / เกิดเหตุการณ์การคลิ๊กเซลล์ แถวใดๆแต่เป็นหลักที่ 3 (Index = 2)
    
42.     Private Sub DataGridView1_CellClick(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellClick
    
43.         If e.RowIndex < 0 Then Exit Sub
    
44. 
    
45.         Select Case e.ColumnIndex
    
46.             '// เราไม่ต้องการหลัก 0 กับหลัก 1 ดังนั้นต้องปิดการแสดงผลของ ComboBox เอาไว้
    
47.             Case 0 To 1 : ComboBox1.Visible = False
    
48. 
    
49.                 '// โฟกัสมาที่หลักที่ 3 (Index = 2) ที่เราต้องการเท่านั้น
    
50.             Case 2
    
51.                 '// เปิดให้มองเห็น ComboBox
    
52.                 ComboBox1.Visible = True
    
53.                 '// เพิ่ม ComboBox เข้ามาในตารางกริด
    
54.                 DataGridView1.Controls.Add(ComboBox1)
    
55.                 '// นำค่าจาก DataGrid มาเทียบค่าใน ComboBox เพื่อให้แสดงผลค่าที่เท่ากัน
    
56.                 ComboBox1.Text = DataGridView1.Rows(e.RowIndex).Cells(e.ColumnIndex).Value
    
57.                 '// พื้นที่แสดงผลในเซลล์.
    
58.                 Dim oRectangle = DataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, True)
    
59.                 ' หาค่าระยะ X, Y เพื่อกำหนดพิกัด (Coordinate) ให้กับ ComboBox
    
60.                 ComboBox1.Size = New Size(oRectangle.Width, oRectangle.Height)
    
61.                 '// กำหนดตำแหน่งของ ComboBox ไปทับเซลล์
    
62.                 ComboBox1.Location = New Point(oRectangle.X, oRectangle.Y)
    
63.         End Select
    
64.     End Sub
    
65. 
    
66.     ' / -------------------------------------------------------------------------------------
    
67.     ' / หากเกิดการเลือกค่าใน ComboBox ก็ให้คัดลอกค่านี้ไปยังเซลล์ใน DataGridView
    
68.     Private Sub ComboBox1_TextChanged(sender As Object, e As System.EventArgs) Handles ComboBox1.TextChanged
    
69.         '// นำค่าจาก ComboBox ไปใส่ไว้ในเซลล์ของ DataGridView
    
70.         DataGridView1.CurrentCell.Value = ComboBox1.Text
    
71.     End Sub
    
72. 
    
73.     Private Sub frmDGVCBV1_Resize(sender As Object, e As System.EventArgs) Handles Me.Resize
    
74.         ComboBox1.Visible = False
    
75.     End Sub
    
76. 
    
77.     Private Sub ComboBox1_SelectedIndexChanged(sender As System.Object, e As System.EventArgs) Handles ComboBox1.SelectedIndexChanged
    
78.         '// นำค่าจาก ComboBox ไปใส่ไว้ในเซลล์ของ DataGridView
    
79.         DataGridView1.CurrentCell.Value = ComboBox1.Text
    
80.     End Sub
    
81. 
    
82.     Private Sub frmDGVCBV1_FormClosed(sender As Object, e As System.Windows.Forms.FormClosedEventArgs) Handles Me.FormClosed
    
83.         Me.Dispose()
    
84.     End Sub
    
85. 
    
86. End Class

คัดลอกไปที่คลิปบอร์ด

วิธีการที่สอง ก็จะใช้เหมือนวิธีการแรก แต่เปลี่ยนใหม่โดยให้สร้าง ComboBox Control ขึ้นมาในขณะ @Run Time แทน

1. '// ประกาศตัวแปร Object ของ ComboBox
   
2.     Dim cb As New ComboBox

คัดลอกไปที่คลิปบอร์ด

ประกาศตัวแปร ComboBox

1.         '// Declare columns type.
   
2.         Dim Column1 As New DataGridViewTextBoxColumn()
   
3.         Dim Column2 As New DataGridViewTextBoxColumn()
   
4.         Dim Column3 As New DataGridViewTextBoxColumn()
   
5.         '// Add new Columns
   
6.         DataGridView1.Columns.AddRange(New DataGridViewColumn() { _
   
7.                 Column1, Column2, Column3 _
   
8.                 })
   
9.         With DataGridView1
   
10.             .Columns(0).Name = "Column 1"
    
11.             .Columns(1).Name = "Column 2"
    
12.             .Columns(2).Name = "Column 3"
    
13.             '// ป้องกันการเข้าไปแก้ไขในเซลล์โดยตรง
    
14.             .Columns(2).ReadOnly = True
    
15.         End With
    
16.         '//
    
17.         With cb
    
18.             .DropDownStyle = 2
    
19.             '// Load the ComboBox's list.
    
20.             .Items.Add("M100")
    
21.             .Items.Add("M150")
    
22.             .Items.Add("M16")
    
23.             '// Hidden Control
    
24.             .Visible = False
    
25.         End With

คัดลอกไปที่คลิปบอร์ด

ให้สังเกตดูว่าในหลักที่ 3 (Index = 2) แอดมินยังกำหนดช่องเซลล์ DataGridViewTextBoxColumn คือยังคงเป็นแบบ TextBox ตามเดิม

1.     ' / -------------------------------------------------------------------------------------
   
2.     ' / เกิดเหตุการณ์การคลิ๊กเซลล์ แถวใดๆแต่เป็นหลักที่ 3 (Index = 2)
   
3.     Private Sub DataGridView1_CellClick(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellClick
   
4.         If e.RowIndex < 0 Then Exit Sub
   
5. 
   
6.         Select Case e.ColumnIndex
   
7.             '// เราไม่ต้องการหลัก 0 กับหลัก 1 ดังนั้นต้องปิดการแสดงผลของ ComboBox เอาไว้
   
8.             Case 0 To 1 : cb.Visible = False
   
9. 
   
10.                 '// โฟกัสมาที่หลักที่ 3 (Index = 2) ที่เราต้องการเท่านั้น
    
11.             Case 2
    
12.                 '// เปิดให้มองเห็น ComboBox
    
13.                 cb.Visible = True
    
14.                 '// Adding ComboBox control into DataGridView   
    
15.                 DataGridView1.Controls.Add(cb)
    
16.                 '// นำค่าจาก DataGrid มาเทียบค่าใน ComboBox เพื่อให้แสดงผลค่าที่เท่ากัน
    
17.                 cb.Text = DataGridView1.CurrentCell.Value
    
18.                 '// พื้นที่แสดงผลในเซลล์.  
    
19.                 Dim oRectangle = DataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, True)
    
20.                 ' หาค่าระยะ X, Y เพื่อกำหนดพิกัด (Coordinate) ให้กับ ComboBox
    
21.                 cb.Size = New Size(oRectangle.Width, oRectangle.Height)
    
22.                 '// Setting Location
    
23.                 cb.Location = New Point(oRectangle.X, oRectangle.Y)
    
24. 
    
25.                 '// การสร้างเหตุการณ์ (Event) เมื่อเกิดการเลือกไอเทมใน ComboBox ก็จะส่งผลให้กับเซลล์ในตารางกริด
    
26.                 AddHandler cb.TextChanged, AddressOf cb_TextChanged
    
27.         End Select
    
28.     End Sub
    
29. 
    
30.     ' / -------------------------------------------------------------------------------------
    
31.     ' / หากเกิดการเลือกค่าใน ComboBox ก็ให้คัดลอกค่านี้ไปยังเซลล์ใน DataGridView
    
32.     Private Sub cb_TextChanged(sender As Object, e As System.EventArgs)
    
33.         cb.Visible = False
    
34.         '// นำค่าจาก ComboBox ไปใส่ไว้ในเซลล์ของ DataGridView
    
35.         If DataGridView1.CurrentCell.ColumnIndex = 2 AndAlso cb.Text <> "" Then DataGridView1.CurrentCell.Value = cb.Text
    
36.     End Sub

คัดลอกไปที่คลิปบอร์ด

นอกเหนือไปจากการคำนวณหาตำแหน่งที่ ComboBox จะต้องเคลื่อนย้ายไปปิดทับเซลล์แล้ว เราจะต้องสร้างเหตุการณ์ (Event) เมื่อเกิดการเลือกค่าไอเทมใน ComboBox เพิ่มขึ้นมาอีก (AddHandler cb.TextChanged, AddressOf cb_TextChanged) ในส่วนนี้เองที่ VB.NET ได้เพิ่มขีดความสามารถขึ้นมาสูงกว่า VB6

โค้ดวิธีการที่สอง

1. Public Class frmDGVCBV2
   
2.     '// ประกาศตัวแปร Object ของ ComboBox
   
3.     Dim cb As New ComboBox
   
4. 
   
5.     Private Sub frmDGVCBV2_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
   
6.         '//
   
7.         With DataGridView1
   
8.             .AllowUserToAddRows = False
   
9.             .AllowUserToDeleteRows = False
   
10.             .SelectionMode = DataGridViewSelectionMode.CellSelect
    
11.             .AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill
    
12.             .AutoResizeColumns()
    
13.             .MultiSelect = False
    
14.         End With
    
15.         '// Declare columns type.
    
16.         Dim Column1 As New DataGridViewTextBoxColumn()
    
17.         Dim Column2 As New DataGridViewTextBoxColumn()
    
18.         Dim Column3 As New DataGridViewTextBoxColumn()
    
19.         '// Add new Columns
    
20.         DataGridView1.Columns.AddRange(New DataGridViewColumn() { _
    
21.                 Column1, Column2, Column3 _
    
22.                 })
    
23.         With DataGridView1
    
24.             .Columns(0).Name = "Column 1"
    
25.             .Columns(1).Name = "Column 2"
    
26.             .Columns(2).Name = "Column 3"
    
27.             '// ป้องกันการเข้าไปแก้ไขในเซลล์โดยตรง
    
28.             .Columns(2).ReadOnly = True
    
29.         End With
    
30.         '//
    
31.         With cb
    
32.             .DropDownStyle = 2
    
33.             '// Load the ComboBox's list.
    
34.             .Items.Add("M100")
    
35.             .Items.Add("M150")
    
36.             .Items.Add("M16")
    
37.             '// Hidden Control
    
38.             .Visible = False
    
39.         End With
    
40.         '//
    
41.         Dim row As String() = New String() {"1", "Product 1", "M100"}
    
42.         DataGridView1.Rows.Add(row)
    
43.         row = New String() {"2", "Product 2", "M100"}
    
44.         DataGridView1.Rows.Add(row)
    
45.         row = New String() {"3", "Product 3", "M150"}
    
46.         DataGridView1.Rows.Add(row)
    
47.         row = New String() {"4", "Product 4", "M16"}
    
48.         DataGridView1.Rows.Add(row)
    
49.     End Sub
    
50. 
    
51.     ' / -------------------------------------------------------------------------------------
    
52.     ' / เกิดเหตุการณ์การคลิ๊กเซลล์ แถวใดๆแต่เป็นหลักที่ 3 (Index = 2)
    
53.     Private Sub DataGridView1_CellClick(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellClick
    
54.         If e.RowIndex < 0 Then Exit Sub
    
55. 
    
56.         Select Case e.ColumnIndex
    
57.             '// เราไม่ต้องการหลัก 0 กับหลัก 1 ดังนั้นต้องปิดการแสดงผลของ ComboBox เอาไว้
    
58.             Case 0 To 1 : cb.Visible = False
    
59. 
    
60.                 '// โฟกัสมาที่หลักที่ 3 (Index = 2) ที่เราต้องการเท่านั้น
    
61.             Case 2
    
62.                 '// เปิดให้มองเห็น ComboBox
    
63.                 cb.Visible = True
    
64.                 '// Adding ComboBox control into DataGridView   
    
65.                 DataGridView1.Controls.Add(cb)
    
66.                 '// นำค่าจาก DataGrid มาเทียบค่าใน ComboBox เพื่อให้แสดงผลค่าที่เท่ากัน
    
67.                 cb.Text = DataGridView1.CurrentCell.Value
    
68.                 '// พื้นที่แสดงผลในเซลล์.  
    
69.                 Dim oRectangle = DataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, True)
    
70.                 ' หาค่าระยะ X, Y เพื่อกำหนดพิกัด (Coordinate) ให้กับ ComboBox
    
71.                 cb.Size = New Size(oRectangle.Width, oRectangle.Height)
    
72.                 '// Setting Location
    
73.                 cb.Location = New Point(oRectangle.X, oRectangle.Y)
    
74. 
    
75.                 '// การสร้างเหตุการณ์ (Event) เมื่อเกิดการเลือกไอเทมใน ComboBox ก็จะส่งผลให้กับเซลล์ในตารางกริด
    
76.                 AddHandler cb.TextChanged, AddressOf cb_TextChanged
    
77.         End Select
    
78.     End Sub
    
79. 
    
80.     ' / -------------------------------------------------------------------------------------
    
81.     ' / หากเกิดการเลือกค่าใน ComboBox ก็ให้คัดลอกค่านี้ไปยังเซลล์ใน DataGridView
    
82.     Private Sub cb_TextChanged(sender As Object, e As System.EventArgs)
    
83.         cb.Visible = False
    
84.         '// นำค่าจาก ComboBox ไปใส่ไว้ในเซลล์ของ DataGridView
    
85.         If DataGridView1.CurrentCell.ColumnIndex = 2 AndAlso cb.Text <> "" Then DataGridView1.CurrentCell.Value = cb.Text
    
86.     End Sub
    
87. 
    
88.     ' / -------------------------------------------------------------------------------------
    
89.     ' / หากเกิดการเลือกค่าใน ComboBox ก็ให้คัดลอกค่านี้ไปยังเซลล์ใน DataGridView
    
90.     Private Sub DataGridView1_CellLeave(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellLeave
    
91.         cb.Visible = False
    
92.         If DataGridView1.CurrentCell.ColumnIndex = 2 AndAlso cb.Text <> "" Then DataGridView1.CurrentCell.Value = cb.Text
    
93.     End Sub
    
94. 
    
95.     Private Sub frmDGVCBV2_Resize(sender As Object, e As System.EventArgs) Handles Me.Resize
    
96.         cb.Visible = False
    
97.     End Sub
    
98. 
    
99.     Private Sub frmDGVCBV2_FormClosed(sender As Object, e As System.Windows.Forms.FormClosedEventArgs) Handles Me.FormClosed
    
100.         Me.Dispose()
     
101.     End Sub
     
102. 
     
103. End Class

คัดลอกไปที่คลิปบอร์ด

สำหรับวิธีการที่สาม เราๆท่านๆก็คงจะพบเห็นข้อมูลได้ทั่วๆไปตามเว็บไซต์ต่างๆนั่นเอง โดยอาศัยขีดความสามารถที่มีอยู่ในตัวของ VB.NET ในการเพิ่ม Control ในตัวของ DataGridView ...

1.         '// เพิ่ม ComboBox
   
2.         Dim cmb As New DataGridViewComboBoxColumn()
   
3.         With cmb
   
4.             .HeaderText = "ComboBox"
   
5.             .Items.Add("M100")
   
6.             .Items.Add("M150")
   
7.             .Items.Add("M16")
   
8.         End With
   
9.         DataGridView1.Columns.Add(cmb)

คัดลอกไปที่คลิปบอร์ด

ก็เพราะ DataGridView มันมีกลวิธี (Method) ในการนำเอา ComboBox มาใส่ไว้ในเซลล์ของตัวมันเองได้นั่นเอง
โค้ดวิธีการที่สาม

1. Public Class frmDGVCBV3
   
2. 
   
3.     Private Sub frmDGVCBV3_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
   
4.         '//
   
5.         With DataGridView1
   
6.             .AllowUserToAddRows = False
   
7.             .AllowUserToDeleteRows = False
   
8.             .SelectionMode = DataGridViewSelectionMode.CellSelect
   
9.             .AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill
   
10.             .AutoResizeColumns()
    
11.             .MultiSelect = False
    
12.         End With
    
13.         '// Declare columns type.
    
14.         Dim Column1 As New DataGridViewTextBoxColumn()
    
15.         Dim Column2 As New DataGridViewTextBoxColumn()
    
16.         '// Add new Columns
    
17.         DataGridView1.Columns.AddRange(New DataGridViewColumn() { _
    
18.                 Column1, Column2 _
    
19.                 })
    
20.         With DataGridView1
    
21.             .Columns(0).Name = "Column 1"
    
22.             .Columns(1).Name = "Column 2"
    
23.         End With
    
24.         '// เพิ่ม ComboBox
    
25.         Dim cmb As New DataGridViewComboBoxColumn()
    
26.         With cmb
    
27.             .HeaderText = "ComboBox"
    
28.             .Items.Add("M100")
    
29.             .Items.Add("M150")
    
30.             .Items.Add("M16")
    
31.         End With
    
32.         DataGridView1.Columns.Add(cmb)
    
33.         '//
    
34.         Dim row As String() = New String() {"1", "Product 1", "M100"}
    
35.         DataGridView1.Rows.Add(row)
    
36.         row = New String() {"2", "Product 2", "M100"}
    
37.         DataGridView1.Rows.Add(row)
    
38.         row = New String() {"3", "Product 3", "M150"}
    
39.         DataGridView1.Rows.Add(row)
    
40.         row = New String() {"4", "Product 4", "M16"}
    
41.         DataGridView1.Rows.Add(row)
    
42.         '//
    
43.     End Sub
    
44. 
    
45.     Private Sub frmDGVCBV3_FormClosed(sender As Object, e As System.Windows.Forms.FormClosedEventArgs) Handles Me.FormClosed
    
46.         Me.Dispose()
    
47.     End Sub
    
48. 
    
49. End Class

คัดลอกไปที่คลิปบอร์ด

Conclusion: หลายๆคนอาจจะงงและสงสัยว่า ทำไมแอดมินต้องมาใช้วิธีการอะไรให้ยุ่งยาก ก็เล่นแบบวิธีการที่ 3 ไปเลยซ่ะก็สิ้นเรื่อง ... ลองคิดเล่นๆดูก่อนว่าหากเราต้องการเพิ่ม DateTimePicker (หรือ Control ตัวอื่นๆ) เข้าไปในเซลล์ของตารางกริดแทน ComboBox ท่านจะทำอย่างไร???
ดาวนโหลดโค้ดต้นฉบับ VB.NET (2010) ได้ที่นี่

komenservice

มีตัวอย่างแบบทำเป็น  Chedkbox ไหมครับ

thongkorn

komenservice ตอบกลับเมื่อ 2020-7-14 11:26
มีตัวอย่างแบบทำเป็น  Chedkbox ไหมครับ

1.         Dim chk As New DataGridViewCheckBoxColumn()
   
2.         chk.HeaderText = "Check Box"
   
3.         DataGridView1.Columns.Add(chk)
   
4.         '//
   
5.         Dim row As String() = New String() {"1", "Product 1", "M100", True}
   
6.         DataGridView1.Rows.Add(row)
   
7.         row = New String() {"2", "Product 2", "M100", False}
   
8.         DataGridView1.Rows.Add(row)
   
9.         row = New String() {"3", "Product 3", "M150", False}
   
10.         DataGridView1.Rows.Add(row)
    
11.         row = New String() {"4", "Product 4", "M16", True}
    
12.         DataGridView1.Rows.Add(row)

คัดลอกไปที่คลิปบอร์ด

g2gsoftuser

ขอบคุณครับ