How to: Bind the Grid to a Collection of Columns

• Aug 29, 2022
• 5 minutes to read

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

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

Assign ViewModel Columns to the GridControl

This scenario demonstrates how to display information from an employee data model in the GridControl.

1. Create a class that describes a grid column:

   C#

   public class Column : BindableBase {
       public Column(string fieldname) {
           FieldName = fieldname;
       }
       public string FieldName { get; }
   }
   

   VB.NET

   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 columns in the ViewModel:

   C#

   public class ViewModel : ViewModelBase {
       public ViewModel() {
           // ...
           Columns = new ObservableCollection<Column>() {
               new Column(nameof(Employee.FirstName)),
               new Column(nameof(Employee.LastName)),
               new Column(nameof(Employee.StateProvinceName))
           };
       }
       // ...
       public ObservableCollection<Column> Columns { get; }
   }
   

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           '' ...
           Columns = New ObservableCollection(Of Column)() From {
               New Column(NameOf(Employee.FirstName)),
               New Column(NameOf(Employee.LastName)),
               New Column(NameOf(Employee.StateProvinceName))
           }
       End Sub
       '' ...
       Public ReadOnly Property Columns() As ObservableCollection(Of Column)
   End Class
   

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

3. The GridControl generates columns based on column templates. Add a default column template.

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

   XAML

   <Window.Resources>
       <DataTemplate x:Key="DefaultColumnTemplate">
           <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"/>
       </DataTemplate>
   </Window.Resources>
   

4. Assign the column collection to the DataControlBase.ColumnsSource property. Set the DataControlBase.ColumnGeneratorTemplate property to a template that generates columns:

   XAML

   <dxg:GridControl ...
                    ColumnsSource="{Binding Columns}" 
                    ColumnGeneratorTemplate="{StaticResource DefaultColumnTemplate}"/>
   

Add a Lookup Column

If you want to specify extra column types (for example, to display a list of states in a column’s combo box), follow the steps below:

1. Add an enumeration that lists column types:

   C#

   public enum SettingsType { Default, Lookup }
   

   VB.NET

   Public Enum SettingsType
       [Default]
       Lookup
   End Enum
   

2. Create a class that describes a lookup column:

   C#

   public class Column : BindableBase {
       public Column(SettingsType settings, string fieldname) {
           Settings = settings;
           FieldName = fieldname;
       }
       public SettingsType Settings { get; }
       public string FieldName { get; }
   }
   
   public class LookupColumn : Column {
       public LookupColumn(SettingsType settings, string fieldname, IList source): base(settings, fieldname) {
           Source = source;
       }
       public IList Source { get; }
   }
   

   VB.NET

   Public Class Column
       Inherits BindableBase
   
       Public Sub New(ByVal settings As SettingsType, ByVal fieldname As String)
           Settings = settings
           FieldName = fieldname
       End Sub
   
       Public ReadOnly Property Settings As SettingsType
       Public ReadOnly Property FieldName As String
   End Class
   
   Public Class LookupColumn
       Inherits Column
   
       Public Sub New(ByVal settings As SettingsType, ByVal fieldname As String, ByVal source As IList)
           MyBase.New(settings, fieldname)
           Source = source
       End Sub
   
       Public ReadOnly Property Source As IList
   End Class
   

3. Add a lookup column to the ViewModel’s Columns collection and specify the lookup’s data source:

   C#

   public class ViewModel : ViewModelBase {
       public ViewModel() {
           // ...
           States = Source.Select(x => x.StateProvinceName).Distinct().ToList();
           Columns = new ObservableCollection<Column>() {
               new Column(SettingsType.Default, nameof(Employee.FirstName)),
               new Column(SettingsType.Default, nameof(Employee.LastName)),
               new LookupColumn(SettingsType.Lookup, nameof(Employee.StateProvinceName), States)
           };
       }
       // ...
       public ObservableCollection<Column> Columns { get; }
       public List<string> States { get; }
   }
   

   VB.NET

   Public Class ViewModel
       Inherits ViewModelBase
   
       Public Sub New()
           '' ...
           States = Source.Select(Function(x) x.StateProvinceName).Distinct().ToList()
           Columns = New ObservableCollection(Of Column)() From {
               New Column(SettingsType.Default, NameOf(Employee.FirstName)),
               New Column(SettingsType.Default, NameOf(Employee.LastName)),
               New LookupColumn(SettingsType.Lookup, NameOf(Employee.StateProvinceName), States)
           }
       End Sub
       '' ...
       Public ReadOnly Property Columns() As ObservableCollection(Of Column)
       Public ReadOnly Property States() As List(Of String)
   End Class
   

4. Create a template that generates lookup columns:

   XAML

   <DataTemplate x:Key="LookupColumnTemplate">
       <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}">
           <dxg:GridColumn.EditSettings>
               <dxe:ComboBoxEditSettings ItemsSource="{Binding Source}"/>
           </dxg:GridColumn.EditSettings>
       </dxg:GridColumn>
   </DataTemplate>
   

Add a Template Selector to Choose among Multiple Templates

Your application now contains the DefaultColumnTemplate and LookupColumnTemplate. To choose a template based on the column type, create a template selector and assign it to the DataControlBase.ColumnGeneratorTemplateSelector property:

C#

using System.Windows;
using System.Windows.Controls;

namespace ColumnsSample {
    public class ColumnTemplateSelector : DataTemplateSelector {
        public DataTemplate DefaultColumnTemplate { get; set; }
        public DataTemplate LookupColumnTemplate { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container) {
            Column column = item as Column;
            if(column == null) return null;
            switch(column.Settings) {
                case SettingsType.Default:
                    return DefaultColumnTemplate;
                case SettingsType.Lookup:
                    return LookupColumnTemplate;
            }
            return null;
        }
    }
}

VB.NET

Imports System.Windows
Imports System.Windows.Controls

Namespace ColumnsSample
    Public Class ColumnTemplateSelector
        Inherits DataTemplateSelector

        Public Property DefaultColumnTemplate() As DataTemplate
        Public Property LookupColumnTemplate() As DataTemplate

        Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
            Dim column As Column = TryCast(item, Column)
            If column Is Nothing Then
                Return Nothing
            End If
            Select Case column.Settings
                Case SettingsType.Default
                    Return DefaultColumnTemplate
                Case SettingsType.Lookup
                    Return LookupColumnTemplate
            End Select
            Return Nothing
        End Function
    End Class
End Namespace

XAML

<Window.Resources>
    <!-- ... -->
    <local:ColumnTemplateSelector x:Key="ColumnTemplateSelector"
                                  DefaultColumnTemplate ="{StaticResource DefaultColumnTemplate}"
                                  LookupColumnTemplate ="{StaticResource LookupColumnTemplate}"/>
</Window.Resources>
<dxg:GridControl ItemsSource="{Binding Source}" 
                 ColumnsSource="{Binding Columns}"
                 ColumnGeneratorTemplateSelector="{StaticResource ColumnTemplateSelector}"/>

Specify Column Settings

You can use the DataControlBase.ColumnGeneratorStyle property to create a style that specifies column settings. The GridControl applies these settings to all columns generated from templates:

XAML

<dxg:GridControl.ColumnGeneratorStyle>
    <Style TargetType="dxg:GridColumn">
        <Setter Property="FilterPopupMode" Value="CheckedList" />
        <Setter Property="Width" Value="Auto" />
        <Setter Property="ReadOnly" Value="True" />
        <Setter Property="HorizontalHeaderContentAlignment" Value="Center" />
        <Setter Property="HeaderStyle">
            <Setter.Value>
                <Style TargetType="dxg:BaseGridHeader">
                    <Setter Property="FontWeight" Value="SemiBold" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</dxg:GridControl.ColumnGeneratorStyle>

You can also use multiple data annotation attributes to define validation rules and format options:

C#

public class Employee {
    [ReadOnly(true)]
    public string FirstName { get; set; }
    [MinLength(3)]
    public string LastName { get; set; }
    public string StateProvinceName { get; set; }
}

VB.NET

Public Class Employee
    <[ReadOnly](True)>
    Public Property FirstName As String
    <MinLength(3)>
    Public Property LastName As String
    Public Property StateProvinceName As String
End Class