Home > .NET, C# > Check all/uncheck all GridView (Server-side)

Check all/uncheck all GridView (Server-side)

Đã có rất nhiều cách để giải quyết bài toán check/uncheck all trên GridView. Article “Checking All CheckBoxes in a GridView” của Scott Mitchell là 1 hướng giải quyết bài toán này rất cơ bản trên server side. Có thể tóm tắt ý tưởng của Scott như  sau:

Sử dụng TemplateField cùng CheckBox để tạo ra cột select cho Gridview

GridViewTạo 2 Button checkAll và uncheckAll. Xử lý check all và uncheck all cho GridView trong sự kiện OnClick của 2 Button

Sau khi đọc article đó  FB đã có suy nghĩ: nếu ta sử dụng 1 CheckBox ở phần Header của cột chứa các CheckBox để thực hiện nhiệm vụ CheckAll hoặc UnCheckAll thì sẽ phải làm thế nào. 3 bước sau sẽ giải quyết vấn đề trên.

1.  Trước tiên, thêm 1 ItemField vào GridView. ItemField này được đĩnh nghĩa Header là 1 CheckBox chkAll và mỗi Item của nó cũng là CheckBox chkBox.

<asp:GridView ID="FileList" runat="server"
    AutoGenerateColumns="False" DataKeyNames="FullName">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" 
                  OnCheckedChanged="chkAll_CheckedChanged" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="chkBox" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="CreationTime" HeaderText="Created On">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:BoundField DataField="Length" DataFormatString="{0:N0}"
                     HeaderText="File Size"
            HtmlEncode="False">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
    </Columns>
</asp:GridView>

2.  Xử lý sự kiện OnCheckedChanged của chkAll như  sau:

protected void chkAll_CheckedChanged(object sender, EventArgs e)
{
     CheckBox chkAll = (CheckBox)sender;
     if (chkAll != null)
     {
           foreach (GridViewRow row in gvStaff.Rows)
           {
                 CheckBox chk = (CheckBox)row.FindControl("chkBox");
                 if (chk != null)
                     chk.Checked = chkAll.Checked;
           }
     }
}

Nghe có vẻ ổn rồi nhỉ, thử  chạy phát. Click vào checkbox ở header, không thấy hiện tượng gì xảy ra cả. Tại sao vậy???

3.  Vấn đề nằm ở chỗ AutoPostBack. Một web control có thuộc tính AutoPostBack=true, có ý nghĩa là control đó sẽ postback tới server mỗi khi user tương tác với control đó (thuộc tính này support cho một số control của ASP.net như  CheckBox, TextBox, ListControl vì default chúng không tự động postback tới server. Với các asp.net control khác như Button thì theo ngầm định chúng sẽ postback tới server mỗi khi user tương tác với chúng). Vì vậy cần phải thiết lập thuộc tính này = true cho checkbox chkAll, để server có thể nhận được tín hiệu từ control này sau khi user tương tác.

<HeaderTemplate>
   <asp:CheckBox ID="chkAll" runat="server"
       OnCheckedChanged="chkAll_CheckedChanged" AutoPostBack="true" />
</HeaderTemplate>
Categories: .NET, C# Tags: ,
  1. huy
    August 29, 2011 at 7:58 am

    hichic vì con đợi control gửi tín hiệu lên sv nên khi nó check all rất chậm chả hiểu còn cách khác không hả anh.

    • freebirds2081
      November 5, 2011 at 12:12 pm

      Nếu phân trang tốt thì cách này cũng ko đến nỗi chậm. Còn nếu trên trang có quá nhiều row thì dùng tiếp cận phương pháp Client-side, dùng js để xử lý.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: