We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add a column from checkbox in a grouping control

Thread ID:





117073 Aug 5,2014 08:47 AM UTC Aug 6,2014 12:24 PM UTC ASP.NET Web Forms (Classic) 1
Tags: GridGroupingControl
Roimer Machacón Otero
Asked On August 5, 2014 08:47 AM UTC

Hi, I'm using grouping control for present a editable grid to the users.

Now in this grid I can edit and paging but I would have add a column from checkbox for that the users
select the row that they want save in the database.

Is there any way?

Also how to remove the section drag column here of the grouping control?

Attachment: grid_9bb39854.rar

Shalini Thangavel [Syncfusion]
Replied On August 6, 2014 12:24 PM UTC

Hi Nestor,


Thank you for your interest in Syncfusion products.


We have analyzed your query and  the requirement can be achieved using RowBtnTemplate and ShowGroupDropArea property. Please refer to the following steps:


*Query: How to add a column from checkbox in a grouping control,


Step 1: Create a checkbox  using RowBtnTemplate.


<Syncfusion:GridGroupingControl ID="GridGroupingControl1" runat="server” ShowGroupDropArea="False" EnableCallbacks="False" PostBackOnRowDblClick="False" BorderColor="#2A437E" ShowIndicator="False" DataSourceCachingMode="ViewState" DataMember="DefaultView" AutoFormat="Office 2007 Blue" BorderCollapse="Separate" DragSelectionBackColor="Yellow" HotTrackButtons="False" EnableChildViewState="true" EnsureSelection="false">


       <TableOptions AllowHover="false" />


<TableDescriptor AllowFilter="False" AllowNew="false"> 




       <asp:CheckBox ID="cbRowBtnTemplate" runat="server" OnCheckedChanged="cbRowBtnTemplate_CheckedChanged"onclick="CheckAll(this);" AutoPostBack="true"></asp:CheckBox>








Step 2: Set ListBoxSelectionMode to MultiExtended  SelectionMode for multiple selection.


Step 3: Checkedchanged event can be used trigger autopost back and in which we have get the selected row and added to selected rows collection. And the selected records collection maintained as session to keep    the selected records in Next checkbox postback. Please refer to the following code snipperts:




        protected void cbRowBtnTemplate_CheckedChanged(object sender, System.EventArgs e)


            CheckBox checkbox = (CheckBox)sender;

            GridRow gridrow = (GridRow)checkbox.Parent.Parent.Parent;

            ArrayList myList = (ArrayList)Session["List"];


            if (myList == null)

                myList = new ArrayList();


            if (gridrow.DisplayElement.Kind != Syncfusion.Grouping.DisplayElementKind.ColumnHeader)


                string EmployeeID = gridrow.Record.GetValue("Employee ID").ToString();

                if (checkbox != null)


                    if (checkbox.Checked == true)


                        if (!myList.Contains(gridrow.Record))





                        if (hdnChk.Value.Trim() == "1"){




                            foreach (Record rec in myList)


                                if (rec.GetValue("Employee ID").ToString() == EmployeeID)








                    Session["List"] = myList;







Step 4: Client side “CheckAll” event is bind to header checkbox and which is used to select all checkboxes in grid.




<script type="text/javascript">

       function CheckAll(oData)


           var obj = document.getElementById('<%= hdnChk.ClientID  %>');

           var status = document.getElementById('<%= hdnStatus.ClientID  %>');


           if ((oData.name.indexOf("header") != -1))


               var CheckBoxId = oData.id;

               var getElement = document.getElementsByTagName("input");


               for (var i = 0; i < getElement.length; i++) {

                   //Checks if the currentelement is a row


                   if ((getElement[i].name.indexOf("GridGroupingControl1~TR~0~_TOPGROUP_") != -1))


                       obj.value = "1";

                       var currentCheckBoxName = getElement[i].name;

                       // get the id of the current checkbox


                       var contentCheck = document.getElementsByName(currentCheckBoxName);

                       var arr = $(contentCheck).parent().siblings();


                       for (var j = 0; j < arr.length; j++) {


                           if (document.getElementById(CheckBoxId).checked == true)


                               status.value = "Check";

                               $(contentCheck).attr('checked', true);



                     else {

                               status.value = "UnCheck";

                               $(contentCheck).attr('checked', false);                             






      else {

              obj.value = "0";





*Query:  how to remove the section drag column here of the grouping control,


Set ShowGroupDropArea Property to False.

 <syncfusion:GridGroupingControl ID="GridGroupingControl1" runat="server" AutoFormat="Office 2007 Blue" ShowGroupDropArea="false"></syncfusion:gridgroupingcontrol>




We have created the sample for your requirement and the same can be downloaded from the following link:




Please try this and let us know if you need any further assistance.



Shalini A T.





This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon