Day: May 19, 2021

จากบทความ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery ท่านผู้อ่านที่ได้เข้าไปอ่านแล้วอาจจะมีคำถามว่าถ้าไม่อยากใช้ jQuery ล่ะ เนื่องด้วยสาเหตุอะไรก็แล้วแต่ วันนี้ผมก็จะมานำเสนอการซ่อน/แสดงคอลัมน์ใน ASP.NET GridView อีกวิธี ซึ่งจะเป็นการควบคุมจาก code behind ที่เป็นภาษา C# หรือ VB.NET ในที่นี่ผู้เขียนจะใช้ภาษา C#

ซึ่งจะมีขั้นตอนต่างๆ ดังต่อไปนี้

1. ตัวอย่างโค้ด HTML จะมีการแก้ไขเพิ่มขึ้นอีกเล็กน้อยจากบทความเดิม

<asp:CheckBox ID="chkCallNo" Text=" Show CallNo from code behind" runat="server" Checked="true"
              AutoPostBack="true" OnCheckedChanged="chkCallNo_CheckedChanged" />
<hr />

<asp:GridView ID="gvBib" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="BIB_NO" HeaderText="Bib#" />
        <asp:BoundField DataField="TITLE" HeaderText="Title" />
        <asp:BoundField DataField="AUTHOR" HeaderText="Author" />
        <asp:BoundField DataField="CALL_NO" HeaderText="CallNo" />
        <asp:BoundField DataField="ISBN" HeaderText="ISBN" />
    </Columns>
</asp:GridView>

โดยสิ่งที่เพิ่มขึ้นมาจะอยู่ที่ CheckBox คือ

• AutoPostBack=”true” เพื่อให้มีการ PostBack ทุกครั้งที่มีการคลิก Checkbox
• OnCheckedChanged=”chkCallNo_CheckedChanged” คือ event ที่อยู่ใน code behind ที่จะถูกเรียกใช้เมื่อมีการคลิก

2. โค้ดในส่วนของการจำลองข้อมูล สามารถใช้โค้ดเดิมจากบทความเก่าได้เลย

if(!IsPostBack)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[5] { new DataColumn("BIB_NO"), 
                                            new DataColumn("TITLE"), 
                                            new DataColumn("AUTHOR"),
                                            new DataColumn("CALL_NO"),
                                            new DataColumn("ISBN")});
    dt.Rows.Add(1, "1 ทศวรรษ ดัชนีสุขภาพคนไทย", "สำนักงานคณะกรรมการสุขภาพแห่งชาติ (สช.)", "WA13 ห159 2556", "");
    dt.Rows.Add(2, "ความลับในร่างกายมนุษย์ที่เราไม่เคยรู้", "ฟรานซิส, เกวิน", "QS4 ฟ133a 2560", "9786168022887");
    dt.Rows.Add(3, "The best ICU", "ดุสิต สถาวร", "WX218 B561 2560", "9786168122020");
    dt.Rows.Add(4, "COVID-19 โรคระบาดแห่งศตวรรษ", "นำชัย ชีววิวรรธน์", "QW168.5.C8 น515c 2563", "9789740217060");
    dt.Rows.Add(5, "Good health & smart life ในวัย 40+", "ไวต์, จอห์น", "WT104 ว967g 2560", "9786160827237");
    gvBib.DataSource = dt;
    gvBib.DataBind();
}

3. เพิ่มโค้ดใน chkCallNo_CheckedChanged เพื่อควบคุมการซ่อน/แสดงคอลัมน์ที่ต้องการ

protected void chkCallNo_CheckedChanged(object sender, EventArgs e)
{
    gvBib.Columns[3].Visible = chkCallNo.Checked;
}

โดย gvBib.Columns[3].Visible จะเป็นการกำหนดให้คอลัมน์ที่ 3 ของ Gridview แสดงผลหรือไม่ ซึ่งก็คือคอลัมน์ CallNo นั่นเอง (จะเริ่มนับตั้งแต่ 0)

4. ทดสอบการใช้งาน

5. จะเห็นว่าระบบสามารถทำงานได้ตามความต้องการ คอลัมน์จะซ่อน/แสดงได้ตามเงื่อนไขที่เราเลือกจาก checkbox แต่จะสังเกตเห็นว่า ทุกครั้งที่มีการเลือก checkbox ระบบจะ refresh หน้าจอใหม่ทุกครั้ง ซึ่งถ้าในหน้าจอที่เรากำลังทำงานมีข้อมูลอื่นๆ อีกหลายอย่าง ก็จะถูกโหลดซ้ำโดยไม่จำเป็น เพื่อแก้ไขปัญหานี้ ASP.NET จะมีเครื่องมือที่เรียกว่า UpdatePanel ซึ่งจะทำงานในแบบ Partial Load ได้ตามตามเงื่อนไขที่เรากำหนด โดยเราจะต้องปรับแก้โค้ด HTML เพิ่มเติมดังนี้

<asp:ScriptManager runat="server"></asp:ScriptManager>

<asp:CheckBox ID="chkCallNo" Text=" Show CallNo from code behind" runat="server" AutoPostBack="true" Checked="true" OnCheckedChanged="chkCallNo_CheckedChanged" />
<hr />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvBib" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="BIB_NO" HeaderText="Bib#" />
                <asp:BoundField DataField="TITLE" HeaderText="Title" />
                <asp:BoundField DataField="AUTHOR" HeaderText="Author" />
                <asp:BoundField DataField="CALL_NO" HeaderText="CallNo" />
                <asp:BoundField DataField="ISBN" HeaderText="ISBN" />
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="chkCallNo" EventName="CheckedChanged" />
    </Triggers>
</asp:UpdatePanel>

สิ่งที่เพิ่มเติมเข้ามาคือ

• ScriptManager สำหรับใช้ควบคุมการทำงาน UpdatePanel
• UpdatePanel ใช้ครอบ component หรือพื้นที่ที่เราต้องให้สามารถทำ Partial Load ได้ ในที่นี่คือเราครอบ Gridview นั่นเอง
• Triggers จะเป็นการกำหนดเพื่อให้เกิด Partial Load ตาม control และ event ที่ได้ระบุเอาไว้ ในที่นี้คือ จะโหลดเมื่อ chkCallNo เกิด event CheckdChanged ซึ่งก็คือเหตุการณ์คลิกนั่นเอง

ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง

จะเห็นว่าหลังจากมีการปรับแก้โค้ดไปแล้ว ทุกครั้งที่มีการคลิก CheckBox และมีการซ่อน/แสดงคอลัมน์ จะไม่มีการ refresh หน้าจออีกแล้ว เพราะ UpdatePanel ที่เราได้เพิ่มเข้าไปจะควบคุมให้มีการโหลดข้อมูลใหม่เฉพาะ component ที่อยู่ภายใน UpdatePanel เท่านั้น

จากบทความนี้ก็จะเป็นวิธีการซ่อน/แสดงคอลัมน์ใน Gridview อีกทางเลือกหนึ่ง ที่ผู้อ่านสามารถนำไปประยุกต์ใช้กับงานของตัวเองได้ ในกรณีที่เราไม่อยากเพิ่ม jQuery เข้ามาในโครงการที่กำลังทำ หรือเห็นว่าไม่ถนัดในการใช้งาน jQuery ก็ตามแต่ ซึ่งผู้อ่านสามารถเลือกแนวทางได้เองตามอัธยาศัย สวัสดีครับ

---

แหล่งข้อมูลอ้างอิง

• https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx
• http://theheing.blogspot.com/2012/04/ajax-updatepanel-control.html

การแสดงผลข้อมูลใน Gridviews ในบางสถานการณ์เราต้องการซ่อนข้อมูลบางคอลัมน์ออกไปก่อนตามเงื่อนไขใดๆ และเมื่อเงื่อนไขเปลี่ยนเราก็จะแสดงข้อมูลในคอลัมน์ที่ถูกซ่อนนั้นออกมา

ในบทความนี้ผู้เขียนจะแสดงตัวอย่างการ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วยชุดคำสั่ง jQuery โดยมีขั้นตอนดังต่อไปนี้

1. เพิ่มโค้ด HTML ดังตัวอย่างด้างล่าง ซึ่งเป็นโค้ดที่แสดง Checkbox เพื่อใช้เลือกแสดงคอลัมน์ CallNo และ ASP.NET GridView ที่มีข้อมูล 5 คอลัมน์

