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

thongkorn

ว่ากันไปแล้วถึง 2 ภาคคือ [VB6] การนำ ComboBox Control ไปใส่ไว้ในตารางกริด MSFlexGrid แบบ Run Time และ [VB.NET] การนำ ComboBox Control ไปใส่ไว้ในตารางกริด DataGridView แบบ Run Time จะเห็นได้ว่ากรณีของ ComboBox ในตารางกริด (DataGridView) ของ VB.NET มันมีกลวิธี (Method) ในการสร้างจากตัวของตารางกริดอยู่แล้ว นั่นก็เลยไม่มีปัญหา แต่ทว่าหากเราจะนำเอา DateTimePicker มาใส่ไว้ในเซลล์ของตารางกริดนี่ซิ จะทำได้อย่างไร??? ... สำหรับ DateTimePicker มันไม่มี Method ที่จะให้เราเอาตัวมันไปใส่ไว้ในตารางกริดโดยตรงได้ เราก็แก้ปัญหาด้วยการนำแนวคิดของ VB6 มาผสมกับ VB.NET นั่นคือ ... สร้าง DateTimePicker ขึ้นมาแบบ @Run Time แล้วทำการเคลื่อนย้ายมันไปปิดทับเซลล์ที่เราต้องการนั่นเอง ... หมูน้อยร้องแมวเหมียวเลยมั้ยล่ะครับทั่นผู้ชม

หลักการคิด
- เมื่อเมาส์เคลื่อนที่ไปยังหลักที่ 3 ให้เคลื่อนที่ DateTimePicker (ขอเรียกสั้นๆว่า DTP) ไปทับลงบนเซลล์นั้น และเปิดการมองเห็น (Visible = True)
- เกิดการคัดลอกข้อมูลจากเซลล์ไปยัง DTP เราก็จะเห็นค่าวันที่ในเซลล์ไปปรากฏอยู่ใน DTP
- หากมีการเลือกค่าวันที่ใน DTP ใหม่ มันก็จะคัดลอกข้อมูลจาก DTP เอาไปเก็บไว้ในเซลล์อีกครั้งด้วย
- หากเมาส์ไปโฟกัส Control ตัวอื่นๆ ก็ปิดการแสดงผล DTP (Visible = False) เราก็เห็นค่าในเซลล์นั้นตรงกับค่าวันที่ๆเราเลือกเอาไว้
- จบบริบูรณ์

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

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

ก็เช่นเคย ประกาศตัวแปรเอาไว้ให้มองเห็นหมดทั้งฟอร์มก่อน

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 = "Product ID"
    
11.             .Columns(1).Name = "Product Name"
    
12.             .Columns(2).Name = "Date"
    
13.         End With
    
14.         '// Add 4th column (Index = 3), It's Button.
    
15.         Dim btn As New DataGridViewButtonColumn()
    
16.         DataGridView1.Columns.Add(btn)
    
17.         With btn
    
18.             .HeaderText = ""
    
19.             .Text = "Delete"
    
20.             .Name = "btnDelRow"
    
21.             .UseColumnTextForButtonValue = True
    
22.             .Width = 80
    
23.         End With

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

สำหรับ DateTimePicker จะอยู่ในหลักที่ 3 (Index = 2) เรายังคงให้เซลล์ของตารางกริดเป็น TextBox ส่วนหลักที่ 4 (Index = 3) ก็เอาไว้ใส่ Button Control และแน่นอนล่ะว่าตัวตารางกริดมันสนับสนุนอยู่แล้ว ก็เลยไม่มีปัญหาอะไร ...

1.     Private Sub DataGridView1_CellClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellClick
   
2.         Select Case e.ColumnIndex
   
3.             '// DateTimePicker
   
4.             Case 2
   
5.                 '//Adding DateTimePicker control into DataGridView   
   
6.                 DataGridView1.Controls.Add(oDTP)
   
7. 
   
8.                 '// Setting the format (i.e. 02/07/2017 - dd/mm/yyyy)
   
9.                 oDTP.Format = DateTimePickerFormat.Short
   
10. 
    
11.                 '// It returns the retangular area that represents the Display area for a cell  
    
12.                 Dim oRectangle = DataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, True)
    
13. 
    
14.                 '//Setting area for DateTimePicker Control  
    
15.                 oDTP.Size = New Size(oRectangle.Width, oRectangle.Height)
    
16. 
    
17.                 '// Setting Location
    
18.                 oDTP.Location = New Point(oRectangle.X, oRectangle.Y)
    
19.                 '// Read value from DataGridView into DateTimePicker
    
20.                 oDTP.Value = DataGridView1.CurrentCell.Value
    
21.                 '// Now make it visible  
    
22.                 oDTP.Visible = True
    
23.                 '// Force to change date value at oDTP_ValueChanged Event.
    
24.                 AddHandler oDTP.ValueChanged, AddressOf oDTP_ValueChanged
    
25. 
    
26.                 '// Delete Button
    
27.             Case 3
    
28.                 'MsgBox(("Row : " + e.RowIndex.ToString & "  Col : ") + e.ColumnIndex.ToString)
    
29.                 Dim colName As String = DataGridView1.Columns(e.ColumnIndex).Name
    
30.                 If colName = "btnDelRow" Then
    
31.                     '// Delete current row from DataGridView1
    
32.                     DataGridView1.Rows.Remove(DataGridView1.CurrentRow)
    
33.                 End If
    
34.         End Select
    
35.     End Sub

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

เหตุการณ์ในการคลิ๊กเมาส์ที่เซลล์ต่างๆในหลักที่ 3 (Index = 2) ก็คงไม่ต้องอธิบายอะไรกันให้มากมาย (ไม่ได้กระแดะในการใช้คอมเมนท์แต่ละบรรทัดเป็นภาคภาษาอังกฤษ แต่เพราะแอดมินต้องแชร์แลกเปลี่ยนความรู้ให้กับโปรแกรมเมอร์ต่างประเทศด้วยข่ะรับ)

มาดูโค้ดฉบับเต็ม ...

1. ' / --------------------------------------------------------------------------------
   
2. ' / Developer : Mr.Surapon Yodsanga (Thongkorn Tubtimkrob)
   
3. ' / eMail : thongkorn@hotmail.com
   
4. ' / URL: http://www.g2gnet.com (Khon Kaen - Thailand)
   
5. ' / Facebook: https://www.facebook.com/g2gnet (For Thailand)
   
6. ' / Facebook: https://www.facebook.com/commonindy (Worldwide)
   
7. ' / Purpose: Adding DateTimePicker and Button control into DataGridView @Runtime.
   
8. ' / Microsoft Visual Basic .NET (2010)
   
9. ' /
   
10. ' / This is open source code under @CopyLeft by Thongkorn Tubtimkrob.
    
11. ' / You can modify and/or distribute without to inform the developer.
    
12. ' / --------------------------------------------------------------------------------
    
13. Public Class Form1
    
14.     '// ประกาศตัวแปร Object ของ DateTimePicker
    
15.     Dim oDTP As New DateTimePicker
    
16. 
    
17.     Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
    
18.         '// Initialize DataGridView Control
    
19.         With DataGridView1
    
20.             .AllowUserToAddRows = False
    
21.             .AllowUserToDeleteRows = False
    
22.             .AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill
    
23.             .AutoResizeColumns()
    
24.         End With
    
25.         '// Declare columns type.
    
26.         Dim Column1 As New DataGridViewTextBoxColumn()
    
27.         Dim Column2 As New DataGridViewTextBoxColumn()
    
28.         Dim Column3 As New DataGridViewTextBoxColumn()
    
29.         '// Add new Columns
    
30.         DataGridView1.Columns.AddRange(New DataGridViewColumn() { _
    
31.                 Column1, Column2, Column3 _
    
32.                 })
    
33.         With DataGridView1
    
34.             .Columns(0).Name = "Product ID"
    
35.             .Columns(1).Name = "Product Name"
    
36.             .Columns(2).Name = "Date"
    
37.         End With
    
38.         '// Add 4th column (Index = 3), It's Button.
    
39.         Dim btn As New DataGridViewButtonColumn()
    
40.         DataGridView1.Columns.Add(btn)
    
41.         With btn
    
42.             .HeaderText = ""
    
43.             .Text = "Delete"
    
44.             .Name = "btnDelRow"
    
45.             .UseColumnTextForButtonValue = True
    
46.             .Width = 80
    
47.         End With
    
48. 
    
49.         '// SAMPLE DATA
    
50.         Dim RandomClass As New Random()
    
51.         '// DateTime.Today.AddDays(-RandomClass.Next(365)) --> Random past date 365 days.
    
52.         Dim row As String() = New String() {"1", "Product 1", DateTime.Today.AddDays(-RandomClass.Next(365))}
    
53.         DataGridView1.Rows.Add(row)
    
54.         row = New String() {"2", "Product 2", DateTime.Today.AddDays(-RandomClass.Next(365))}
    
55.         DataGridView1.Rows.Add(row)
    
56.         row = New String() {"3", "Product 3", DateTime.Today.AddDays(-RandomClass.Next(365))}
    
57.         DataGridView1.Rows.Add(row)
    
58.         row = New String() {"4", "Product 4", DateTime.Today.AddDays(-RandomClass.Next(365))}
    
59.         DataGridView1.Rows.Add(row)
    
60. 
    
61.     End Sub
    
62. 
    
63.     Private Sub DataGridView1_CellClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellClick
    
64.         Select Case e.ColumnIndex
    
65.             '// DateTimePicker
    
66.             Case 2
    
67.                 '//Adding DateTimePicker control into DataGridView   
    
68.                 DataGridView1.Controls.Add(oDTP)
    
69. 
    
70.                 '// Setting the format (i.e. 02/07/2017 - dd/mm/yyyy)
    
71.                 oDTP.Format = DateTimePickerFormat.Short
    
72. 
    
73.                 '// It returns the retangular area that represents the Display area for a cell  
    
74.                 Dim oRectangle = DataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, True)
    
75. 
    
76.                 '//Setting area for DateTimePicker Control  
    
77.                 oDTP.Size = New Size(oRectangle.Width, oRectangle.Height)
    
78. 
    
79.                 '// Setting Location
    
80.                 oDTP.Location = New Point(oRectangle.X, oRectangle.Y)
    
81.                 '// Read value from DataGridView into DateTimePicker
    
82.                 oDTP.Value = DataGridView1.CurrentCell.Value
    
83.                 '// Now make it visible  
    
84.                 oDTP.Visible = True
    
85.                 '// Force to change date value at oDTP_ValueChanged Event.
    
86.                 AddHandler oDTP.ValueChanged, AddressOf oDTP_ValueChanged
    
87. 
    
88.                 '// Delete Button
    
89.             Case 3
    
90.                 'MsgBox(("Row : " + e.RowIndex.ToString & "  Col : ") + e.ColumnIndex.ToString)
    
91.                 Dim colName As String = DataGridView1.Columns(e.ColumnIndex).Name
    
92.                 If colName = "btnDelRow" Then
    
93.                     '// Delete current row from DataGridView1
    
94.                     DataGridView1.Rows.Remove(DataGridView1.CurrentRow)
    
95.                 End If
    
96.         End Select
    
97.     End Sub
    
98. 
    
99.     '// Event Handler when the change value in DateTimePicker.
    
100.     Private Sub oDTP_ValueChanged(sender As Object, e As System.EventArgs)
     
101.         '// Display date value.
     
102.         DataGridView1.CurrentCell.Value = Format(oDTP.Value, "dd/MM/yyyy")
     
103.     End Sub
     
104. 
     
105.     Private Sub DataGridView1_CellLeave(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellLeave
     
106.         '// Hidden DateTimePicker
     
107.         oDTP.Visible = False
     
108.     End Sub
     
109. 
     
110.     Private Sub Form1_Resize(sender As Object, e As System.EventArgs) Handles Me.Resize
     
111.         oDTP.Visible = False
     
112.     End Sub
     
113. End Class

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

Conclusion: ... จากสามภาค จะเห็นได้เลยว่าเป็นการใช้ความรู้ของการควบคุม Control มาช่วยในการแก้ปัญหา โดยที่ไม่จำเป็นต้องพึ่งพากลุ่มเครื่องมือ Components จากผู้ผลิตรายอื่นหรือ Third Party แต่อย่างใด ว่าง่ายๆคือ การใช้ทรัพยากรระบบที่มีอยู่ให้เกิดความคุ้มค่าและเกิดประโยชน์สูงสุด นอกจากนี้ยังเป็นการเพิ่มพูนทักษะ และประสบการณ์ให้กับตัวเองได้มากขึ้นอีกต่างหาก ... สวัสดี
ดาวน์โหลดโค้ดต้นฉบับ VB.NET (2010) ได้ที่นี่

hot2

ขอบคุณครับ

yusanc

ขอบคุณครับ

Dhongpob

ขอบคุณครับ