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

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

13 Answers 685 Views
Grid
This is a migrated thread and some comments may be shown as answers.
OL
Top achievements
Rank 1
OL asked on 13 Aug 2010, 09:49 AM
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.

13 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 13 Aug 2010, 12:07 PM
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.
0
OL
Top achievements
Rank 1
answered on 13 Aug 2010, 01:46 PM
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.
0
Tsvetina
Telerik team
answered on 19 Aug 2010, 09:37 AM
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
0
Sam
Top achievements
Rank 1
answered on 03 Sep 2010, 12:58 AM
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>
0
Mira
Telerik team
answered on 03 Sep 2010, 03:07 PM
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
0
Adam sharpe
Top achievements
Rank 1
answered on 04 Oct 2010, 03:58 PM
The clientside expanding script works great in IE, but does not work for some reason in Firefox. Any ideas why?
0
Mira
Telerik team
answered on 07 Oct 2010, 03:21 PM
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
0
Jake
Top achievements
Rank 1
answered on 21 Jan 2011, 07:38 PM
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
0
Mira
Telerik team
answered on 26 Jan 2011, 01:07 PM
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.
0
Todd
Top achievements
Rank 1
answered on 03 Feb 2011, 07:47 AM
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
0
Ville
Top achievements
Rank 1
answered on 05 Apr 2012, 09:48 PM
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
0
Gotcha
Top achievements
Rank 1
answered on 17 Nov 2012, 04:32 AM
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>
0
Fandy Backers
Top achievements
Rank 2
answered on 06 Nov 2015, 12:08 PM
Finally this works great now on all browsers! super!!!
Tags
Grid
Asked by
OL
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
OL
Top achievements
Rank 1
Tsvetina
Telerik team
Sam
Top achievements
Rank 1
Mira
Telerik team
Adam sharpe
Top achievements
Rank 1
Jake
Top achievements
Rank 1
Todd
Top achievements
Rank 1
Ville
Top achievements
Rank 1
Gotcha
Top achievements
Rank 1
Fandy Backers
Top achievements
Rank 2
Share this question
or