[ASP.NET] CheckBox 전체 선택

출처 사이트 URL: http://www.dotnetgallery.com/kb/resource18-Gridview-header-checkbox-select-and-deselect-all-rows-using-client-side-Jav.aspx.aspx

 

 

 

 

영어 설명 밑에 제 맘대로 한글로 해석 한 내용 입니다. 해석이 엉망이니 직접 해석하시는 편을 추천합니다.

 

Gridview header checkbox select and deselect all rows using client side JavaScript and server side C#

--> 자바스크립트 또는 서버단 소스를 사용하여 그리드뷰 헤더에 체크 박스 선택 또는 선택 해제

 

 

Introduction

--> 소개

Adding checkbox in gridview header template and select/deselect all rows is a common requirement in most of the asp.net projects and frequently asked questions also. Here I will explain how to add checkbox in header template of gridview and select/deselect all rows using client side javascript and server side code.

--> 체크박스를 그리드 뷰 헤더 템플릿에 추가하고 선택/선택해제는 대부분의 asp.net 프로젝트에서 공통적으로 요구 되는 사항이고 자주 Q&A 된다. 여기서 내가 설명할 것은 GridView Hearder Template에 체크박스를 추가하는 방법과 클라이언트 사이드 자바스크립트와 서버 사이드 코드를 사용하여 전체선택/선택해제 하는 방법이다.

 

 

Add Checkbox in Gridview header template

--> 그리드뷰 헤더 템플리에 체크 박스 추가

Create the asp.net project and drag the gridview control then format as likes below.

--> asp.net 프로젝트를 만들고 그리드뷰 컨트롤을 드래그.(복사하라는건가??) 아래 포맷 처럼 만들어라. 

<asp:GridView ID="GridVwHeaderChckbox" runat="server" AutoGenerateColumns="False"
                Font-Names="Verdana" PageSize="5" Width="55%" BorderColor="#CCCCCC" BorderStyle="Solid"
                BorderWidth="1px">
                <AlternatingRowStyle BackColor="#BFE4FF" />
                <PagerStyle BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" />
                <HeaderStyle Height="30px" BackColor="#6DC2FF" Font-Size="15px" BorderColor="#CCCCCC"
                    BorderStyle="Solid" BorderWidth="1px" />
                <RowStyle Height="20px" Font-Size="13px" BorderColor="#CCCCCC" BorderStyle="Solid"
                    BorderWidth="1px" />
                <Columns>
                    <asp:BoundField DataField="Emp_Name" HeaderText="Employee Name" HeaderStyle-Width="150px" />
                    <asp:BoundField DataField="Emp_job" HeaderText="Job title" HeaderStyle-Width="150px" />
                    <asp:BoundField DataField="Emp_Dep" HeaderText="Department" HeaderStyle-Width="150px" />
                    <asp:TemplateField ItemStyle-Width="40px">
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkboxSelectAll" runat="server" onclick="CheckAllEmp(this);" />
                        </HeaderTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemTemplate>
                            <asp:CheckBox ID="chkEmp" runat="server"></asp:CheckBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

Using HeaderTemplate of gridview I had added checkbox and also added in Itemtemplate of same column.

--> 그리드 헤더템플릿을 사용 할 때 체크박스를 추가하고 또한 같은 컬럼에 아이템 템플릿을 추가한다.

 

 

Select and deselect using Client side

--> 클라이언트 사이드를 사용하여 선택/선택 해제

I’m loading the few sample employee records in gridview to select/deselect all rows. Below javascript CheckAllEmp function will do select and deselect when check and uncheck in header checkbox.

--> 그리드 뷰에 전체 선택/선택해제 할 수 있는 몇개의 직원 샘플 레코드 기록 loading. 아래 자바스크립트 CheckAllEmp 함수가 선택/선택해제 할 때 헤더 체크박스를 체크/체크해제 할 것이다.

Call this function in gridview headertemplate, checkbox onclick event as shown above.

--> 그리드뷰 헤더템플릿 안의 함수 호출. 체크박스 onclick 이벤트 위에서 보여진 것 처럼.

<script type="text/javascript" language="javascript">
        function CheckAllEmp(Checkbox) {
            var GridVwHeaderChckbox = document.getElementById("<%=GridVwHeaderChckbox.ClientID %>");
            for (i = 1; i < GridVwHeaderChckbox.rows.length; i++) {
                GridVwHeaderChckbox.rows[i].cells[3].getElementsByTagName("INPUT")[0].checked = Checkbox.checked;
            }
        }
    </script>

Above javascript code will get gridview client id and loop the each row and get the checkbox id which is available in itemTemplate and make it select/deselect rows. This is the one of the way using client side script.

--> 위의 자바 스크립트 코드는 GridView에 클라이언트 ID를 얻고, 각각의 열의 ItemTemplate에서 사용할 수있는 체크박스 ID를 얻고 선택/선택 해제 할 것입니다. 이는 클라이언트 사이드 스크립트에서 사용하는 방법의 하나이다.

 

 

Select and deselect using Server side

--> 서버단을 사용하여 선택/선택 해제

 

Same functionality we can able to do with server side also. To do this make the changes in HeaderTemplate as like below.

--> 같은 기능을 서버 측에서도 할 수 있다. 아래의 헤더 템플릿을 변경한다.

 

<asp:TemplateField ItemStyle-Width="40px">
                        <HeaderTemplate>
                            <asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" OnCheckedChanged="chkboxSelectAll_CheckedChanged" />
                        </HeaderTemplate>
                        <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        <ItemTemplate>
                            <asp:CheckBox ID="chkEmp" runat="server"></asp:CheckBox>
                        </ItemTemplate>
                    </asp:TemplateField>

 

Make it autopostback as true and create OnCheckedChanged event in checkbox and add the below code in chkboxSelectAll_CheckedChanged event in code behind part.

--> autopostback 을 true로 만들고, 체크박스에 OnCheckedChanged 이벤트를 생성하고 아래 코드를 chkboxSelectAll_CheckedChanged 이벤트 안 코드비하인드 파트에 추가.

 

protected void chkboxSelectAll_CheckedChanged(object sender, EventArgs e)
        {
            CheckBox ChkBoxHeader = (CheckBox)GridVwHeaderChckboxSrvr.HeaderRow.FindControl("chkboxSelectAll");
            foreach (GridViewRow row in GridVwHeaderChckboxSrvr.Rows)
            {
                CheckBox ChkBoxRows = (CheckBox)row.FindControl("chkEmp");
                if (ChkBoxHeader.Checked == true)
                {
                    ChkBoxRows.Checked = true;
                }
                else
                {
                    ChkBoxRows.Checked = false;
                }
            }
        }

 

Above checked changed event will get the header checkbox id and if header checkbox is checked then find all rows checkbox id and make it all select else deselect all rows

--> 위에 Checked Change 이벤트에서 헤더 체크박스의 아이디를 얻고 만약 헤더 체크 박스의 체크가 됐다면 모든 로우의 체크박스 아이디를 얻고 모두 선택 또는 선택해제.

 

 

I have attached sample code for this. Thank you for reading this article and hope you enjoyed this article. Please provide your feedback and suggestions.