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

21 September 2011

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.

5 comment(s)
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?

22 September, 2011
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.

22 September, 2011
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)

3 October, 2011
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

27 January, 2012
Matthew Parkinson

Hello,

Has this feature been added?

Thanks

19 April, 2013

Please login or register to post comments.