collapseAllGroups() does nothing?

[Gidon]

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.

[Gidon]

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.

[Kostadin]

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

[Gidon]

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:

 

[Gidon]

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.

[Kostadin]

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