How to: Bind the Grid to Bands Specified in ViewModel

• Dec 03, 2023
• 7 minutes to read

This topic describes how to define bands in a View Model and display them in the GridControl.

View Example: How to Bind the GridControl to a Collection of Bands Specified in a ViewModel

Assign ViewModel Bands to the GridControl

The following example demonstrates how to display employee information from the data model in the GridControl.

1. Create classes that describe a grid band and its child column:

   C#

   public class Band : BindableBase {
       public Band(string header, ObservableCollection<Column> childcolumns) {
           Header = header;
           ChildColumns = childcolumns;
       }
       public string Header { get; }
       public ObservableCollection<Column> ChildColumns { get; }
   }
   
   public class Column : BindableBase {
       public Column(string fieldname) {
           FieldName = fieldname;
       }
       public string FieldName { get; }
   }
   

   VB.NET

   Public Class Band
       Inherits BindableBase
   
       Public Sub New(ByVal header As String, ByVal childcolumns As ObservableCollection(Of Column))
           Header = header
           ChildColumns = childcolumns
       End Sub
   
       Public ReadOnly Property Header As String
       Public ReadOnly Property ChildColumns As ObservableCollection(Of Column)
   End Class
   
   Public Class Column
       Inherits BindableBase
   
       Public Sub New(ByVal fieldname As String)
           FieldName = fieldname
       End Sub
   
       Public ReadOnly Property FieldName As String
   End Class
   

2. Specify a collection of bands in the ViewModel:

   C#

   public class ViewModel : ViewModelBase {
       public ViewModel() {
           // ...
           Bands = new ObservableCollection<Band>() {
               new Band(
                   "Personal Info",
                   new ObservableCollection<Column>() {
                       new Column(nameof(Employee.FirstName)),
                       new Column(nameof(Employee.LastName)),
                       new Column(nameof(Employee.BirthDate))
                   }
               ),
               new Band(
                   "Location",
                   new ObservableCollection<Column>() {
                       new Column(nameof(Employee.Country)),
                       new Column(nameof(Employee.City))
                   }
               )
           };
       }
       // ...
       public ObservableCollection<Band> Bands { get; }
   }
   

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           ' ...
           Bands = New ObservableCollection(Of Band)() From {
               New Band("Personal Info", New ObservableCollection(Of Column)() From {
                   New Column(NameOf(Employee.FirstName)),
                   New Column(NameOf(Employee.LastName)),
                   New Column(NameOf(Employee.BirthDate))
               }),
               New Band("Location", New ObservableCollection(Of Column)() From {
                   New Column(NameOf(Employee.Country)),
                   New Column(NameOf(Employee.City))
               })
           }
       End Sub
   
       ' ...
       Public ReadOnly Property Bands As ObservableCollection(Of Band)
   End Class
   

   If you want the GridControl to reflect changes made in the Bands collection, this collection should implement the INotifyCollectionChanged interface.

3. Add the column and band templates to your project. The GridControl generates bands and their child columns based on these templates.

   Use the DependencyObjectExtensions.DataContext attached property when you bind the GridControl to band and column properties. This attached property synchronizes data updates of bound properties to enhance grid performance:

   XAML

   <Window.Resources>
       <DataTemplate x:Key="ColumnTemplate">
           <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}" />
       </DataTemplate>
       <DataTemplate x:Key="MultiColumnBandTemplate">
           <dxg:GridControlBand Header="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Header, RelativeSource={RelativeSource Self}}" 
                                ColumnsSource="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ChildColumns, RelativeSource={RelativeSource Self}}" 
                                ColumnGeneratorTemplate="{StaticResource ColumnTemplate}" />
       </DataTemplate>
   </Window.Resources>
   

   In WPF, you cannot use bindings to define the element’s Name property. Instead, use the DevExpress.Xpf.Core.XamlHelper.Name property to pass the name specified in a View Model to the element’s Name property.

   This property can be useful if you want to save and restore the band’s layout properties.

   XAML

   <DataTemplate x:Key="BandTemplate">
       <dxg:GridControlBand ...
           dx:XamlHelper.Name="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).UniqueName, RelativeSource={RelativeSource Self}}"/>
   </DataTemplate>
   

