How to add "select all " Checkbox in combobox column header

Hi,

  I have Datagridview with a combobox column, i need to add a checkbox to the header of this column. if user selects(Checks)  this header checbox then all the checkboxes of this column should be selected. And if user Deselects(not Checked) then all the checkboxes of this column should be deselected.

  Basically i need to implement  select all/Deselect all feature........I am new to datagridview.
Please provide examples and sample code.

 Thanks in advance.



LVL 7
Maverick_CoolAsked:
Who is Participating?
 
Alfred A.Commented:
Try this in a Windows Form Test Project
public partial class Form1 : Form
    {
        DataGridViewCheckBoxColumn c1 = new DataGridViewCheckBoxColumn();
        private CheckBox ckBox;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {

            c1 = new DataGridViewCheckBoxColumn();
            c1.Name = "Select";
            c1.HeaderCell.Style.Alignment = DataGridViewContentAlignment.MiddleCenter;

            dataGridView1.Columns.Add(c1);
            dataGridView1.Rows.Add();
            dataGridView1.Rows.Add();
            dataGridView1.Rows.Add();
            dataGridView1.Rows.Add();
            CheckBox ckBox = new CheckBox();

            //Get the column header cell bounds
            Rectangle rect = dataGridView1.GetCellDisplayRectangle(0, -1, true);
            ckBox.Size = new Size(18, 18);
            //Change the location of the CheckBox to make it stay on the header
            ckBox.Location = rect.Location;

            ckBox.CheckedChanged += ckBox_CheckedChanged;

            //Add the CheckBox into the DataGridView
            dataGridView1.Controls.Add(ckBox);
        }


        private void ckBox_CheckedChanged(object sender, EventArgs e)
        {
            for (int j = 0; j <= dataGridView1.RowCount - 1; j++)
            {
               dataGridView1[0, j].Value = ((CheckBox)sender).Checked;
            }
            dataGridView1.EndEdit();
        }
    }

Open in new window

0
 
Alfred A.Commented:
Inside your ASP.NET Source do this

Javascript:

<script language="javascript" type="text/javascript">
        function SelectAllCheckboxes(spanChk){
            var oItem = spanChk.children;
            var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0];

            xState=theBox.checked;
            elm=theBox.form.elements;
            for(i=0;i<elm.length;i++)
            if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)
            {
            //elm[i].click();
            if(elm[i].checked!=xState)
            elm[i].click();
            //elm[i].checked=xState;
            }
            }
    </script>

//Check the template field  Action below.  Thiis is link to the javascript above

<asp:GridView ID="gvTest" runat="server" AllowPaging="True" AllowSorting="True"
        AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Code" DataSourceID="sdsData"
        ForeColor="#333333" GridLines="None" Width="856px">
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <RowStyle BackColor="#E3EAEB" HorizontalAlign="Left" />
        <Columns>

            <asp:TemplateField HeaderText="Action">
                <EditItemTemplate>
                    <asp:CheckBox ID="chkAction" runat="server" />
                </EditItemTemplate>
                <HeaderTemplate>
                    <input id="chkAll" runat="server" onclick="javascript:SelectAllCheckboxes(this);"
                        type="checkbox" value="Action" />&nbsp;
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkAction" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>


I hope this helps.
0
 
Alfred A.Commented:
Oh, I didn't notice the DataGridView (winforms).  Sorry the code above is for ASP.NET.  However, you could still use the Javascript implementation in there for your DataGridView.

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Maverick_CoolAuthor Commented:
Hi Alfred1,

    Thanks a lot for ur reply. Your suggestion helped me to do my task.




0
 
Alfred A.Commented:
Glad to help.  :-)

Goodluck with your projects. :-)
0
 
Maverick_CoolAuthor Commented:
I got the partial results.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.