<asp:CheckBox ID="chkCallNo" Text=" Show CallNo" runat="server" Checked="true" />

<hr />
<asp:GridView ID="gvBib" runat="server" AutoGenerateColumns="False" >
	<Columns>
		<asp:BoundField DataField="BIB_NO" HeaderText="Bib#" />
		<asp:BoundField DataField="TITLE" HeaderText="Title" />
		<asp:BoundField DataField="Author" HeaderText="Author" />
		<asp:BoundField DataField="CALL_NO" HeaderText="CallNo" />
		<asp:BoundField DataField="ISBN" HeaderText="ISBN" />
	</Columns>
</asp:GridView>

2. เพิ่มโค้ดใน event Page_Load ในหน้า code behind เพื่อจำลองข้อมูลที่จะใช้แสดงใน GridView

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[5] { new DataColumn("BIB_NO"), 
                                                new DataColumn("TITLE"), 
                                                new DataColumn("AUTHOR"),
                                                new DataColumn("CALL_NO"),
                                                new DataColumn("ISBN")});
        dt.Rows.Add(1, "1 ทศวรรษ ดัชนีสุขภาพคนไทย", "สำนักงานคณะกรรมการสุขภาพแห่งชาติ (สช.)", "WA13 ห159 2556", "");
        dt.Rows.Add(2, "ความลับในร่างกายมนุษย์ที่เราไม่เคยรู้", "ฟรานซิส, เกวิน", "QS4 ฟ133a 2560", "9786168022887");
        dt.Rows.Add(3, "The best ICU", "ดุสิต สถาวร", "WX218 B561 2560", "9786168122020");
        dt.Rows.Add(4, "COVID-19 โรคระบาดแห่งศตวรรษ", "นำชัย ชีววิวรรธน์", "QW168.5.C8 น515c 2563", "9789740217060");
        dt.Rows.Add(5, "Good health & smart life ในวัย 40+", "ไวต์, จอห์น", "WT104 ว967g 2560", "9786160827237");
        gvBib.DataSource = dt;
        gvBib.DataBind();
    }
    
}

เนื่องจากโค้ดตัวอย่างมีการใช้งาน class DataTable และ DataColumn ซึ่งอยู่ใน namespace System.Data เพราะฉะนั้นจะต้อง Import namespace นี้ด้วย

using System.Data;

3. เพิ่มโค้ด jQuery เพื่อควบคุมการแสดง/ซ่อน คอลัมน์ เมื่อมีการคลิก เลือก/ยกเลิก เช็คบ๊อก (โดยในบทความนี้ผู้เขียนขออนุญาตข้ามขั้นตอนการติดตั้ง jQuery ออกไป)

$(function () {

    //bind event click ให้กับ checkbox
    $("[id*=chkCallNo]").click(function () {
		
	//เก็บสถานะของ checkbox ว่าเลือกอยู่หรือไม่
        var isChecked = $(this).is(":checked");
		
	//เก็บ element ของหัวคอลัมน์ CallNo
        var th = $("[id*=gvBib] th:contains('CallNo')");
	
        //ถ้า checkbox ถูกเลือก จะแสดงคอลัมน์ CallNo และถ้าไม่ ก็จะซ่อนคอลัมน์
        th.css("display", isChecked ? "" : "none");
	
        //วนลูปเรคอร์ดที่เหลือทั้งหมด
        $("[id*=gvBib] tr").each(function () {
	    
            //ใช้ลำดับของหัวคอลัมน์ CallNo (th.index) มาหาคอลัมน์ CallNo ที่อยู่ record ข้อมูล 
            //และกำหนดให้ซ่อนหรือแสดงตามการเลือก checkbox
            $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
        });
    });

});

ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง

และเมื่อคลิกเช็คบ๊อก Show CallNo ออก คอลัมน์ CallNo ใน Gridview ก็จะหายไป

จากตัวอย่างโค้ดในบทความนี้ จะเห็นว่าการซ่อนหรือแสดงคอลัมน์ด้วย jQuery ไม่ได้มีความยุ่งยาก สามารถนำไปประยุกต์ใช้กับงานของท่านได้

ซึ่งผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้น่าจะมีประโยชน์กับท่านผู้อ่านไม่มากก็น้อย สวัสดีครับ

---

แหล่งข้อมูลอ้างอิง

• https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx