[VB.NET] การใช้งานตารางกริด GridGroupingControl ของฟรีระดับโลกจากค่าย Syncfusion

thongkorn

วันนี้แอดมินจะมาขอแนะนำ ตารางกริดระดับสุดยอดของฟรีจริงๆจากค่าย Syncfusion ภายใต้ชื่อ Syncfusion Essential รุ่น Community ซึ่งทางผู้ผลิตกำหนดเงื่อนไขในการใช้งานฟรีว่า องค์กรนั้นๆต้องมี Deveopers ไม่เกิน 5 คน และมีผลประกอบการไม่เกิน 1 ล้านยูเอสดอลล่าร์ ... และที่สำคัญคือ สามารถนำโปรเจคของเราไปจำหน่ายในเชิงพาณิชย์ได้ครับทั่นผู้ชม ... ท่านสามารถเข้าไปสมัครและรับของฟรีมาใช้ได้เลย นอกเหนือไปจากนั้นค่ายนี้เขายัง eBook ในรูปแบบ PDF แจกฟรีเอาไว้ให้เราได้อ่านกันอีกหลายเรื่องครับ ...

โดยหลักๆที่ทางผู้ผลิตให้มาประกอบไปด้วย ...

- 800+ Controls and Frameworks
- Enterprise solutions for Big Data, Dashboards and Reporting
- A $15,960 value for FREE
- Support and updates included

Control ตัวแรกที่แอดมินทดสอบคือ ตารางกริด GridGroupingControl ซึ่งจะขอเรียกชื่อย่อว่า GGC กันนะครับ ซึ่งเป็นตารางกริดแบบแสดงผลทั่วไปได้ และสามารถทำการจัดกลุ่มได้ด้วย (อันนี้สำมะคัญเลย) การทดสอบทั่วๆไปที่แอดมินวางแนวทางไว้ดังนี้ คือ ...
- เรื่องหน้าตาก่อนล่ะ อันนี้ผ่านฉลุยตั้งแต่แรกเริ่มที่ได้ลูบคลำแล้วครับ 5555+
- ทำงานได้รวดเร็ว อันนี้แอดมินลองทดสอบดูเอง จึงได้นำข้อมูลมาเผยแพร่นี่แหละครับ
- การควบคุม ยากง่ายขนาดไหน ซึ่งมันอยู่ที่เรื่องประสบการณ์ของแต่ละบุคคล ในการค้นหาคำตอบ

อันดับแรกต้องดู ลักษณะโครงสร้างของตัว GridGroupingControl ให้ลึกซึ้งดื่มด่ำซ่ะก่อน เพราะเวลาไปอ่านคู่มือเราจะโฟกัสในทีละส่วนได้

วิธีการหลักๆในการศึกษา Control ต่างๆแล้ว เราจะต้องดูจาก คู่มือ หรือ Help ที่มีมาให้ เรื่องนี้เป็นเรื่องที่สำคัญที่หลายๆคนมักมองข้ามไป โดยเฉพาะบรรดามือใหม่ทั้งหลาย ที่ไม่ค่อยยอมอ่านกัน กะจะหาแต่เพียงในอินเทอร์เน็ต ซึ่งจะทำให้เราพัฒนาศักยภาพตัวเองต่อไปได้ยากลำบาก อีกทั้งตัวอย่างที่ Syncfusion ให้มา ก็ล้วนแล้วแต่เป็น C# ทั้งนั้น แต่ข้อมูลรายละเอียดในการควบคุม GGC ด้วย VB.Net มันกลับไปอยู่ที่ Help ...

อนึ่ง!!! ... Control ต่างๆที่เราใช้งานกันอยู่ในปัจจุบัน มันมีคุณสมบัติ (Properties) ประจำตัวอยู่นับร้อยๆอย่าง ซึ่งเราไม่สามารถจดจำมันได้ทั้งหมดหรอกครับ ดังนั้นในงานทั้งหมดของแอดมิน จะใช้ วิธีการแบบ Run-Time คือใช้การเขียนโค้ด แล้วสั่งรันโปรแกรมจึงจะเห็นผล แทนที่จะจับ Control ลากมาวางแล้วปรับแต่งคุณสมบัติผ่าน Design-Time เพราะ ...
- เราไม่ต้องจดจำ แต่อาศัยความเข้าใจด้วยการอ่าน หรือตีความหมายจากโค้ดแทน
- Copy & Paste โค้ดไปใช้ได้ โดยที่ไม่ต้องห่วงพะวงกับเวอร์ชั่นของตัว Control เอง  
- เมื่อเข้าใจในพฤติกรรมของ Control แต่ละตัว ก็จะสามารถควบคุมมันได้ตามใจนึก ... สิ่งนี้จะนำทางให้เราเรียนรู้ฝึกฝน กับบรรดา Control ตัวใหม่ๆต่างค่ายได้อย่างไม่ยากเย็นนัก เพราะหลักการต่างๆมันแทบไม่ได้แตกต่างกันเลย

References ... เวอร์ชั่นปัจจุบันที่แอดมินใช้ คือ 15.2.0.40 นะครับ เพราะไม่รู้ว่าทำไมเวอร์ชั่นที่ใหม่กว่านี้ มันตัดเอาโค้ดตัวอย่าง Syncfusion Control Panel ทิ้งไปซ่ะดื้อๆ 5555+

Design Time ... การจับลาก GridGroupingControl มาวางแปะไว้บนฟอร์ม โดยที่ไม่ต้องไปกำหนดค่าคุณสมบัติอะไรทั้งสิ้น เราจะใช้การสั่งจากโค้ดแทน


ตัวอย่างการ Join ตารางข้อมูล 2 ตาราง (เพราะเดี๋ยวรอบหน้าแอดมินจะสาธิตวิธีการทำ Group หรือการจัดกลุ่มด้วยวิธีการเขียนโค้ดให้ดูอีกที) มาดูโค้ดตัวอย่างบางส่วนกัน ...

1.     ' / -----------------------------------------------------------------
   
2.     ' / Initilized GridGroupingControl
   
3.     Private Sub InitGridGroup()
   
4.         '// Initialize Columns GridGroup
   
5.         With Me.GGC
   
6.             '// Hidden Primary Key Column
   
7.             .TableDescriptor.VisibleColumns.Remove("PrimaryKey")
   
8.             'Using Column Name
   
9.             .TableDescriptor.Columns("ID").HeaderText = "ID"
   
10.             .TableDescriptor.Columns("NumberField").HeaderText = "Number Value"
    
11.             .TableDescriptor.Columns("DoubleField").HeaderText = "Double Value"
    
12.             .TableDescriptor.Columns("DateField").HeaderText = "Date"
    
13.             .TableDescriptor.Columns("DateField").Appearance.AnyRecordFieldCell.Format = "dd/MM/yyyy"
    
14.             .TableDescriptor.Columns("DateField").Appearance.AnyRecordFieldCell.CellType = GridCellTypeName.TextBox
    
15.         End With
    
16.         '// GridVerticalAlignment.Middle
    
17.         For i As Byte = 0 To 5
    
18.             With Me.GGC
    
19.                 .TableDescriptor.Columns(i).Appearance.AnyRecordFieldCell.VerticalAlignment = GridVerticalAlignment.Middle
    
20.                 .TableDescriptor.Columns(i).AllowGroupByColumn = False
    
21.             End With
    
22.         Next
    
23.         '// Initialize normal GridGrouping
    
24.         With Me.GGC
    
25.             ' Allows GroupDropArea to be visible
    
26.             .ShowGroupDropArea = False  ' Disable
    
27.             '// Hidden Top Level of Grouping
    
28.             .TopLevelGroupOptions.ShowCaption = False
    
29. 
    
30.             '// Metro Styles
    
31.             .GridVisualStyles = Syncfusion.Windows.Forms.GridVisualStyles.Metro
    
32.             ' Disables editing in GridGroupingControl
    
33.             .ActivateCurrentCellBehavior = GridCellActivateAction.None
    
34.             '.ActivateCurrentCellBehavior = GridCellActivateAction.ClickOnCell
    
35.             '// Disable Add New
    
36.             .TableDescriptor.AllowNew = False
    
37.             '// Autofit Columns
    
38.             .AllowProportionalColumnSizing = True
    
39. 
    
40.             '// Row Height
    
41.             .Table.DefaultRecordRowHeight = 25
    
42.             '//
    
43.             .Table.DefaultCaptionRowHeight = 25
    
44.             .Table.DefaultColumnHeaderRowHeight = 30    '// Columns Header
    
45. 
    
46.             '// Selection
    
47.             .TableOptions.ListBoxSelectionMode = SelectionMode.One
    
48.             'Selection Back color
    
49.             .TableOptions.SelectionBackColor = Color.Firebrick
    
50.             '//
    
51.             .Appearance.ColumnHeaderCell.TextColor = Color.DarkBlue
    
52. 
    
53.             'Applies back color as LightCyan for alternative records in the Grid.
    
54.             .Appearance.AlternateRecordFieldCell.BackColor = Color.LightCyan
    
55. 
    
56.             '.TableModel.Options.SelectCellsMouseButtonsMask = MouseButtons.Right
    
57. 
    
58.             '/ Disable record preview row
    
59.             .TableOptions.ShowRecordPreviewRow = False
    
60.             '//
    
61.             '/ Will enable the Group Header for the top most group.
    
62.             .TopLevelGroupOptions.ShowGroupHeader = False ' True
    
63.             '/ Will enable the Group Footer for the group.
    
64.             .TopLevelGroupOptions.ShowGroupFooter = False 'True
    
65.             '//
    
66.             .TableOptions.GroupHeaderSectionHeight = 30
    
67.             .TableOptions.GroupFooterSectionHeight = 30
    
68.         End With
    
69. 
    
70.     End Sub

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

การตั้งค่าคุณสมบัติ (Properties) เริ่มต้น ให้กับตัวหลักๆของ GridGroupingControl ... หากนำไปใช้กับโปรเจคอื่นๆก็แค่ Copy & Paste ไปใช้งานได้เลย ส่วนตัว Control ไม่ว่าจะเวอร์ชั่นไหนก็ไม่สำคัญ

