This is a migrated thread and some comments may be shown as answers.

RadGrid Grouping with Checkboxes

17 Answers 224 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris Trina
Top achievements
Rank 1
Chris Trina asked on 13 Dec 2012, 09:41 PM
I have a grid with grouping by state.  At each level I have check boxes (Header, Group, Detail).  If the header is checked, all check boxes are checked.  If a group check box is checked, all detail check boxes in that group are checked.  If a detail check box is unchecked, the group needs to be unchecked and the header needs to be unchecked.  I had to write custom code for this because I could find no imbedded controls to do this for me.  I used the code example Select All option in Grid Header along with individual group selection as a starting point.  My problem is that this is all done server side.  I would like it to be client side.  I found client side examples that let me select all, but none that did the unselecting when a lower item was unchecked.  I have made several attempts at writing the client side code, but have failed.

I am using telerik version 2012.3.1016.4, Visual Basic .Net Framework 4.  This needs to work in all (most common) browsers.

My aspx page
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <br />
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="true"  DataSourceID="SqlDataSource1" GridLines="None" AutoGenerateColumns="False" OnItemCreated="RadGrid1_ItemCreated" Skin="Hay">
            <MasterTableView DataSourceID="SqlDataSource1">
                <RowIndicatorColumn Visible="False">
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
                <ExpandCollapseColumn Resizable="False" Visible="False">
                    <HeaderStyle Width="40px" />
                </ExpandCollapseColumn>
                <GroupByExpressions>
                  <telerik:GridGroupByExpression>
                   <GroupByFields>
                     <telerik:GridGroupByField FieldName="State" FieldAlias="State" />
                   </GroupByFields>
                   <SelectFields>
                     <telerik:GridGroupByField FieldName="State" FieldAlias="State" />
                   </SelectFields>
                  </telerik:GridGroupByExpression>
                </GroupByExpressions>
                <Columns>
                <telerik:GridBoundColumn SortExpression="LastName" HeaderText="Last Name" HeaderButtonType="TextButton"
                    DataField="LastName" UniqueName="LastName" ItemStyle-Width="40px" >
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="First Name" HeaderButtonType="TextButton"
                    DataField="FirstName" UniqueName="FirstName">
                </telerik:GridBoundColumn>
                </Columns>
                <EditFormSettings>
                    <PopUpSettings ScrollBars="None" />
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid><br />
        <br />
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:ConnString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="select * from TAZTestData order by State, LastName"
        runat="server">
    </asp:SqlDataSource>
         </div>
</form>

My vb.net code
Protected Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
    If TypeOf e.Item Is GridHeaderItem Then
        Dim header As GridHeaderItem = DirectCast(e.Item, GridHeaderItem)
        Dim headerchkbx As New CheckBox()
        headerchkbx.ID = "CheckBox1"
        headerchkbx.AutoPostBack = True
        AddHandler headerchkbx.CheckedChanged, AddressOf headerchkbx_CheckedChanged
        header("column").Controls.Add(headerchkbx)
    End If
    If TypeOf e.Item Is GridGroupHeaderItem Then
        Dim header As GridGroupHeaderItem = DirectCast(e.Item, GridGroupHeaderItem)
        Dim groupchkbx As New CheckBox()
        groupchkbx.ID = "CheckBox2"
        groupchkbx.AutoPostBack = True
        AddHandler groupchkbx.CheckedChanged, AddressOf groupchkbx_CheckedChanged
        header.Controls(0).Controls.Add(groupchkbx)
    End If
    If TypeOf e.Item Is GridDataItem Then
        Dim header As GridDataItem = DirectCast(e.Item, GridDataItem)
        Dim detailchkbx As New CheckBox()
        detailchkbx.ID = "CheckBox3"
        detailchkbx.AutoPostBack = True
        AddHandler detailchkbx.CheckedChanged, AddressOf detailchkbx_CheckedChanged
        header.Controls(0).Controls.Add(detailchkbx)
    End If
 
End Sub
 
