Grouping Datagrid

asmussen · August 25, 2021, 1:53am

Thanks for the new grouping feature. Seems that the documentation samples for the new grouping feature is still in-progress. I figured out how to get it working but the following is unclear:

GroupHeaderTemplate is not shown in the sample. Can you provide samples of what it's used for. How to make the drop area bigger? Can I change the background color? There's no Style attribute.
Is it possible to collapse all the rows by default?
Can I set a column to be grouped by default on initial load of the grid?
There is no visual indication that a column grouping is disabled, the 3 dots are still visible when Groupable="false" and I can still drag the column.

Thanks, Justin.

enchev · August 25, 2021, 4:00am

Our examples will answer most of your questions:
https://blazor.radzen.com/datagrid-grouping-api
https://blazor.radzen.com/datagrid-group-header-template

Collapsing all groups by default is not supported. Styling using CSS is possible for all parts of the DataGrid component, you can use your browser dev tools element inspector to check the classes. The column drag indicator (three vertical dots) is dependent on Groupable and Reorderable column properties.

Ideplo · August 27, 2021, 8:27pm

The examples do not say how to turn on the grouping feature? I spent over an hr trying to figure it out. Both examples the properties are the same?

Ideplo · August 27, 2021, 10:15pm

Can you share how you got the grouping to work?

Ideplo · August 27, 2021, 10:51pm

Cancel, I figure it out.

enchev · August 28, 2021, 6:00am

The first example title says: Set AllowGrouping="true" to enable group by column

Stefan_Stamenkovic · August 30, 2021, 6:32am

Hi, as you said we can see the examples on those links, but I think that you attached the wrong source code for that examples.
Please, check that.
Also, I have a problem with the draggable column, because when I start dragging a strange offset appears between mouse click position and column cell.

enchev · August 30, 2021, 6:33am

Both issues will be fixed in our update later today. In the meantime you can check the source code of the demos:

Stefan_Stamenkovic · August 30, 2021, 8:04am

@enchev I found one more issue (or maybe isn't an issue but looks like that), for example, when I set "Groupable="false" " on some columns, I still can drag them. Functionality works, I can't drop a column with "Groupable="false" to a holder, but I think maybe is a good idea to disable drag at all on those columns.

enchev · August 30, 2021, 8:05am

Check if columns reorder is enabled.

Stefan_Stamenkovic · August 30, 2021, 8:38am

I check that now and works strange if I set Allow Grouping on TRUE it's no matter if the value of AllowColumnReorder is false, or the value of Reorderable (for a specific column) is false, or the value of Groupable (for a specific column) is false, I still can reordering and dragging columns.

enchev · August 30, 2021, 8:41am

Here is the code for reference:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenDataGrid.razor#L83

    
      
              <th class="rz-col-icon rz-unselectable-text" scope="col">
                  <span class="rz-column-title"></span>
              </th>
          }
          @foreach (var column in visibleColumns)
          {
              var columnIndex = visibleColumns.IndexOf(column);
              var sortableClass = AllowSorting && column.Sortable ? "rz-sortable-column" : "";
              <th class="@($"rz-unselectable-text {sortableClass} {column.HeaderCssClass} {getFrozenColumnClass(column, visibleColumns)}")" scope="col" style="@column.GetStyle(true, true)" @onmouseup=@(args => EndColumnReorder(args, columnIndex))>
                  <div @onclick='@((args) => OnSort(args, column))' style="width:100%">
                      @if (AllowColumnReorder && column.Reorderable || AllowGrouping)
                      {
                          <span id="@getColumnResizerId(columnIndex)" class="rz-column-drag" 
                               @onclick:preventDefault="true" @onclick:stopPropagation="true"
                               @onmousedown=@(args => StartColumnReorder(args, columnIndex))>&nbsp;</span>
                      }
                      <span class="rz-column-title">
                          @if (column.HeaderTemplate != null)
                          {
                              @column.HeaderTemplate
                          }

Stefan_Stamenkovic · August 30, 2021, 8:52am

Yesterday I downloaded and checked the source code and fixed some of these issues for my project, so currently, I don't have any problems, but I report this for benefit of others.
Thank you for your answers.

enchev · August 30, 2021, 8:55am

Downloading and fixing for yourself is not how the OSS works. We accept pull requests!

Stefan_Stamenkovic · August 30, 2021, 9:20am

When I said "I fixed" I meant "I adjusted" some things for specific problems for my project, otherwise I would probably create a pull request for those changes.

For example, I made "Group By" on radio buttons, and I fixed problems for my project, but the issues that I mentioned are still there.

asmussen · August 31, 2021, 12:29pm

I'm not familiar with the codebase but maybe there should a test for the "groupable" attribute on line 83 or an else if. I have AllowColumnReorder="false" Reorderable="false" Groupable="false" and the column is still draggable.

enchev · August 31, 2021, 12:32pm

Yes, there will be in the next update before the end of this week.

Stefan_Stamenkovic · September 8, 2021, 8:57am

Hi @enchev, I found one more thing, when you want to group by multiple columns, you can't collapse subgroups.

enchev · September 8, 2021, 11:49am

We will do our best to include fix for this in our next release before the end of the week.