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.

Create classes that describe a grid band and its child column:
Specify a collection of bands in the ViewModel:
Add the column and band templates to your project. The GridControl generates bands and their child columns based on these templates.
Assign the band collection to the DataControlBase.BandsSource property. Set the DataControlBase.BandGeneratorTemplate property to a template that generates bands:

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:

Add a band with a single child column to the Bands collection:
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:

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#
VB.NET

csharp

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;
    }
}

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

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:

Add a property that returns a collection of child bands to the Band class:
Specify the Bands collection:
Create a template that generates child bands:
Modify the MultiColumnBandTemplate. Specify the BandBase.BandsSource property and assign the child band template to the BandBase.BandGeneratorTemplate property: