ชุมชนคนรักภาษาเบสิค - Visual Basic Community

 ลืมรหัสผ่าน
 ลงทะเบียน
ค้นหา
ดู: 1927|ตอบกลับ: 1

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

[คัดลอกลิงก์]

213

กระทู้

301

โพสต์

2407

เครดิต

ผู้ดูแลระบบ

Rank: 9Rank: 9Rank: 9

เครดิต
2407


ว่ากันไปแล้วถึง 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.                 '// Setting the format (i.e. 02/07/2017 - dd/mm/yyyy)
  8.                 oDTP.Format = DateTimePickerFormat.Short

  9.                 '// It returns the retangular area that represents the Display area for a cell  
  10.                 Dim oRectangle = DataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, True)

  11.                 '//Setting area for DateTimePicker Control  
  12.                 oDTP.Size = New Size(oRectangle.Width, oRectangle.Height)

  13.                 '// Setting Location
  14.                 oDTP.Location = New Point(oRectangle.X, oRectangle.Y)
  15.                 '// Read value from DataGridView into DateTimePicker
  16.                 oDTP.Value = DataGridView1.CurrentCell.Value
  17.                 '// Now make it visible  
  18.                 oDTP.Visible = True
  19.                 '// Force to change date value at oDTP_ValueChanged Event.
  20.                 AddHandler oDTP.ValueChanged, AddressOf oDTP_ValueChanged

  21.                 '// Delete Button
  22.             Case 3
  23.                 'MsgBox(("Row : " + e.RowIndex.ToString & "  Col : ") + e.ColumnIndex.ToString)
  24.                 Dim colName As String = DataGridView1.Columns(e.ColumnIndex).Name
  25.                 If colName = "btnDelRow" Then
  26.                     '// Delete current row from DataGridView1
  27.                     DataGridView1.Rows.Remove(DataGridView1.CurrentRow)
  28.                 End If
  29.         End Select
  30.     End Sub
คัดลอกไปที่คลิปบอร์ด
เหตุการณ์ในการคลิ๊กเมาส์ที่เซลล์ต่างๆในหลักที่ 3 (Index = 2) ก็คงไม่ต้องอธิบายอะไรกันให้มากมาย (ไม่ได้กระแดะในการใช้คอมเมนท์แต่ละบรรทัดเป็นภาคภาษาอังกฤษ แต่เพราะแอดมินต้องแชร์แลกเปลี่ยนความรู้ให้กับโปรแกรมเมอร์ต่างประเทศด้วยข่ะรับ)

มาดูโค้ดฉบับเต็ม ...
  1. ' / --------------------------------------------------------------------------------
  2. ' / Developer : Mr.Surapon Yodsanga (Thongkorn Tubtimkrob)
  3. ' / eMail : [email protected]
  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.     Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
  17.         '// Initialize DataGridView Control
  18.         With DataGridView1
  19.             .AllowUserToAddRows = False
  20.             .AllowUserToDeleteRows = False
  21.             .AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill
  22.             .AutoResizeColumns()
  23.         End With
  24.         '// Declare columns type.
  25.         Dim Column1 As New DataGridViewTextBoxColumn()
  26.         Dim Column2 As New DataGridViewTextBoxColumn()
  27.         Dim Column3 As New DataGridViewTextBoxColumn()
  28.         '// Add new Columns
  29.         DataGridView1.Columns.AddRange(New DataGridViewColumn() { _
  30.                 Column1, Column2, Column3 _
  31.                 })
  32.         With DataGridView1
  33.             .Columns(0).Name = "Product ID"
  34.             .Columns(1).Name = "Product Name"
  35.             .Columns(2).Name = "Date"
  36.         End With
  37.         '// Add 4th column (Index = 3), It's Button.
  38.         Dim btn As New DataGridViewButtonColumn()
  39.         DataGridView1.Columns.Add(btn)
  40.         With btn
  41.             .HeaderText = ""
  42.             .Text = "Delete"
  43.             .Name = "btnDelRow"
  44.             .UseColumnTextForButtonValue = True
  45.             .Width = 80
  46.         End With

  47.         '// SAMPLE DATA
  48.         Dim RandomClass As New Random()
  49.         '// DateTime.Today.AddDays(-RandomClass.Next(365)) --> Random past date 365 days.
  50.         Dim row As String() = New String() {"1", "Product 1", DateTime.Today.AddDays(-RandomClass.Next(365))}
  51.         DataGridView1.Rows.Add(row)
  52.         row = New String() {"2", "Product 2", DateTime.Today.AddDays(-RandomClass.Next(365))}
  53.         DataGridView1.Rows.Add(row)
  54.         row = New String() {"3", "Product 3", DateTime.Today.AddDays(-RandomClass.Next(365))}
  55.         DataGridView1.Rows.Add(row)
  56.         row = New String() {"4", "Product 4", DateTime.Today.AddDays(-RandomClass.Next(365))}
  57.         DataGridView1.Rows.Add(row)

  58.     End Sub

  59.     Private Sub DataGridView1_CellClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellClick
  60.         Select Case e.ColumnIndex
  61.             '// DateTimePicker
  62.             Case 2
  63.                 '//Adding DateTimePicker control into DataGridView   
  64.                 DataGridView1.Controls.Add(oDTP)

  65.                 '// Setting the format (i.e. 02/07/2017 - dd/mm/yyyy)
  66.                 oDTP.Format = DateTimePickerFormat.Short

  67.                 '// It returns the retangular area that represents the Display area for a cell  
  68.                 Dim oRectangle = DataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, True)

  69.                 '//Setting area for DateTimePicker Control  
  70.                 oDTP.Size = New Size(oRectangle.Width, oRectangle.Height)

  71.                 '// Setting Location
  72.                 oDTP.Location = New Point(oRectangle.X, oRectangle.Y)
  73.                 '// Read value from DataGridView into DateTimePicker
  74.                 oDTP.Value = DataGridView1.CurrentCell.Value
  75.                 '// Now make it visible  
  76.                 oDTP.Visible = True
  77.                 '// Force to change date value at oDTP_ValueChanged Event.
  78.                 AddHandler oDTP.ValueChanged, AddressOf oDTP_ValueChanged

  79.                 '// Delete Button
  80.             Case 3
  81.                 'MsgBox(("Row : " + e.RowIndex.ToString & "  Col : ") + e.ColumnIndex.ToString)
  82.                 Dim colName As String = DataGridView1.Columns(e.ColumnIndex).Name
  83.                 If colName = "btnDelRow" Then
  84.                     '// Delete current row from DataGridView1
  85.                     DataGridView1.Rows.Remove(DataGridView1.CurrentRow)
  86.                 End If
  87.         End Select
  88.     End Sub

  89.     '// Event Handler when the change value in DateTimePicker.
  90.     Private Sub oDTP_ValueChanged(sender As Object, e As System.EventArgs)
  91.         '// Display date value.
  92.         DataGridView1.CurrentCell.Value = Format(oDTP.Value, "dd/MM/yyyy")
  93.     End Sub

  94.     Private Sub DataGridView1_CellLeave(sender As Object, e As System.Windows.Forms.DataGridViewCellEventArgs) Handles DataGridView1.CellLeave
  95.         '// Hidden DateTimePicker
  96.         oDTP.Visible = False
  97.     End Sub

  98.     Private Sub Form1_Resize(sender As Object, e As System.EventArgs) Handles Me.Resize
  99.         oDTP.Visible = False
  100.     End Sub
  101. End Class
คัดลอกไปที่คลิปบอร์ด
Conclusion: ... จากสามภาค จะเห็นได้เลยว่าเป็นการใช้ความรู้ของการควบคุม Control มาช่วยในการแก้ปัญหา โดยที่ไม่จำเป็นต้องพึ่งพากลุ่มเครื่องมือ Components จากผู้ผลิตรายอื่นหรือ Third Party แต่อย่างใด ว่าง่ายๆคือ การใช้ทรัพยากรระบบที่มีอยู่ให้เกิดความคุ้มค่าและเกิดประโยชน์สูงสุด นอกจากนี้ยังเป็นการเพิ่มพูนทักษะ และประสบการณ์ให้กับตัวเองได้มากขึ้นอีกต่างหาก ... สวัสดี
ดาวน์โหลดโค้ดต้นฉบับ VB.NET (2010) ได้ที่นี่

ขออภัย! โพสต์นี้มีไฟล์แนบหรือรูปภาพที่ไม่ได้รับอนุญาตให้คุณเข้าถึง

คุณจำเป็นต้อง ลงชื่อเข้าใช้ เพื่อดาวน์โหลดหรือดูไฟล์แนบนี้ คุณยังไม่มีบัญชีใช่ไหม? ลงทะเบียน

x
สิ่งที่ดีกว่าการให้ คือการให้แบบไม่มีที่สิ้นสุด

0

กระทู้

7

โพสต์

32

เครดิต

Newbie

Rank: 1

เครดิต
32
โพสต์ 2018-10-20 20:36:21 | ดูโพสต์ทั้งหมด

ขอบคุณครับ

0

กระทู้

3

โพสต์

42

เครดิต

Newbie

Rank: 1

เครดิต
42
โพสต์ 2019-7-12 11:27:14 | ดูโพสต์ทั้งหมด


ขอบคุณครับ
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

รายละเอียดเครดิต

ข้อความล้วน|อุปกรณ์พกพา|ประวัติการแบน|G2GNet.com  

GMT+7, 2020-1-21 12:29 , Processed in 0.256324 second(s), 5 queries , File On.

Powered by Discuz! X3.3 R20170401, Rev.54

© 2001-2017 Comsenz Inc.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้