Blogs

Thinking Out Loud

WPF and Silverlight Grid Control - Advanced Banded View Layout (a cool workaround)

In the next minor release of DXperience (11.1.8), we will be extending the capabilities of our WPF and Silverlight Data Grid with a cool "workaround" to generate Banded View Layouts - allowing you to arrange column headers and corresponding data cells across multiple rows. This new view also allows you to create cells that occupy multiple rows. Gotta love pictures and as such, here are two that illustrate what an Advanced Banded View looks like:

WPF Silverlight Grid Banded View 

WPF Silverlight Grid Banded View 

To generate these banded columns for the DXGrid (WPF and Silverlight), our engineers created a special attached behavior for the DXGrid TableView - BandedViewBehavior.

This class contains two properties that describe the column header's layout: ColumnDefinitions and RowDefinitions (just like the standard Grid panel).
The ColumnDefinitions property is a collection of ColumnDefinition elements that defines the horizontal layout of column headers.
You can customize each ColumnDefinition by setting its properties: Width(GridLength), MinWidth(double). This property works much like the standard Grid panel.
You can also customize vertical column layout by modifying the view’s RowDefinitions collection.
To indicate the position of a grid column, specify the attached properties:  BandedViewBehavior.Column, BandedViewBehavior.Row, BandedViewBehavior.ColumnSpan, BandedViewBehavior.RowSpan
You can also declare a special column for grouping by setting the BandedViewBehavior.IsBand attached property. Cells will not be created for this column and its header will be bold.

With this approach you can create both groups of columns and rows (In general, you can create any layout)..
Additionally, BandedViewBehavior supports all associated features of the DXGrid you've come to expect: resizing columns, column grouping, navigation, editing, etc.
 
  
Let's look at a simple example:
1. Define a simple layout: two columns and two rows.
 

         <dxg:GridControl.View> 
             <dxg:TableView> 
                 <i:Interaction.Behaviors> 
                     <dxgext:BandedViewBehavior> 
                         <dxgext:BandedViewBehavior.ColumnDefinitions> 
                             <dxgext:ColumnDefinition Width="*"/> 
                             <dxgext:ColumnDefinition Width="*"/> 
                         </dxgext:BandedViewBehavior.ColumnDefinitions> 
                         <dxgext:BandedViewBehavior.RowDefinitions> 
                             <dxgext:RowDefinition Height="Auto"/> 
                             <dxgext:RowDefinition Height="Auto"/> 
                         </dxgext:BandedViewBehavior.RowDefinitions> 
                         <dxgext:BandedViewBehavior.TemplatesContainer> 
                             <dxgext:TemplatesContainer/> 
                         </dxgext:BandedViewBehavior.TemplatesContainer> 
                     </dxgext:BandedViewBehavior> 
                 </i:Interaction.Behaviors> 
             </dxg:TableView> 
         </dxg:GridControl.View>
 

 
2. Define three grid columns: one that will be common, two columns will be inside the common column.
 
         <dxg:GridControl.Columns> 
             <dxg:GridColumn FieldName="Common" dxgext:BandedViewBehavior.ColumnSpan="2" dxgext:BandedViewBehavior.IsBand="True"/> 
             <dxg:GridColumn FieldName="First" dxgext:BandedViewBehavior.Row="1"/> 
             <dxg:GridColumn FieldName="Second" dxgext:BandedViewBehavior.Row="1" dxgext:BandedViewBehavior.Column="1"/> 
         </dxg:GridControl.Columns>
 

 
You'll see that we used the same logic as that in the standard grid. 
 
The Result:

Silverlight WPF Grid Banded View
  
 
We are looking forward to providing an even more advanced LayoutView in the future with the ability to customize rows/header layouts at runtime as well as on the design surface. 
 
This approach will be presented as an example in our code central for v2011 vol 1. In the next major release, we will provide a special Extensions Library that contains this killer new feature.

Published Sep 21 2011, 03:26 AM by Ray Navasarkian (DevExpress)
Bookmark and Share

Comments

Holger Persch [DX-Squad]

That's great, but as far as I understand it's not possible to create and arrange bands a runtime. Due to this limitation it's still urgent to have the fully functional banded grid view (www.devexpress.com/.../S31327.aspx) available. Is there an estimation when we can expect this to be released?

September 22, 2011 1:52 AM

Marina (DevExpress Support)

Holger, thank you for your interest in this feature! A limitation of the current solution is that the drag-and-drop functionality is not available for columns and that it is impossible to create bands at runtime.Resizing is supported. We plan to overcome this limitations within  suggestion ID S31327. We will not implement this suggestion in the v11.2 version, but we will do our best to support this feature in the next version. Right now the exact date is not assigned.

September 22, 2011 5:18 AM

Wilbert Vink

This looks promising. I have installed 11.1.8. But I'm unable to get this running. I found no Code Central example either. Did it make it into 11.1.8 (as shown in the very first line in this blog)

October 3, 2011 9:12 AM

Amitha Acharya

Hi,

Can you list down what are the limitations here.

Here are a few i have picked up from ur site.

a) It is impossible to implement frozen columns with a fixed size. All columns are resized proportionally when the grid’s size is changed.

b) The column horizontal scrolling is not supported. All columns are stretched within the grid (The ColumnAutoWidth feature is always enabled).

c) It is impossible to change column positions relative to each other.

d) The AutoFilterRow feature is not compatible with this solution.

f) It is impossible to add a new row using the NewItemRow feature.

Does it support printing?

Can i load columns at runtime?I mean ,can i create columns in code behind and then apply it on this grid?

Thanks

January 27, 2012 2:46 AM

Matthew Parkinson

Hello,

Has this feature been added?

Thanks

April 19, 2013 10:57 AM
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Your Privacy - Legal Statements

Copyright © 1998-2013 Developer Express Inc.
ALL RIGHTS RESERVED
All trademarks or registered trademarks
are property of their respective owners