WinForms Data Grid - Merged Column Grouping and Compact Data View (Coming soon in v17.1)

Thinking Out Loud
19 April 2017
We've been hard at working extending our WinForms Data Grid and in our upcoming release, we'll ship a handful of new features designed to help you create incredibly refined WinForms user interfaces. In this post, I'll focus on the new Compact View and describe the usability virtues of Merged Column Grouping.

Office-Inspired Compact View
 
As you already know, our Grid ships with a number of unique Data Views (Standard, Banded, Tile, WinExplorer, etc). In this release cycle, we've updated the Grid's Tile View so you can deliver user experiences that mimic Microsoft Outlook's Compact View option. As you can see in the image below, this new UI metaphor will give you an entirely new way to display data - one that is more aesthetic, and in many cases, more readable than using a standard column/row UI metaphor.

WinForms Grid Office 365-inspired Compact View

To help illustrate the benefits of the new Compact View, let's take a quick look at the DevAV demo which ships as part of our WinForms distribution. Prior to the availability of our Compact View, the Employees module looked like the following:

WinForms Data Grid Table View

With Compact View enabled (pictured below), the Employee module's evaluation grid is easier to read and able to call attention to important employee attributes (In this case, did the employee get a raise and/or a bonus).

WinForms Data Grid Outlook 365 Compact View

Once we release v17.1, we'll ship a new WinForms Grid Designer to help you create a wide variety of tile based layouts - Our goal is to give you the ability to generate layouts using standard table design logic; divide a tile template into rows and columns and place tile elements onto table cells using drag-and-drop (and of course to merge table cells for more complex layouts). Needless to say, tile elements can then be placed into table cells which will resize proportionally.

Just like Merged Column Grouping described below, the use of the Compact View will be predicated by business needs - Compact View is not superior to a traditional table layout, it's merely meant to augment UI options.

Merged Column Grouping

In addition to the new Compact View option, our upcoming release will allow you to merge the grid's grouped columns by dragging the appropriate column header(s) to the group panel (with the CTRL key pressed) and arrange them across a single "grouping line." Merged grouped columns are a great way to reduce complexity and improve readability within grids that contain multiple group level. To illustrate the virtues of merged groups, let's first look at a grid with a traditional grouping hierarchy...

WinForms Data Grid - Merged Column Grouping Inactive

The data displayed within the grid pictured above has been grouped by the Category column AND the Status column. In the grid below, data has been grouped by the same columns, but instead of nested grouping within the grid's container, the 2 columns are merged into a "joined" group.

WinForms Data Grid Merged Column Grouping Active

The decision to use traditional nested groups versus our new merged column groups is entirely up to you and your users. The flexibility built into our WinForms Data Grid gives you the wherewithal to activate the feature as needed and your end-users the ability to swap from one to the other as business requirements dictate.

=====================================

We'd love to get your feedback on these new features - Tell us what you think and how you might use them in your next WinForms desktop application.
13 comment(s)
tony hasselbacher
tony hasselbacher

the compact view looks cool. but can each "row" be a different height? (ie, be sized to the contents that are in it. and if the last element is text, and the text being a different number of lines)

19 April, 2017
Mohamed Al Zayani
Mohamed Al Zayani

good stuff. i noticed that the "Status" icon is not showing in the merged column mode

19 April, 2017
Christian Peters
Christian Peters

Is the merged column grouping working against an EntityInstantFeedbackSource?

19 April, 2017
Dmitry Babich (DevExpress)
Dmitry Babich (DevExpress)

@Tony

It will be possible to provide different templates for different rows in v17.1. As for different row heights - we have plans to support this scenario in future releases.

20 April, 2017
Heiko Mueller
Heiko Mueller

"Templates for rows" - great addition. Can't wait to use it...

21 April, 2017
Bo Coaten
Bo Coaten

I agree with Mohamed that each grouped column will need its corresponding icon to display in the header.

24 April, 2017
Bhabani Shanakar Dash
Bhabani Shanakar Dash

Excellent UI. Looks awesome. Let's do a good APP..Awaiting for the update.....

Thanks Dev..

26 April, 2017
QUALCO SA
QUALCO SA

How about WPF Grid?

27 April, 2017
QUALCO SA
QUALCO SA

How about WPF Grid?

27 April, 2017
ZhuangTao Rong
ZhuangTao Rong

I find the good function in v17 that has filter input at  vs property .It's what I always wanted.I have a suggestion,if you can add the other function that is show only changed property at vs property .As we all konw, dev's component with so many properties that we can't fast to find the changed .

27 April, 2017
Adlay Almeida (AA)
Adlay Almeida (AA)

Any chance of this being ported to VCL at some point. It would be incredibly useful in our applications.

5 May, 2017
John Alexander 5
John Alexander 5

Hi, awesome new features. How can one achieve the top portion of the new compact view (with Inbox Today Filter) ?

Is that a customized tile or is there some built in header area?

10 June, 2017
Chris Royle (LOB)
Chris Royle (LOB)

The Inbox sample seems to be showing the names of real people.... is this intentional ?

25 July, 2017

Please login or register to post comments.