[ASP.net+VB] สร้าง CheckBox ใน GridView

มาคราวนี้ ก็จะมาเพิ่มเติมลูกเล่นให้กับ GridView

โดยที่ Header ของ GridView นี้ จะให้สามารถ Select All และ Unselect All ได้

แบบนี้

1. เลือก Edit Header Template เพื่อไปสร้าง Event ให้กับ CheckBox ที่ Header ของ GridView

2. เลือก Event CheckedChange ของ CheckBox ที่เป็น Header Template

3. พิมพ์โค้ดตามนี้้

If CType(GridView1.HeaderRow.FindControl("chkHeader"), CheckBox).Checked Then
Dim i As Integer
For i = 0 To GridView1.Rows.Count - 1
Dim gvRow As GridViewRow = gvTransfer.Rows(i)
CType(gvRow.FindControl("chkItem"), CheckBox).Checked = True
Next
Else
Dim i As Integer
For i = 0 To GridView1.Rows.Count - 1
Dim gvRow As GridViewRow = GridView1.Rows(i)
CType(gvRow.FindControl("chkItem"), CheckBox).Checked = False
Next
End If

4. ลองรันดู จะพบว่า ยังไม่สามารถทำได้

5. แต่อย่าเพิ่งตกใจไป เนื่องจาก CheckBox นั้น AutoPostBack มันจะมีค่า Default เป็น False ซึ่งทำให้ เมื่อเราคลิกแล้ว โค้ดที่เขียนจะยังไม่ทำงาน ดังนั้นจึงต้องเปลี่ยน จาก False เป็น True ซะ เพื่อให้การคลิก CheckBox นั้น เกิดการ PostBack (ถ้างงว่า PostBack คืออะไร ให้อ่านที่นี่)

รายละเอียดเพิ่มเติม เกี่ยวกับโค้ดตัวอย่าง

เนื่องจากการสร้าง CheckBox ในครั้งนี้เป็นการสร้างใน GridView ดังนั้นจึงไม่สามารถเรียกใช้งานได้โดยตรง
จึงต้องเรียกผ่านทางฟังก์ชัน FindControl
ซึ่งเริ่มต้น เราต้องหา CheckBox ตัวที่เป็น Header ก่อน โดยใช้คำสั่งว่า
ชื่อGridView.HeaderRow.FindControl[ชื่อ ID ของ control ที่ต้องการค้นหา]
ถ้าพิมพ์แค่นี้จะเป็นแค่ expression ต้องทำการ Convert เป็นประเภทเดียวกับ Control ที่เราหา โดยใช้ฟังก์ชัน CType
เช่น CType(GridView1.HeaderRow.FindControl(“chkHeader”), CheckBox)

สำหรับ CheckBox ที่เป็น Item Template นั้น ใช้คำสั่งว่า
ชื่อGridView.Row(i).FindControl[ชื่อIDของcontrol]

1. เตรียม Database ให้พร้อม (ในที่นี้ใช้ Nwind.mdb)

2. เลือก control ที่ชื่อ GridView

3. จะได้แบบนี้

4. เลือก New data source

5. เลือก ประเภทของฐานข้อมูล ในที่นี้ใช้ Access

6. เลือกไฟล์ฐานข้อมูลที่ต้องการผูกติดกับ GridView

7. จากนั้นกด Next

8. เลือก Column, Table ที่ต้องการ

9. ลอง Test Query ดู เพื่อความมั่นใจ

10. เมื่อติดต่อกับฐานข้อมูลเรียบร้อยแล้ว ลองรันดูจะได้ผลลัพธ์แบบนี้

11. เริ่มขั้นตอนการสร้าง CheckBox ด้านหน้า โดยการคลิก Edit column

12. เลือก Add TemplateField

13. เลือก Edit Template

14. เลือก Item Template ของ Column[0]

15. ลาก CheckBox มา ( Item Template เป็นส่วนที่แสดงข้อมูล)

16. เลือก Header Template ของ Column[0]

17. ลาก CheckBox มาใส่ (ส่วน Header คือส่วนหัวของตาราง GridView)

18. เสร็จแล้วก็กด End Template Editing

19. ลองรันดู จะได้ผลลัพธ์ ตามต้องการ คือมี CheckBox อยู่ด้านหน้าของแต่ละแถว

วิธีทำวันนี้ ต้องขอบคุณ พี่ดิวและพี่มิซซู (-/|\-) อิอิ

อ่านเพิ่มเติม (มีตัวอย่างเป็น c# อย่างละเอียดด้วย)  คลิก