How to Expand and Collapse Groups

• Dec 17, 2020
• 2 minutes to read

ASPxCardView provides group buttons that allow end users to expand or collapse groups. The IsGroupRowExpanded method identifies whether the group row is expanded or collapsed.

Expand Group Row

Use the following APIs to expand a group row.

API Member	Description
ASPxCardViewBehaviorSettings.AutoExpandAllGroups	Specifies whether the card view automatically expands all group rows.
ASPxCardView.ExpandGroupRow (server side) ASPxClientCardView.ExpandGroupRow (client side)	Expands the specified group row.
ASPxCardView.ExpandAll (server side) ASPxClientCardView.ExpandAll (client side)	Expands all group rows.
ASPxClientCardView.GroupRowExpanding	The card view raises this event before the group row is expanded.

Collapse Group Rows

Use the following APIs to expand the group row.

API Member	Description
ASPxCardView.CollapseGroupRow (server side) ASPxClientCardView.CollapseGroupRow (client side)	Collapses the specified group row.
ASPxCardView.CollapseAll (server side) ASPxClientCardView.CollapseAll (client side)	Collapses all group rows.
ASPxClientCardView.GroupRowCollapsing	The card view raises this event before the group row is collapsed.

Examples

• The following example illustrates how to expand and collapse ASPxCardView groups.

  C#

  protected void ASPxButton1_Click(object sender, EventArgs e) {
      cardView.ExpandGroupRow(1);
      cardView.ExpandGroupRow(2);
  }
  

  ASPX

  <dx:ASPxPopupMenu ID="ASPxPopupMenu1" runat="server" ClientInstanceName="menu">
      <ClientSideEvents ItemClick="OnItemClick" />
      <Items>
          <dx:MenuItem Name="Expand" Text="Expand">
          </dx:MenuItem>
          <dx:MenuItem Name="Collapse" Text="Collapse">
          </dx:MenuItem>
      </Items>
  </dx:ASPxPopupMenu>
  <dx:ASPxCardView ID="ASPxCardView1" runat="server" DataSourceID="HomesDataSource" ClientInstanceName="cardView">
      <Columns>
       ...
      </Columns>
  ...
  </dx:ASPxCardView>
  <dx:ASPxButton ID="ASPxButton1" runat="server" OnClick="ASPxButton1_Click" Text="ASPxButton">
  </dx:ASPxButton>
  

  JS

  var index = 1;
  function OnItemClick(s, e) {
      if (e.item.name == 'Expand')
          cardView.ExpandGroupRow(index);
      if (e.item.name == 'Collapse')
          cardView.CollapseGroupRow(index);
  }
  

• The following example illustrates how to expand a group by clicking it.

  JS

  if (cardView.IsGroupRow(e.visibleIndex)) {
      if (cardView.IsGroupRowExpanded(e.visibleIndex))
          cardView.CollapseGroupRow(e.visibleIndex);
      else
          cardView.ExpandGroupRow(e.visibleIndex);
  }