4. Assign the band collection to the DataControlBase.BandsSource property. Set the DataControlBase.BandGeneratorTemplate property to a template that generates bands:

   XAML

   <dxg:GridControl ...
                    BandsSource="{Binding Bands}" 
                    BandGeneratorTemplate="{StaticResource MultiColumnBandTemplate}" />
   

Add a Single Column Band

Follow the steps below to add a band template. In this example, the SingleColumnBandTemplate adds a band with only one child column. This column’s header overlays the parent band’s header:

1. Add a band with a single child column to the Bands collection:

   C#

   public class ViewModel : ViewModelBase {
       public ViewModel() {
           // ...
           Bands = new ObservableCollection<Band>() {
               new Band(
                   // ...
               ),
               new Band(
                   // ...
               ),
               new Band(
                   "Position",
                   new ObservableCollection<Column>() {
                       new Column(nameof(Employee.JobTitle))
                   }
               )
           };
       }
       // ...
       public ObservableCollection<Band> Bands { get; }
   }
   

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
       ' ...
           Bands = New ObservableCollection(Of Band)() From {
               New Band(
                   ' ...
               ),
               New Band(
                   ' ...
               ),
               New Band(
                   "Position", 
                   New ObservableCollection(Of Column)() From {
                       New Column(NameOf(Employee.JobTitle))
                   }
               )
           }
       End Sub
   
       ' ...
       Public ReadOnly Property Bands As ObservableCollection(Of Band)
   End Class
   

2. Create a template that generates bands for individual columns. Set the BandBase.OverlayHeaderByChildren property to true to display the child column’s header over the band’s header:

   XAML

   <Window.Resources>
       <DataTemplate x:Key="SingleColumnBandTemplate">
           <dxg:GridControlBand ColumnsSource="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ChildColumns, RelativeSource={RelativeSource Self}}" 
                                ColumnGeneratorTemplate="{StaticResource ColumnTemplate}" 
                                OverlayHeaderByChildren="True" />
       </DataTemplate>
   </Window.Resources>
   

Add a Template Selector to Choose among Multiple Templates

Your application now contains the MultiColumnBandTemplate and SingleColumnBandTemplate. To choose a template based on the band type, create a template selector and assign it to the DataControlBase.BandGeneratorTemplateSelector property:

C#

public class BandTemplateSelector : DataTemplateSelector {

    public DataTemplate SingleColumnBandTemplate { get; set; }
    public DataTemplate MultiColumnBandTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container) {
        Band band = item as Band;
        if(band == null) return null;
        if(band.Header == "Position") {
            return SingleColumnBandTemplate;
        }
        return MultiColumnBandTemplate;
    }
}

VB.NET

Public Class BandTemplateSelector
    Inherits DataTemplateSelector

    Public Property SingleColumnBandTemplate As DataTemplate
    Public Property MultiColumnBandTemplate As DataTemplate

    Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
        Dim band As Band = TryCast(item, Band)
        If band Is Nothing Then Return Nothing

        If band.Header = "Position" Then
            Return SingleColumnBandTemplate
        End If

        Return MultiColumnBandTemplate
    End Function
End Class

XAML

<Window.Resources>
    <!-- ... -->
    <local:BandTemplateSelector x:Key="BandTemplateSelector" 
                                MultiColumnBandTemplate="{StaticResource MultiColumnBandTemplate}" 
                                SingleColumnBandTemplate="{StaticResource SingleColumnBandTemplate}"/>
</Window.Resources>
<dxg:GridControl ...
                 BandsSource="{Binding Bands}" 
                 BandGeneratorTemplateSelector="{StaticResource BandTemplateSelector}"/>

Add a Multilevel Band Structure

If you want to display child bands in the GridControl, follow the steps below:

1. Add a property that returns a collection of child bands to the Band class:

   C#

   public class Band : BindableBase {
       public Band(string header, ObservableCollection<Column> childcolumns, ObservableCollection<Band> childbands) {
           Header = header;
           ChildColumns = childcolumns;
           ChildBands = childbands;
       }
       public string Header { get; }
       public ObservableCollection<Column> ChildColumns { get; }
       public ObservableCollection<Band> ChildBands { get; }
   }
   

   VB.NET

   Public Class Band
       Inherits BindableBase
   
       Public Sub New(ByVal header As String, ByVal childcolumns As ObservableCollection(Of Column), ByVal childbands As ObservableCollection(Of Band))
           Header = header
           ChildColumns = childcolumns
           ChildBands = childbands
       End Sub
   
       Public ReadOnly Property Header As String
       Public ReadOnly Property ChildColumns As ObservableCollection(Of Column)
       Public ReadOnly Property ChildBands As ObservableCollection(Of Band)
   End Class
   

2. Specify the Bands collection:

   C#

   public class ViewModel : ViewModelBase {
       public ViewModel() {
           // ...
           Bands = new ObservableCollection<Band>() {
               new Band(
                   "Personal Info",
                   new ObservableCollection<Column>(),
                   new ObservableCollection<Band>() {
                       new Band (
                           "Name",
                           new ObservableCollection<Column>() {
                               new Column(nameof(Employee.FirstName)),
                               new Column(nameof(Employee.LastName))
                           },
                           new ObservableCollection<Band>()
                       ),
                       new Band (
                           "Birthday",
                           new ObservableCollection<Column>() {
                               new Column(nameof(Employee.BirthDate))
                           },
                           new ObservableCollection<Band>()
                       )
                   }
               ),
               new Band(
                   "Location",
                   new ObservableCollection<Column>() {
                       new Column(nameof(Employee.Country)),
                       new Column(nameof(Employee.City))
                   },
                   new ObservableCollection<Band>()
               ),
               new Band(
                   "Position",
                   new ObservableCollection<Column>() {
                       new Column(nameof(Employee.JobTitle))
                   },
                   new ObservableCollection<Band>()
               )
           };
       }
       // ...
       public ObservableCollection<Band> Bands { get; }
   }
   

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           ' ...
           Bands = New ObservableCollection(Of Band)() From {
               New Band(
                   "Personal Info", 
                   New ObservableCollection(Of Column)(), 
                   New ObservableCollection(Of Band)() From {
                       New Band(
                           "Name", 
                           New ObservableCollection(Of Column)() From {
                               New Column(NameOf(Employee.FirstName)),
                               New Column(NameOf(Employee.LastName))
                           }, 
                           New ObservableCollection(Of Band)()
                       ),
                       New Band(
                           "Birthday", 
                           New ObservableCollection(Of Column)() From {
                               New Column(NameOf(Employee.BirthDate))
                           }, 
                           New ObservableCollection(Of Band)()
                       )
                   }
               ),
               New Band(
                   "Location", 
                   New ObservableCollection(Of Column)() From {
                       New Column(NameOf(Employee.Country)),
                       New Column(NameOf(Employee.City))
                   }, 
                   New ObservableCollection(Of Band)()
               ),
               New Band(
                   "Position",
                   New ObservableCollection(Of Column)() From {
                       New Column(NameOf(Employee.JobTitle))
                   },
                   New ObservableCollection(Of Band)()
               )
           }
       End Sub
   
       ' ...
       Public ReadOnly Property Bands As ObservableCollection(Of Band)
   End Class
   

3. Create a template that generates child bands:

   XAML

   <Window.Resources>
       <DataTemplate x:Key="ChildBandTemplate">
           <dxg:GridControlBand Header="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Header, RelativeSource={RelativeSource Self}}"  
                                ColumnsSource="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ChildColumns, RelativeSource={RelativeSource Self}}"  
                                ColumnGeneratorTemplate="{StaticResource ColumnTemplate}"/>
       </DataTemplate>
   </Window.Resources>
   

4. Modify the MultiColumnBandTemplate. Specify the BandBase.BandsSource property and assign the child band template to the BandBase.BandGeneratorTemplate property:

   XAML

   <Window.Resources>
       <DataTemplate x:Key="MultiColumnBandTemplate">
           <dxg:GridControlBand Header="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Header, RelativeSource={RelativeSource Self}}" 
                                ColumnsSource="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ChildColumns, RelativeSource={RelativeSource Self}}" 
                                ColumnGeneratorTemplate="{StaticResource ColumnTemplate}"
                                BandsSource="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).ChildBands, RelativeSource={RelativeSource Self}}"
                                BandGeneratorTemplate="{StaticResource ChildBandTemplate}"/>
       </DataTemplate>
   </Window.Resources>