Creating CheckBox as GridView Header and writing code to check all the CheckBox

Indeed it is not a very difficult task in ASP.NET to have create a column with all the CheckBox including the header but it is also not as easy to find in the Internet how to get this done.

 

The simple program here creates a GridView, bind the GridView in an ArrayList object, Add the TemplateField in the GridView, Edit the TemplateField, add the HeadTeamplate and finally write code to check all the CheckBox.

 

1. File -> New -> Web Site…

 

2. The Default.aspx page appears.

 

3. Drag a GridView Web Control from the Toolbox to the page.

 

The page and source code will look like below:

 

StartGrid

 

<asp:GridView ID="GridView1" runat="server">

</asp:GridView>

 

4. Create a simple object with the following code.

 

public class DataObjects

{  

  public ArrayList ar;

      public DataObjects()

  {   

    ar = new ArrayList();

    ar.Add(1);

    ar.Add(2);

    ar.Add(3);

    ar.Add(4);

    ar.Add(5);

  }

 

  public ArrayList GetArrayList()

  {

    return ar;

  }

}

 

5. After created the ArrayList object and bind the GridView to it.

 

GridBind

 

<asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1">

</asp:GridView>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"

SelectMethod="GetArrayList" TypeName="DataObjects"></asp:ObjectDataSource>

 

6. Add the column to the GridView

 

7. Click on the GridView Tasks >. Choose Edit Column…

 

GridViewTasks

 

8. Choose TemplField from Available fields: then click Add

 

TemplateField

 

9. Click the GridView Tasks again and this type choose Edit Templates

 

10. Drag a CheckBox Web Control to the EmptyDataTemplate.

 

EditTemplate

 

11. After Editing the TemplateField your page and code will look like below:

 

AfterEditTempl

 

<asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1">

 <Columns>

   <asp:TemplateField>

     <ItemTemplate>

       <asp:CheckBox ID="CheckBox1" runat="server" />

     </ItemTemplate>

   </asp:TemplateField>

 </Columns>       

</asp:GridView>

 

I cannot find a way to create a header with a CheckBox using the graphical WebForm designer. So I add the following code in the <asp:TemplateField>.

 

Header

 

<HeaderTemplate>

     <asp:CheckBox ID="CheckHeader" runat="server" />

</HeaderTemplate>

 

12. The last task is to hook up a handle to perform check on all the CheckBox function.

 

<Columns>

 <asp:TemplateField>

  <ItemTemplate>

    <asp:CheckBox ID="CheckBox1" runat="server" />

  </ItemTemplate>

   <HeaderTemplate>

      <asp:CheckBox ID="CheckHeader"

   OnCheckedChanged="CheckHeader_OnCheckedChanged"

   AutoPostBack="true" runat="server" />

   </HeaderTemplate>

 </asp:TemplateField>

</Columns>  

 

13. Add the code in the code behind file.

 

protected void CheckHeader_OnCheckedChanged(object sender, EventArgs e)

{

  for (int i = 0; i < GridView1.Rows.Count; i++)

  {

    CheckBox cb = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");

    cb.Checked = true;

  }

}

 

The complete code is in http://skydrive.live.com. The sample file name is WebCheckBoxGrid.rar My MSN ID is chanmmn@hotmail.com.

Advertisements

About chanmingman

Since March 2011 Microsoft Live Spaces migrated to Wordpress (http://www.pcworld.com/article/206455/Microsoft_Live_Spaces_Moves_to_WordPress_An_FAQ.html) till now, I have is over 1 million viewers. This blog is about more than 50% telling you how to resolve error messages, especial for Microsoft products. The blog also has a lot of guidance teaching you how to get stated certain Microsoft technologies. The blog also uses as a help to keep my memory. The blog is never meant to give people consulting services or silver bullet solutions. It is a contribution to the community. Thanks for your support over the years. Ming Man is Microsoft MVP since year 2006. He is a software development manager for a multinational company. With 25 years of experience in the IT field, he has developed system using Clipper, COBOL, VB5, VB6, VB.NET, Java and C #. He has been using Visual Studio (.NET) since the Beta back in year 2000. He and the team have developed many projects using .NET platform such as SCM, and HR based applications. He is familiar with the N-Tier design of business application and is also an expert with database experience in MS SQL, Oracle and AS 400.
This entry was posted in .Net and tagged . Bookmark the permalink.

2 Responses to Creating CheckBox as GridView Header and writing code to check all the CheckBox

  1. Adelmo says:

    Simply and functionally.

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