Expand group on group name click

[Michael]

I was looking through the forums and pieced together a few things to expand a group when you click the text, not just the little arrow. Just thought I'd share. 

I'm using a group header template b/c I like to customize the text. So here it is, in your template drop this in.

<groupheadertemplate>

<asp:label id="lblGridHeader" runat="server" Text='<%# Eval("someCol") %>' />
</groupheadertemplate>

 

Throw in this JS

<script type="text/javascript">

function toggleGroups(index) {

var gridClientID = '<%= RadGrid1.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>

 Now, this part is so simple it's stupid. Took me a while before I realized how easy it was. Attach an ItemDataBound event to your grid. The, create a variable that's public for the page and initialize it to 0

MAKE SURE that is for the page, and not defined within the itemdatabound event. 

int _groupIndex = 0; //stored for the group index so we can expand/collapes on group row click

 Now, in the item data bound event, just do this. 

protected void gridCreqCat_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridGroupHeaderItem)
{
GridGroupHeaderItem item = (GridGroupHeaderItem)e.Item;

//this is an asp label b/c we need to render the <span> tag so we have something to click
Label headLbl = (Label)item.FindControl("lblGridHeader");
headLbl.Attributes.Add("onclick", "toggleGroups(" + _groupIndex.ToString() + ");");
_groupIndex++;
}
}

 

 

[Konstantin Dikov]

Hi Michael,

Thank you for posting your solution for custom expanding/collapsing of the groups through the group headers.

As a token of our gratitude for sharing your solution with the community you will find your Telerik Points updated.


Best Regards,
Konstantin Dikov
Telerik

[Michael]

Update! I found out my solution doesn't work in firefox. Here is some updated JS that works in all browsers.

function toggleGroups(index) {
        var gridClientID = '<%= gridCreqCat.ClientID %>';
        var masterTableView = $find(gridClientID).get_masterTableView();
        var groupHeader = $telerik.getElementsByClassName(masterTableView.get_element(), "rgGroupHeader")[index];
        masterTableView.toggleGroup(groupHeader,
            {
                toggleChildren: false,
                toggleParents: true
            });

    }