Click here to Skip to main content
15,034,432 members
Articles / Web Development / HTML
Technical Blog
Posted 18 Oct 2014

Tagged as

Stats

93.5K views
8 bookmarked

How To Add A CheckBox Column to GridView in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.58/5 (6 votes)
18 Oct 2014CPOL
How to add a checkbox column to GridView to ASP.NET

Many a times, we need to give users a Checkbox in a GridView that users can use to select multiple rows from the GridView. In previous posts, we saw how we can do this in Windows Forms. In this post, we will see how we can add a CheckBox column to an existing GridView control in ASP.NET.

Let’s get started. We assume that we have a GridView with an existing set of columns getting populated with some data. So, we have the below definition of GridView in our ASPX page.

ASP.NET
<asp:gridview ID="grdData" runat="server" 
AutoGenerateColumns="False" CellPadding="4" CssClass="grdData"
            ForeColor="#333333" GridLines="None" Width="200">
            <alternatingrowstyle BackColor="White" 
            ForeColor="#284775"></alternatingrowstyle>
            <columns>
                <asp:boundfield DataField="ID" 
                HeaderText="ID"></asp:boundfield>
                <asp:boundfield DataField="Name" 
                HeaderText="Name"></asp:boundfield>
            </columns>
            <editrowstyle BackColor="#999999"></editrowstyle>
            <footerstyle BackColor="#5D7B9D" 
            Font-Bold="True" ForeColor="White"></footerstyle>
            <headerstyle BackColor="#5D7B9D" 
            Font-Bold="True" ForeColor="White"></headerstyle>
            <pagerstyle BackColor="#284775" 
            ForeColor="White" HorizontalAlign="Center"></pagerstyle>
            <rowstyle BackColor="#F7F6F3" 
            ForeColor="#333333"></rowstyle>
            <selectedrowstyle BackColor="#E2DED6" 
            Font-Bold="True" ForeColor="#333333"></selectedrowstyle>
            <sortedascendingcellstyle BackColor="#E9E7E2"></sortedascendingcellstyle>
            <sortedascendingheaderstyle BackColor="#506C8C"></sortedascendingheaderstyle>
            <sorteddescendingcellstyle BackColor="#FFFDF8"></sorteddescendingcellstyle>
            <sorteddescendingheaderstyle BackColor="#6F8DAE"></sorteddescendingheaderstyle>
        </asp:gridview>

And we have the below code to populate the GridView with some dummy data.

JavaScript
private void LoadGridData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Name");
    for (int i = 0; i < 10; i++)
    {
        DataRow dr = dt.NewRow();
        dr["Id"] = i + 1;
        dr["Name"] = "Student " + (i + 1);
        dt.Rows.Add(dr);
    }
    grdData.DataSource = dt;
    grdData.DataBind();
}

The output of the above code is something like below:

gridview-checkbox-1

Now, we will be adding a CheckBox column to this Grid. For doing this, we will make use of TemplateField and define a new TemplateField column in the existing set of columns as below:

ASP.NET
<asp:templatefield HeaderText="Select">
    <itemtemplate>
        <asp:checkbox ID="cbSelect"
        CssClass="gridCB" runat="server"></asp:checkbox>
    </itemtemplate>
</asp:templatefield>

Your final GridView definition will appear like below:

ASP.NET
<asp:gridview ID="grdData" runat="server" 
AutoGenerateColumns="False" CellPadding="4" 
CssClass="grdData" ForeColor="#333333" 
GridLines="None" Width="200">
            <alternatingrowstyle BackColor="White" 
            ForeColor="#284775"></alternatingrowstyle>
            <columns>
                <asp:templatefield HeaderText="Select">
                    <itemtemplate>
                        <asp:checkbox ID="cbSelect" 
                        CssClass="gridCB" runat="server"></asp:checkbox>
                    </itemtemplate>
                </asp:templatefield>
                <asp:boundfield DataField="ID" 
                HeaderText="ID"></asp:boundfield>
                <asp:boundfield DataField="Name" 
                HeaderText="Name"></asp:boundfield>
            </columns>
            <editrowstyle BackColor="#999999"></editrowstyle>
            <footerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></footerstyle>
            <headerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></headerstyle>
            <pagerstyle BackColor="#284775" ForeColor="White" 
            HorizontalAlign="Center"></pagerstyle>
            <rowstyle BackColor="#F7F6F3" ForeColor="#333333"></rowstyle>
            <selectedrowstyle BackColor="#E2DED6" Font-Bold="True" 
            ForeColor="#333333"></selectedrowstyle>
            <sortedascendingcellstyle BackColor="#E9E7E2"></sortedascendingcellstyle>
            <sortedascendingheaderstyle BackColor="#506C8C"></sortedascendingheaderstyle>
            <sorteddescendingcellstyle BackColor="#FFFDF8"></sorteddescendingcellstyle>
            <sorteddescendingheaderstyle BackColor="#6F8DAE"></sorteddescendingheaderstyle>
        </asp:gridview>

Save the code and refresh your ASPX page. Now, you will see a CheckBox appearing beside each row in your GridView.

gridview-checkbox-2

Hope you like this! Keep learning and sharing! Cheers!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Nitesh Luharuka
Team Leader Director @ Rebin Infotech
India India
An Independent IT Professional and Consultant on MS Technologies like .Net | MVC | Silverlight | Sharepoint | MS Project Server along with open source CMS Systems like DotNetNuke etc.

I am an enthusiastic technocrat who love to debug problems and solve them. I love writing articles on my website in my spare time. Please visit my Website for more details and subscribe to get technology related tips/tricks.

Comments and Discussions

 
QuestionWhat about reading back values on a postback Pin
BloodBaz11-Mar-15 1:01
MemberBloodBaz11-Mar-15 1:01 
AnswerRe: What about reading back values on a postback Pin
Nitesh Luharuka11-Mar-15 8:05
professionalNitesh Luharuka11-Mar-15 8:05 
GeneralRe: What about reading back values on a postback Pin
BloodBaz12-Mar-15 1:39
MemberBloodBaz12-Mar-15 1:39 
GeneralRe: What about reading back values on a postback Pin
Nitesh Luharuka12-Mar-15 3:30
professionalNitesh Luharuka12-Mar-15 3:30 
GeneralMy Vote 5 Pin
Shemeemsha (ഷെമീംഷ)29-Oct-14 20:10
MemberShemeemsha (ഷെമീംഷ)29-Oct-14 20:10 
GeneralRe: My Vote 5 Pin
Nitesh Luharuka30-Oct-14 17:33
professionalNitesh Luharuka30-Oct-14 17:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.