Collapse all groups clientside on load

[Aaron]

How can I set the grid to collapse it's groups on load via client side script.

I was previously doing this server side but I need to grid to stay expanded for people who have javascript disabled (the grid only collapses if the user has javascript on)

[Vasil]

Hello Aaron,

First attach CollapseAll client function to OnGridCreated client event.

<telerik:RadGrid ID="RadGrid1" runat="server" ...>
   ....
   <ClientSettings AllowGroupExpandCollapse="True" ...>
      ...
      <ClientEvents OnGridCreated="CollapseAll" />

And here is the client code of this function:

<script type="text/javascript">
    function CollapseAll(event) {
        var tableView = $find('<%=RadGrid1.ClientID %>').get_masterTableView();
        var rows = tableView.get_element().rows;
        for (var i = 0, len = tableView.get_element().rows.length; i < len; i++) {
            var button = tableView._getGroupExpandButton(rows[i]);
            if (button) {
                var groupLevel = button.id.split("__")[2];
                if (groupLevel == 0) {
                    tableView._toggleGroupsExpand(button, event);
                }
            }
        }
    }
</script>

You can also check the sample aspx page attached to this post.

Greetings,
Vasil
the Telerik team

[Aaron]

Thanks, that worked.

Cheers
Aaron

[Martin Roussel]

Hi,

while the provided code works good for me. Im trying to only execute it on page first load (!IsPostback) but have issues. The reason I want to do this is because I dont want the collapsing when using the grid (ex:clicking the Edit button to edit a row). To do so, Im calling the CollapseAll event from server-side: 

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ScriptManager.RegisterStartupScript(Page, typeof(Page), "mykey", "CollapseAll()", true);
        }
    }

The problem is I dont know how to pass the "event" parameter. If I ommit it, the _toggleGroupsExpand function returns this error: "Uncaught TypeError: Cannot read property 'groupLevel' of undefined" even if it succeeds to collapse the first group it finds. Because of the error, the code stops and I end up with the remaining groups still expanded.

Can anyone help?

TIA

[Vasil]

Hi Martin,

You can use such approach to set the handler dynamically:

if (!IsPostBack)
{
    RadGrid1.ClientSettings.ClientEvents.OnGridCreated="CollapseAll";
}

Regards,
Vasil
Telerik

[Martin Roussel]

Thanks Vasil,

Unfortunately, as I precised, I dont want the collapsing when using the grid (ex:clicking the Edit button to edit a row). With your code, when I want to edit a row content, the row collapse and all input fields are no more visible (had to exapnd the row back). OnGridCreated
seems not a solution.

TIA

[Vasil]

Hi Martin,

You can call the collapseAllGroups(level) client function of RadGrid to collapse all groups client side. For Level you can pass any integer, depending on your requirements. You don't need the original event and you will avoid to call the _toggleGroupsExpand directly.

Regards,
Vasil
Telerik

[Martin Roussel]

Vasil,

I always get "Uncaught TypeError: Object [object Object] has no method 'collapseAllGroups' ". I also cant find any documentation regarding this function. I run version 12.05, is this function newer than that?

function collapseAllGroups() {

             setTimeout(function () {
             var grid = $find('<%=RadGrid1.ClientID %>');
                grid.collapseAllGroups(0);
            }, 1000);
        }

TIA

[Vasil]

Hello Martin,

You will get this exception if the $find('<%=RadGrid1.ClientID %>') returns null. Since the null does not have collapseAllGroups method.  This will happen if you call collapseAllGroups too early, before the grid has initialized on the page. If you call this function, on pageLoad this problem should not happen.
See these resources for more information:
http://www.telerik.com/help/aspnet-ajax/grid-control-lifecycle.html
http://asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx

Regards,
Vasil
Telerik

[Martin Roussel]

Vasil,

$find('<%=RadGrid1.ClientID %>') doesnt return null. I get the grid, it simply doesnt have such method. The proof, if you look at my last post, im getting an Object. Can you send a working sample of what you're suggesting please. It would really help more.

TIA

Martin

[Vasil]

Hi Martin,

The collapseAllGroups will be included in the upcoming Q2 2013 release. You can test your code using the current available beta version.

Regards,
Vasil
Telerik