Binding to a Collection of Columns

• May 22, 2020
• 5 minutes to read

When engineering a Silverlight application using the Model View ViewModel (MVVM) architectural pattern, you may be required to describe columns in a Model or ViewModel. In earlier versions (prior to v2011 vol 1), this could have been done via the DataAnnotations attributes. In that instance, the grid automatically generates columns for all fields in a data source, and the only way to customize column settings was to handle the DataControlBase.ColumnsPopulated event.

Since the release of v2011 vol 1, the DevExpress Silverlight Grid Control supports column binding. The grid can be bound to a collection of objects containing column settings, described in a Model or ViewModel, thus minimizing the need for 'code-behind'.

View Model Implementation

Assume an Employee view model. It includes the following classes.

• Employee - a data object that contains employee information (e.g., first and last names, job title, etc.).
• ViewModel - the employee view model.
• EmployeeData - supplies employee information to be displayed within the grid control.
• Column - describes a grid column. This class provides properties that correspond to settings common to all types of grid columns.
• ComboBoxColumn - corresponds to a grid column with the ComboBoxEdit in-place editor. This class provides the Source property, which contains the list of combo box items (in this example, these are cities).
• SettingsType - enumerates possible types of in-place editors used to edit cell values.

C#

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace Model {
    public class ViewModel {
        public List<string> Cities { get; private set; }
        // Returns a list of employees so that they can be bound to the grid control.
        public List<Employee> Source { get; private set; }
        // The collection of grid columns.
        public ObservableCollection<Column> Columns { get; private set; }
        public ViewModel() {
            Source = EmployeeData.DataSource;
            List<string> _cities = new List<string>();
            foreach (Employee employee in Source) {
                if (!_cities.Contains(employee.City))
                    _cities.Add(employee.City);
            }
            Cities = _cities;
            Columns = new ObservableCollection<Column>() {
                new Column() { FieldName = "FirstName", Settings = SettingsType.Default },
                new Column() { FieldName = "LastName", Settings = SettingsType.Default },
                new Column() { FieldName = "JobTitle", Settings = SettingsType.Default },
                new Column() { FieldName = "BirthDate", Settings = SettingsType.Default },
                new ComboColumn() { FieldName = "City", Settings = SettingsType.Combo, Source = Cities }
            };
        }
    }
    // The data item.
    public class Employee {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string JobTitle { get; set; }
        public string City { get; set; }
        public DateTime BirthDate { get; set; }
    }
    public class EmployeeData : List<Employee> {
        public static List<Employee> DataSource {
            get {
                List<Employee> list = new List<Employee>();
                list.Add(new Employee() {
                    FirstName = "Nathan",
                    LastName = "White",
                    City = "NY",
                    JobTitle = "Sales Manager",
                    BirthDate = new DateTime(1970, 1, 10)  });
                return list;
            }
        }
    }
    public class Column {
        // Specifies the name of a data source field to which the column is bound.
        public string FieldName { get; set; }
        // Specifies the type of an in-place editor used to edit column values.
        public SettingsType Settings { get; set; }
    }
    // Corresponds to a column with the combo box in-place editor.
    public class ComboColumn : Column {
        // The source of combo box items.
        public IList Source { get; set; }
    }
    public enum SettingsType { Default, Combo }
}

NOTE

If the Columns collection is changed after it has been assigned to the grid control, it should implement INotifyCollectionChanged, so that changes made within a View Model are automatically reflected by the grid.

Column Templates and Selector

The Grid Control generates columns based on column templates. Create multiple templates, one template for each column type. Using a single template, you can create an unlimited number of columns in unlimited number of grid controls. In this example, there are two column templates: DefaultColumnTemplate and ComboColumnTemplate.

To choose the required template based on the column's type, use the Template Selector. In this example, the template selector is represented by the ColumnTemplateSelector class.

NOTE

The DataTemplateSelector class is included in our DevExpress.Xpf.Core library and is widely used in DevExpress cross-platform controls.

XAML

<UserControl 
        x:Class="SLGridMVVMBindableColumns.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
        xmlns:model="clr-namespace:Model"
        xmlns:view="clr-namespace:View">
    <UserControl.DataContext>
        <model:ViewModel/>
    </UserControl.DataContext>
    <UserControl.Resources>
        <view:ColumnTemplateSelector x:Key="ColumnTemplateSelector"/>
        <DataTemplate x:Key="DefaultColumnTemplate">
            <ContentControl>
                <dxg:GridColumn FieldName="{Binding FieldName}"/>
            </ContentControl>
        </DataTemplate>
        <DataTemplate x:Key="ComboColumnTemplate">
            <ContentControl>
                <dxg:GridColumn FieldName="{Binding FieldName}">
                    <dxg:GridColumn.EditSettings>
                        <dxe:ComboBoxEditSettings ItemsSource="{Binding Source}"/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
            </ContentControl>
        </DataTemplate>
    </UserControl.Resources>
    <Grid/>
</UserControl>

C#

using System.Windows;
using System.Windows.Controls;
using Model;
using DevExpress.Xpf.Core.Native;

namespace View {
    public class ColumnTemplateSelector : DataTemplateSelector {
        public override DataTemplate SelectTemplate(object item, DependencyObject container) {
            Column column = (Column)item;
            return (DataTemplate)LayoutHelper.FindParentObject(container).Resources[column.Settings + "ColumnTemplate"];
        }
    }
}

NOTE

If all grid columns can be described using a single template, you have no need to create a column template selector. Instead, assign this template to the grid's DataControlBase.ColumnGeneratorTemplate property.

NOTE

You can create a style to specify settings common to all columns generated using different templates. In Silverlight 5, you can specify bindings to ViewModel properties within a style (see FieldName below).

XAML

<UserControl.Resources>
    <Style x:Key="ColumnStyle" TargetType="dxg:GridColumn">
        <Setter Property="FilterPopupMode" Value="CheckedList"/>
        <Setter Property="FieldName" Value="{Binding FieldName}"/>
    </Style>
</UserControl.Resources>

This style should be assigned to the DataControlBase.ColumnGeneratorStyle property.

Customizing the Silverlight DXGrid

Finally, specify the grid's DataControlBase.ItemsSource, DataControlBase.ColumnsSource and DataControlBase.ColumnGeneratorTemplateSelector. The DataControlBase.ItemsSource property specifies the grid's data source. The DataControlBase.ColumnsSource property specifies the source from which the grid generates columns. The DataControlBase.ColumnGeneratorTemplateSelector property specifies the column template selector, which returns a template for each column based on its type.

XAML

<Grid>
        <dxg:GridControl ItemsSource="{Binding Source}" x:Name="grid" 
                         ColumnsSource="{Binding Columns}"
                         ColumnGeneratorTemplateSelector="{StaticResource ColumnTemplateSelector}"
                         ColumnGeneratorStyle="{StaticResource ColumnStyle}">
            <dxg:GridControl.View>
                <dxg:TableView x:Name="view" NavigationStyle="Cell" AutoWidth="True"
                               AllowPerPixelScrolling="True"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>