Private Sub headerchkbx_CheckedChanged(sender As Object, e As EventArgs)
 
    Dim headerchkbx As CheckBox = DirectCast(sender, CheckBox)
    For Each groupHeader As GridGroupHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader)
        Dim children As GridItem() = groupHeader.GetChildItems()
        Dim groupchkbx As CheckBox = DirectCast(groupHeader.Controls(0).FindControl("CheckBox2"), CheckBox)
        For Each child As GridItem In children
            Dim detailchkbx As CheckBox = DirectCast(child.Controls(0).FindControl("CheckBox3"), CheckBox)
            detailchkbx.Checked = headerchkbx.Checked
        Next
 
        ' If headerchkbx.Checked Then
        groupchkbx.Checked = headerchkbx.Checked
        'Else
        'item.Selected = False
        'groupchkbx.Checked = False
 
        'End If
    Next
    For Each item As GridHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.Header)
        item.Selected = headerchkbx.Checked
    Next
End Sub
 
Private Sub groupchkbx_CheckedChanged(sender As Object, e As EventArgs)
    Dim chkCount As Integer = 0
    For Each groupHeader As GridGroupHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader)
        Dim children As GridItem() = groupHeader.GetChildItems()
 
        Dim groupchkbx As CheckBox = DirectCast(groupHeader.Controls(0).FindControl("CheckBox2"), CheckBox)
        If (groupchkbx.Checked) Then
            chkCount += 1
        End If
        For Each child As GridItem In children
            Dim detailchkbx As CheckBox = DirectCast(child.Controls(0).FindControl("CheckBox3"), CheckBox)
            detailchkbx.Checked = groupchkbx.Checked
            'Dim dataItem As GridDataItem = TryCast(child, GridDataItem)
            'dataItem.Selected = groupchkbx.Checked
 
            For Each item As GridHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.Header)
                Dim headerchkbx As CheckBox = DirectCast(item("column").FindControl("CheckBox1"), CheckBox)
 
                If (Not groupchkbx.Checked) Then
                    headerchkbx.Checked = False
                End If
                If RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader).Length = chkCount Then
                    headerchkbx.Checked = True
 
                End If
            Next
        Next
    Next
End Sub
 
Private Sub detailchkbx_CheckedChanged(sender As Object, e As EventArgs)
    Dim totalCount As Integer = 0
    Dim groupCount As Integer = 0
    Dim totalChkCount As Integer = 0
    Dim groupChkCount As Integer = 0
    'Loop through all groups
    For Each groupHeader As GridGroupHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader)
        Dim groupchkbx As CheckBox = DirectCast(groupHeader.Controls(0).FindControl("CheckBox2"), CheckBox)
        Dim grpChildren As GridItem() = groupHeader.GetChildItems()
 
        For Each child As GridItem In grpChildren
            'Count total number of checkboxes in whole grid and in each group
            totalCount += 1
            groupCount += 1
            Dim detailchkbx As CheckBox = DirectCast(child.Controls(0).FindControl("CheckBox3"), CheckBox)
            'Count number of checkboxes that are checked in whole grid and in each group
            If (detailchkbx.Checked) Then
                totalChkCount += 1
                groupChkCount += 1
            End If
        Next
        'Check the group check box if all the children are checked
        If groupCount = groupChkCount Then
            groupchkbx.Checked = True
        Else
            groupchkbx.Checked = False
        End If
        groupCount = 0
        groupChkCount = 0
    Next
    For Each hdr As GridHeaderItem In RadGrid1.MasterTableView.GetItems(GridItemType.Header)
        Dim headerchkbx As CheckBox = DirectCast(hdr("column").FindControl("CheckBox1"), CheckBox)
        If totalCount = totalChkCount Then
            headerchkbx.Checked = True
        Else
            headerchkbx.Checked = False
        End If
    Next
End Sub

Thank you for any help!

17 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 18 Dec 2012, 11:15 AM
Hi Chris,

I am sending you a simple example which demonstrates how to add a checkbox into the group headers and check/uncheck all items from the current group on the client. You can use it as a start point. In your case you need to add logic which find if all items from the groups are checked and then to check the header checkbox.

Please give it try and let me know if you experience any problems. Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Chris Trina
Top achievements
Rank 1
answered on 19 Dec 2012, 04:11 PM
If I am looping through all the nodes, how do I start at the top of the grid?  And how do I know when I get to the last node?
0
Radoslav
Telerik team
answered on 21 Dec 2012, 08:15 AM
Hi Chris,

You do not need to iterate over all rows you need to check if all checkbox from the current group are checked or someone of them is unchecked. I am sending you the modified version of the example please check it out and let me know if it helps you.

Looking forward for your reply.

All the best,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Chris Trina
Top achievements
Rank 1
answered on 21 Dec 2012, 01:42 PM
Thanks for the new code.  However, I do not see the call to "checkUncheckParent".  I know how to send the current checkbox as a parameter, but how do I send the parent?

Thanks again for your help.
0
Princy
Top achievements
Rank 1
answered on 26 Dec 2012, 07:26 AM
HI,

The function "checkUncheckParent" is called in the prerender event of the radgrid. Please check the code behind.
C#:
void RadGrid1_PreRender(object sender, EventArgs e)
   {
       List<GridGroupHeaderItem> headerItems = RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader).Cast<GridGroupHeaderItem>().ToList();
       foreach (GridGroupHeaderItem item in headerItems)
       {
           var checkBox = item.FindControl("CheckBox1") as CheckBox;
           List<GridDataItem> childItems = item.GetChildItems().Cast<GridDataItem>().ToList();
           foreach (var child in childItems)
           {
               CheckBox selectColumnCheckBox = child["selectColumn"].Controls[0] as CheckBox;
               selectColumnCheckBox.Attributes.Add("onclick", string.Format("checkUncheckParent('{0}','{1}'); return false;", selectColumnCheckBox.ClientID, checkBox.ClientID));
           }
       }
   }

The parent checkbox is passed as "checkBox.ClientID" in the above code.

Thanks,
Princy.    
0
Chris Trina
Top achievements
Rank 1
answered on 27 Dec 2012, 09:56 PM
That did it.  Thanks
0
Chris Trina
Top achievements
Rank 1
answered on 15 Jan 2013, 12:49 AM
I have one more problem with my app.  If a section is collapsed and you check/uncheck it, any items that were not visible are unchanged.  Is there a way to change the items that are hidden?
0
Chris Trina
Top achievements
Rank 1
answered on 15 Jan 2013, 07:39 PM
I got it.  I had to add  --  MasterTableView-GroupLoadMode="Client"
0
John Mutters
Top achievements
Rank 1
answered on 20 Aug 2013, 09:12 AM
Good code, but don't forget to check for null references on the currentNode in the while loops ;-)
0
Ray
Top achievements
Rank 1
answered on 06 Aug 2015, 09:30 PM

Hi princy,

I've implemented the example of the client side code in my app. It all works great except I no longer have the group header text.

I tried to add a label to the group template. But all examples i've come across presume that the group by columns will not be changing at runtime. Mine can be changed by drag and drop. And may have have multiple levels of grouping. Is there a solution to this issue?

0
Radoslav
Telerik team
answered on 11 Aug 2015, 08:00 AM
Hello Ray,

There is not straight solution for your case. When you have multiple groups you need to write your own logic for traversing all group items (in all nested group levels) and check manually the checkboxes. However please note that this is a custom scenario and it is out of our support scope. You can use my example as a starting point and modify it for your case.

Regarding the issue with not showing the group header texts:
Can you send us a small runnable example where the problem can be reproduced? Thus we will be able to gather more details about your scenario and provide you with more to-the-point answer.

Looking forward for your reply.

Regards,
Radoslav
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
vijay
Top achievements
Rank 1
answered on 22 Nov 2016, 07:22 AM

Hi, I have added check box at group header level from code behind. but i am not able to get selected values. please see below my code.

