Grouping Datagrid

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.

Our examples will answer most of your questions:

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.

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?

Can you share how you got the grouping to work?

Cancel, I figure it out.

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

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.

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

@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.

Check if columns reorder is enabled.

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.

Here is the code for reference:

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.

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

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. :slight_smile:

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.

1 Like

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.

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

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

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