การค้นคืนข้อมูล (Retrieval Data) อันนี้เรียกได้ว่าเป็นแพทเทิร์นของทุกๆงาน

1.     ' / -----------------------------------------------------------------
   
2.     ' / blnSearch = True, It's search for specified data, False = all data is displayed.
   
3.     Private Sub RetrieveData(Optional ByVal blnSearch As Boolean = False)
   
4.         strSQL = _
   
5.             " SELECT tblSample.PrimaryKey, tblSample.ID, tblSample.NumberField, tblSample.DoubleField, " & _
   
6.             " tblSample.DateField, tblGroup.GroupName " & _
   
7.             " FROM tblSample INNER JOIN tblGroup ON tblSample.GroupFK = tblGroup.GroupPK "
   
8. 
   
9.         '// blnSearch = True for Search
   
10.         If blnSearch Then
    
11.             strSQL = strSQL & _
    
12.                 " WHERE " & _
    
13.                 " [ID] " & " Like '%" & txtSearch.Text & "%'" & " OR " & _
    
14.                 " [GroupName] " & " Like '%" & txtSearch.Text & "%'" & _
    
15.                 " ORDER BY PrimaryKey "
    
16.         Else
    
17.             strSQL = strSQL & " ORDER BY PrimaryKey "
    
18.         End If
    
19.         '//
    
20.         If Conn.State = ConnectionState.Closed Then Conn.Open()
    
21.         '// Creates Data Adapter.
    
22.         DA = New OleDbDataAdapter(strSQL, Conn)
    
23.         ' Creates and fills Data Set.
    
24.         DS = New DataSet
    
25.         DA.Fill(DS)
    
26.         Me.GGC.DataSource = DS.Tables(0)
    
27.         lblRecordCount.Text = "[Total: " & Format(DS.Tables(0).Rows.Count, "#,##") & " Records.]"
    
28.         DA.Dispose()
    
29.         DS.Dispose()
    
30.         Conn.Close()
    
31.         '//
    
32.         Call InitGridGroup()
    
33.         '//
    
34.         txtSearch.Clear()
    
35.     End Sub

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

เหตุการณ์ที่ผู้ใช้เลือกแต่ละแถวรายการ ด้วยการกดดับเบิ้ลคลิ๊กเมาส์

1.     ' / -----------------------------------------------------------------
   
2.     '// Double click event for show Primary Key which hidden in Column(0)
   
3.     Private Sub GGC_TableControlCellDoubleClick(ByVal sender As Object, ByVal e As Syncfusion.Windows.Forms.Grid.Grouping.GridTableControlCellClickEventArgs) Handles GGC.TableControlCellDoubleClick
   
4.         '// Row of Column Header
   
5.         If e.Inner.RowIndex <= 1 Then Return
   
6.         '/ Notify the double click performed in a cell
   
7.         Dim rec As Record = Me.GGC.Table.DisplayElements(e.TableControl.CurrentCell.RowIndex).ParentRecord
   
8.         If (rec) IsNot Nothing Then
   
9.             MsgBox("Primary key = " & rec.GetValue("PrimaryKey").ToString)
   
10.         End If
    
11.     End Sub

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

เหตุการณ์ที่ผู้ใช้เลือกแต่ละแถวรายการ ด้วยการกด Enter ในแถวรายการ

1.     ' / -----------------------------------------------------------------
   
2.     '// Press enter each row.
   
3.     Private Sub GGC_TableControlCurrentCellKeyPress(sender As Object, e As Syncfusion.Windows.Forms.Grid.Grouping.GridTableControlKeyPressEventArgs) Handles GGC.TableControlCurrentCellKeyPress
   
4.         '// Check rows count before.
   
5.         If GGC.TableModel.RowCount <= 0 Then Return
   
6.         '/ Notify the current cell keypress
   
7.         Dim rec As Record = Me.GGC.Table.DisplayElements(GGC.TableControl.CurrentCell.RowIndex).ParentRecord
   
8.         If (rec) IsNot Nothing Then
   
9.             MsgBox("Primary key = " & rec.GetValue("PrimaryKey").ToString)
   
10.         End If
    
11.     End Sub

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

Conclusion: ขอให้สังเกตด้วยว่า แอดมินจะนำค่า Primary Key ไปไว้ในหลักแรก (Index = 0) และต้องซ่อนเอาไว้เสมอ เพราะผู้ใช้งานจะไม่ได้ใช้ค่านี้ แต่ตัวเราผู้พัฒนาโปรแกรมจะต้องใช้ค่านี้เป็นหลักในการอ้างอิงถึง สำหรับผู้ใช้งาน เขา/เธอจะเห็นเพียงค่า IDentifier หรือ ID แทน ไม่ว่าจะเป็นโปรเจคใดๆก็ตามในเรื่องราวที่เกี่ยวข้องกับฐานข้อมูล ... สวัสดี

ดาวน์โหลดโค้ดต้นฉบับแบบเต็ม VB.NET (2010) ได้ที่นี่