Expand Collapse Buttons for Data Grid

[brauerj-gc]

Data Grid has the ability to click on a row and expand or collapse a sub area but it would be very helpful if there was some pattern allowing us to have an expand collapse button (ie accordions, or a +/- like a tree) that could help the user #1 reallize there is hidden content and 2 easily control whether sub areas are shown or hidden.

Ideally it would be great to be able to somehow it look like an expandable grid/subgrid as a single visual unit.

Thanks for the great product.

(ABP Commercial License user)

[David-Moreira]

Hello @brauerj-gc I understand that it's awesome if libraries can do every single thing for us, but unfortunately we can't develop every single feature.

In this case, I think it's not hard to implement a custom solution, where you have a column with the expand/collapse button. I remember there was a user implementing this behavior before, I found the issue : https://github.com/Megabit/Blazorise/issues/3226

Could I kindly ask that you skim over it and see how hard or easy it would be to implement the feature?

Just let us know if there's anything we can help you with.

I'm still not 100% sure if DataGrid should include an option for this. But I believe it would indeed make for a better UX, if there's a collapse/expand button. I will leave this feature request open, but be advised that there are higher priority features that we'd like to focus on.

[brauerj-gc]

Perfect that should get me moving for now. I do think eventually this feature could be easily added (or at least a simple pattern provided on the docs page).

Thanks.

[brauerj-gc]

I'd think a clone of DataGridMultiSelectColumn could be made (DataGridExpandCollapseColumn) that could easily enable this functionality.

[David-Moreira]

Perfect that should get me moving for now. I do think eventually this feature could be easily added (or at least a simple pattern provided on the docs page).

Thanks.

For now a simple way to implement it can be provided in the docs. I think there's a ticket open to improve the docs for the detail row since it can be used in quite a few ways. We'd be pleased that if you get to this before us, if you could share with us your implementation and let us use on the docs. Thanks.

[David-Moreira]

I'd think a clone of DataGridMultiSelectColumn could be made (DataGridExpandCollapseColumn) that could easily enable this functionality.

That's a good idea it seems, we'll keep it in mind. Thanks.

[brauerj-gc]

K. I might look into working on the code... For now this is what I have... which tries to do BOTH mutliselect and expand...

<DataGrid TItem="MyItemDto" Data="MyItems" SelectionMode="DataGridSelectionMode.Multiple" @bind-SelectedRows="SelectedChecks"
          TotalItems="(int?)TotalCount" DetailRowTrigger=@((item) => expandedItemIds.Contains(item.Item.Id))
          RowDoubleClicked="@(e => ExpandCollapseClicked(e.Item))">
   <DataGridColumns>
        <DataGridMultiSelectColumn Width="15px"></DataGridMultiSelectColumn>
        <DataGridColumn TItem="MyItemDto" Filterable="false" >
            <DisplayTemplate>
                <div style="text-align: center;">
                    <Button Clicked="@(() => ExpandCollapseClicked(context))"><Icon Name="@((expandedItemIds.Contains(context.Id)) ? "fa-angle-down" : "fa-angle-right")" /></Button>
                </div>
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn ... />
        <DataGridColumn ... />
        <DataGridColumn ... />
    </DataGridColumns>
    <DetailRowTemplate>
    .......
    </DetailRowTemplate>
</DataGrid>

@code {
  private List<int> expandedItemIds = new List<int>();

  public void ExpandCollapseClicked(GlCheckReqDto item)
  {
      if (expandedItemIds.Contains(item.Id))
          expandedItemIds.Remove(item.Id);
      else
          expandedItemIds.Add(item.Id);
      InvokeAsync(StateHasChanged);
  }
}

[David-Moreira]

I think there's a PreventRowClick parameter if I remember correctly