How to expand a group with a client click on the group header row?

14 posts, 0 answers
  1. OL
    OL avatar
    20 posts
    Member since:
    Jan 2010

    Posted 13 Aug 2010 Link to this post

    Hello,
    I'd like to expand/collapse a group in a RadGrid by clicking the entire row of the group header, not just the litte arrow on the left.
    Is it possible?
    I guess I need to use the OnRowClick in ClientSettings.ClientEvents.
    But any help would be appreciated.
    Thanks.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Aug 2010 Link to this post

    Hello,

    You can refer the following Code Library which explains how to Expand/Collapse a group when double clicking on the group header row.
    Use the same approach and instead of the onDblClick client event, add onClick attribute to the GridGroupHeader to expand/collapse the group.
    ExpandCollapseGroupedGridOnDoubleClickingTheGroupHeader

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. OL
    OL avatar
    20 posts
    Member since:
    Jan 2010

    Posted 13 Aug 2010 Link to this post

    Thanks for your reply.
    However, I am quite surprised by the complexity of this "server" solution. I set it up and find that it interferes with the default behavior of the expand/collapse arrow.

    I see in the HTML generated source the following code :

    <input type="submit" name="ctl00$XXXXX" value=" " onclick="$find(&quot;ctl00_XXXXX_ctl00&quot;)._toggleGroupsExpand(this, event); return false;" class="rgExpand" id="ctl00_XXXX_ctl00__2__0" />

    Is there a way to call this same _toggleGroupsExpand method for the header <tr> on the client side?
    Thanks.
  5. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 19 Aug 2010 Link to this post

    Hello,

    The solution provided is actually quite simple in case you use GroupLoadMode set to Server. In this case there would be no javascript method attached to the expand/collapse arrows, thus no interference. I assume that you use GroupLoadMode="Client" which requires more custom logic in order to implement the desired functionality fully on the client, so one option would be going with that approach, another would be writing more complex and greater amount of custom javascript.

    Sincerely yours,
    Tsvetina
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  6. Sam
    Sam avatar
    1 posts
    Member since:
    Jul 2010

    Posted 02 Sep 2010 Link to this post

    HI OL,

    I too was surprised that this sort of thing was being done on the server so I spent a few mins digging through the source and came up with the following. I'm not sure what the telerik rep was alluding to but I think this solution is far simpler (and more elegant) than the postback scenario outlined previously. One not of caution though, my grid contains no other input tags (ie. I don;t use a template column with any controls that render an input), if you do however make sure you modify the function to check that you're working against the group toogles.

     Hope this helps.

    Cheers
    Sam

    <body>
    <script type="text/javascript">
        function toggleGroups(index) {
            var gridClientID = '<%= Grid1.ClientID %>';
            var grid = $find(gridClientID);
            var masterTable = grid.get_masterTableView();
      
            var groupToggles = masterTable._element.getElementsByTagName('INPUT');
      
            if (index != null) {
                if (index < groupToggles.length)
                    masterTable._toggleGroupsExpand(masterTable._element.getElementsByTagName('INPUT')[index], event);
            }
            else {
                for (var i = 0; i < groupToggles.length; i++) {
                    masterTable._toggleGroupsExpand(masterTable._element.getElementsByTagName('INPUT')[i], event);
                }
            }
             
              
        }
          
        </script>
        <input type="button" onclick="toggleGroups(null);" value="Toggle All" />
        <input type="button" onclick="toggleGroups(0);" value="Toggle 1st" />
        <input type="button" onclick="toggleGroups(1);" value="Toggle 2st" />
        <form id="form1" runat="server">
        <div>
              <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
                <telerik:RadGrid ID="Grid1" AutoGenerateColumns="true" runat="server">
                    <ClientSettings ReorderColumnsOnClient="true"  AllowGroupExpandCollapse="true" />
                    <MasterTableView GroupLoadMode="Client" GroupsDefaultExpanded="false">
                        <GroupByExpressions>
                            <telerik:GridGroupByExpression>
                                <SelectFields>
                                    <telerik:GridGroupByField FieldAlias="Name" FieldName="Name" HeaderText="Name" />
                                </SelectFields>
                                <GroupByFields>
                                    <telerik:GridGroupByField FieldName="Name" HeaderText="Name" />
                                </GroupByFields>
                            </telerik:GridGroupByExpression>
                        </GroupByExpressions>
                    </MasterTableView>
                </telerik:RadGrid>
        </div>
        </form>
    </body>
  7. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 03 Sep 2010 Link to this post

    Hello Sam,

    Thank you for sharing your solution.

    Another approach for implementing similar functionality can be found in the Expand/collapse grouped grid client-side on external control click code library.

    Sincerely yours,
    Mira
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  8. Adam sharpe
    Adam sharpe avatar
    6 posts
    Member since:
    May 2010

    Posted 04 Oct 2010 Link to this post

    The clientside expanding script works great in IE, but does not work for some reason in Firefox. Any ideas why?
  9. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 07 Oct 2010 Link to this post

    Hello Adam,

    I have tested this code under IE and Firefox and it is working fine on my side.
    If the issue persists, please let me know if there are any differences at your end, which I may be leaving out.

    Best wishes,
    Mira
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  10. Jake
    Jake avatar
    24 posts
    Member since:
    Nov 2010

    Posted 21 Jan 2011 Link to this post

    Hi -

    Is this still the preferred method for making the group header row clickable to expand/collapse the group? It seems so much more user-friendly - I was wondering if this will be an option built-in to the control in the future?

    Many thanks - Jake
  11. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 26 Jan 2011 Link to this post

    Hello Jake,

    The approach from the ExpandCollapseGroupedGridOnDoubleClickingTheGroupHeader code library is the recommended one for implementing this functionality.

    Thank you for your suggestion for making a built-in option. I will forward it to our developer team and they will consider implementing it in future versions of RadGrid.

    All the best,
    Mira
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  12. Todd
    Todd avatar
    3 posts
    Member since:
    Oct 2010

    Posted 03 Feb 2011 Link to this post

    I accomplished this with two Javascript functions:
            function StopPropagation(e)
                {
                    //cancel bubbling
                    e.cancelBubble = true;
                    if (e.stopPropagation)
                    {
                        e.stopPropagation();
                    }
                }
    	function ToggleGroup(index)
                {
                    var grid = $find('<%= RadGrid1.ClientID %>');
                    var masterTable = grid.get_masterTableView();
      
                    var groupToggles = masterTable._element.getElementsByTagName('INPUT');
                    masterTable._toggleGroupsExpand(masterTable._element.getElementsByTagName('INPUT')[index], event);
                }
    And the following server side:
        Protected Sub RadGrid1_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles RadGrid1.ItemDataBound
            If TypeOf e.Item Is GridGroupHeaderItem Then

                Dim groupheaderItem As GridGroupHeaderItem = TryCast(e.Item, GridGroupHeaderItem)

                'Create String array to hold Group Index elements
                Dim groupIndex() As String
                'A Group Index usually looks like l_l_l_n where l = levels deep and n = group index at specified level
                groupIndex = groupheaderItem.GroupIndex.Split("_")
                'Create variable to hold sequential index of group header
                Dim index As Integer

                'Index is atleast n (from above)
                index = CType(groupIndex(groupIndex.Length - 1), Integer)
                'Now add number of levels deep to index 
                index += groupIndex.Length - 1

                'Add onclick to header to collapse/expand
                groupheaderItem.Cells(groupheaderItem.Cells.Count - 1).Attributes.Add("onclick"String.Format("ToggleGroup('{0}'); StopPropagation(event);", index))

            End If
        End Sub
  13. Ville
    Ville avatar
    18 posts
    Member since:
    Apr 2010

    Posted 05 Apr 2012 Link to this post

    Here is another simple approach using jQuery to search for child object which I use on my projects:
                function ExpandMe(n) {

                    $(n).children()[0].children[0].click();

                }

    code behind:

    Protected Sub RadGrid1_ItemDataBound(ByVal sender As ObjectByVal e As GridItemEventArgs)
            If TypeOf e.Item Is GridGroupHeaderItem Then
                Dim headerItem As GridGroupHeaderItem = e.Item
                headerItem.Attributes.Add("onclick""ExpandMe(this); return false;")
            End If
    End Sub
  14. Gotcha
    Gotcha avatar
    64 posts
    Member since:
    Sep 2009

    Posted 16 Nov 2012 Link to this post

    Nice and simple....gotta love jQuery!


    Ville or anyone...

    By using JQuery, and adding the OnCLick event on the Header <tr> it broke the Click on the Image Button which is in the <td> of the Row... As you saw in the generated HTML, the onclick is still there... but when i click on it, it does not do anything...since the sender is no longer the tr but instead the button...

    How can i fix this? So that both the clicking on the header and the clicking on the button image works?


    <tr class="rgGroupHeader" onclick="ExpandMe(this);">
            <td class="rgGroupCol"><input type="button" name="ctl00$phContent$DUC_Step_1$grdSelectedList$ctl00$ctl07$ctl00" value=" " onclick="$find("ctl00_phContent_DUC_Step_1_grdSelectedList_ctl00")._toggleGroupsExpand(this, event); return false;__doPostBack('ctl00$phContent$DUC_Step_1$grdSelectedList$ctl00$ctl07$ctl00','')" title="Collapse group" class="rgCollapse" id="ctl00_phContent_DUC_Step_1_grdSelectedList_ctl00__5__0"></td><td style="border-right:0;"><div style="width:100%;height:100%;white-space:nowrap;position:relative;"><div style="position:absolute;"><div style="position:relative;"><div class="selectedListHeader">Canned Goods and Soup</div></div></div></div></td><td> </td><td> </td><td> </td>
        </tr>
  15. Fandy Backers
    Fandy Backers avatar
    15 posts
    Member since:
    Apr 2009

    Posted 06 Nov 2015 in reply to Ville Link to this post

    Finally this works great now on all browsers! super!!!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017