Code used for adding check box only at second group.

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            CreateHeaderControls(e);
        }

        protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            CreateHeaderControls(e);
        }

        private void CreateHeaderControls(GridItemEventArgs e)
        {
            if (e.Item is GridGroupHeaderItem)
            {
                GridGroupHeaderItem item = e.Item as GridGroupHeaderItem;
                DataRowView groupDataRow = (DataRowView)e.Item.DataItem;
                if (groupDataRow != null && groupDataRow.Row.ItemArray.Count() == 4)
                {
                    CheckBox check = new CheckBox();
                    check.ID = "CheckInvite";
                    check.Text = groupDataRow.Row.ItemArray[0].ToString() + " To " + groupDataRow.Row.ItemArray[1].ToString();
                    item.DataCell.Controls.Add(check);
                }
            }
        }

 

Trying to get selected values from my button click

protected void btnInvite_Click(object sender, EventArgs e)
        {
            List<GridGroupHeaderItem> headerItems = RadGrid1.MasterTableView.GetItems(GridItemType.GroupHeader).Cast<GridGroupHeaderItem>().ToList();
            foreach (GridGroupHeaderItem item in headerItems)
            {
                var checkBox = item.FindControl("CheckInvite") as CheckBox;
            }
        }

 

but always checkBox coming as null. Please see attached my screen shot also. (Note my radgrid i created on modal popup, hope this will not be any problem. i do not want any post back or auto post back.) Just I need to get selected groups from code behind.

 

0
vijay
Top achievements
Rank 1
answered on 22 Nov 2016, 07:27 AM
Please find attached my aspx code aslo.
0
Eyup
Telerik team
answered on 23 Nov 2016, 08:32 AM
Hello Vijay,

I've already replied to your colleague for this query. I suggest that we continue our technical conversation on the formal support thread.

Regards,
Eyup
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
vijay
Top achievements
Rank 1
answered on 23 Nov 2016, 10:20 AM
Thank you Eyup.
0
SivaSekhar
Top achievements
Rank 1
answered on 03 Aug 2018, 08:47 AM

Hi Everyone,

I tried below code:

void rgNewInvoice_PreRender(object sender, EventArgs e)
        {
            List<GridGroupHeaderItem> headerItems = rgNewInvoice.MasterTableView.GetItems(GridItemType.GroupHeader).Cast<GridGroupHeaderItem>().ToList();
            foreach (GridGroupHeaderItem item in headerItems)
            {
                var checkBox = item.FindControl("CheckBox1") as CheckBox;

                GridHeaderItem headerItem = rgNewInvoice.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem;
                List<GridEditableColumn> childItems = item.GetChildItems().Cast<GridEditableColumn>().ToList();
                foreach (var child in childItems)
                {
                    //CheckBox selectColumnCheckBox = child["selectColumn"].Controls[0] as CheckBox;
                    //selectColumnCheckBox.Attributes.Add("onclick", string.Format("checkUncheckParent('{0}','{1}'); return false;", selectColumnCheckBox.ClientID, checkBox.ClientID));
                }
            }
        }

But i am getting error as : Unable to cast object of type 'Telerik.Web.UI.GridGroupHeaderItem' to type 'Telerik.Web.UI.GridDataItem

Can you help me on this issue,

Thanks in advance.

Regards,

Shiva

0
Eyup
Telerik team
answered on 08 Aug 2018, 07:25 AM
Hello SivaSekhar,

You can check the samples provided by Radoslav in this thread or check the sample provided here:
https://www.telerik.com/support/code-library/selecting-all-items-in-a-group-with-a-checkbox-in-the-group-header-item

If the issue remains, please open a formal support ticket and send us a runnable isolated version of your project so we can debug it locally.

Regards,
Eyup
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Chris Trina
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Chris Trina
Top achievements
Rank 1
Princy
Top achievements
Rank 1
John Mutters
Top achievements
Rank 1
Ray
Top achievements
Rank 1
vijay
Top achievements
Rank 1
Eyup
Telerik team
SivaSekhar
Top achievements
Rank 1
Share this question
or