collapseAllGroups() does nothing?

6 posts, 0 answers
  1. Gidon
    Gidon avatar
    7 posts
    Member since:
    Apr 2014

    Posted 31 Mar Link to this post

    I'm attempting to implement a client-side expand-only-one-group function for a relatively simple RadGrid using the 2016Q1 release. I had thought it'd be as simple as:

    <script type="text/javascript">
      function rgInspection_GroupExpanding(sender, eventArgs) {
        sender.get_masterTableView().collapseAllGroups()
      }
    </script>
    <telerik:RadGrid DataSourceID="sdsInspection" ID="rgInspection" runat="server" ShowHeader="False">
      <ClientSettings AllowGroupExpandCollapse="True">
        <ClientEvents OnGroupExpanding="rgInspection_GroupExpanding" />
      </ClientSettings>
      <MasterTableView DataSourceID="sdsInspection" GroupLoadMode="Client" GroupsDefaultExpanded="False">
        
        <GroupByExpressions>
          <telerik:GridGroupByExpression>
            <SelectFields>
              <telerik:GridGroupByField FieldName="Title" />
            </SelectFields>
            <GroupByFields>
              <telerik:GridGroupByField FieldName="DisplayOrder" SortOrder="Ascending" />
            </GroupByFields>
          </telerik:GridGroupByExpression>
        </GroupByExpressions>
      </MasterTableView>
    </telerik:RadGrid>

    but that doesn't work.

    So I tried expanding all of the groups by clicking them, then running $find("ctl00_cphMain_rgInspection").get_masterTableView().collapseAllGroups(); from the console. It returned 'true' but didn't actually collapse anything. I tried again specifying the optional argument: 0 returns true, everything else returns false, none of the groups actually collapse. I'm at my wits end here and can't for the life of me figure out if it's something I'm doing wrong or a legitimate bug.

    I can't have the page postback until the final submission, so using a server-side expand-only-one solution isn't going to work for me. Any help would be greatly appreciated.

  2. Gidon
    Gidon avatar
    7 posts
    Member since:
    Apr 2014

    Posted 04 Apr Link to this post

    Answering my own question in case anyone else runs into this issue.

    So it looks like to make this work you have to track which group is currently expanded and ONLY collapse that particular group. CollapseAllGroups doesn't seem to do anything and iterating through every group collapsing it (whether it's expanded or not and whether it's the group to-be-expanded or not) produces...unexpected results.

    To accomplish this, I added an activeGroup JavaScript variable which I initialize to -1. After expanding the first group in the client-side GridCreated event, I reinitialize the activeGroup variable to 0. In the client-side GroupExpanding event, I check whether (activeGroup >= 0) and, if so, collapse that group (this is why the activeGroup variable is first initialized to -1. Otherwise, the GridCreated group expansion will try to collapse a group that isn't expanded and will cause unexpected behaviors.) Finally, using jQuery, I attach an additional 'click' event handler to the expand/collapse buttons to update activeGroup to the correct group index.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 05 Apr Link to this post

    Hello Gidon,

    I examined the provided code and as far as I can see you try to collapse all groups when you expand any. If that is correct I would recommend you to cancel the expanding instead of collapsing all groups (eventArgs.set_cancel(true)). Otherwise I test the collapseAllGroups method on my end and seems to work correctly. You can examine the attached sample which demonstrates that.

    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Gidon
    Gidon avatar
    7 posts
    Member since:
    Apr 2014

    Posted 05 Apr Link to this post

    I think you misunderstood what I was trying to accomplish. I wanted to only allow 1 group to be expanded at any time, starting with group 0. I managed to get it working. Using your sample project as a base--since the real one has all sorts of extra stuff that doesn't need to be posted here--it'd look like this:

     

  6. Gidon
    Gidon avatar
    7 posts
    Member since:
    Apr 2014

    Posted 05 Apr in reply to Gidon Link to this post

    JavaScript:

    var activeGroup = -1;
     
    function GridCreated(sender, eventArgs) {
      // Add active index tracking to the expand buttons
      $(".rgExpand").each(function (index) {
        $(this).click(function (event) {
          setTimeout(function () {
            activeGroup = index;
          }, 1);
        });
      });
     
      // Expand the first group
      var masterTableView = sender.get_masterTableView();
      masterTableView.expandGroup(masterTableView.get_dataItems()[0].get_element(), {
        expandChildren: false,
        findClosestGroup: true
      });
      activeGroup = 0;
    }
     
    function GroupExpanding(sender, eventArgs) {
      // If activeGroup hasn't been initialized yet don't try to collapse anything
      if (activeGroup !== -1) {
        var masterTableView = sender.get_masterTableView();
        var groupHeader = $telerik.getElementsByClassName(masterTableView.get_element(), "rgGroupHeader")[activeGroup];
        activeGroup = -1;
        masterTableView.collapseGroup(groupHeader, {
          expandChildren: false,
          findClosestGroup: true
        });
      }
    }

    RadGrid:

    <telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource"
      runat="server">
      <ClientSettings AllowGroupExpandCollapse="True">
        <ClientEvents OnGridCreated="GridCreated" OnGroupExpanding="GroupExpanding" />
      </ClientSettings>
      <MasterTableView CommandItemDisplay="Top" GroupLoadMode="Client" GroupsDefaultExpanded="False">
        <GroupByExpressions>
          <telerik:GridGroupByExpression>
            <GroupByFields>
              <telerik:GridGroupByField FieldName="Column1" />
            </GroupByFields>
            <SelectFields>
              <telerik:GridGroupByField FieldName="Column1" />
            </SelectFields>
          </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <Columns>
          <telerik:GridBoundColumn DataField="Column1" HeaderText="Column1"></telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="Column2" HeaderText="Column2"></telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="Column3" HeaderText="Column3"></telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="Column4" HeaderText="Column4"></telerik:GridBoundColumn>
        </Columns>
      </MasterTableView>
    </telerik:RadGrid>

     

    When the grid is created the first group is expanded. After that, as any group expands the previously expanded group collapses.

  7. Kostadin
    Admin
    Kostadin avatar
    1713 posts

    Posted 08 Apr Link to this post

    Hi Gidon,

    In order to expand or collapse a specific item you need to use expandGroup and collapseGroup which I noticed you are already using.


    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017