Collapse all groups clientside on load

11 posts, 1 answers
  1. Aaron
    Aaron avatar
    22 posts
    Member since:
    Nov 2008

    Posted 13 Nov 2010 Link to this post

    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)

  2. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 16 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aaron
    Aaron avatar
    22 posts
    Member since:
    Nov 2008

    Posted 16 Nov 2010 Link to this post

    Thanks, that worked.

    Cheers
    Aaron
  5. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 23 May 2013 Link to this post

    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
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 23 May 2013 Link to this post

    Hi Martin,

    You can use such approach to set the handler dynamically:
    if (!IsPostBack)
    {
        RadGrid1.ClientSettings.ClientEvents.OnGridCreated="CollapseAll";
    }


    Regards,
    Vasil
    Telerik
    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.
  7. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 23 May 2013 Link to this post

    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
  8. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 24 May 2013 Link to this post

    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
    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.
  9. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 24 May 2013 Link to this post

    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
  10. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 29 May 2013 Link to this post

    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
    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.
  11. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 29 May 2013 Link to this post

    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
  12. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 31 May 2013 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017