How to Add Columns to a DataGrid through Binding and Map Its Cell Values

• Download source code - 1.3 MB

Introduction

There are some ways on how you can dynamically bind to the columns of a DataGrid. In this article, I'll discuss a solution on how bind a collection to the DataGrid's column and display a mapped value to the cell using the row and column's binding.

Background

In my current project, I was tasked to create a datagrid that can have additional columns through binding. Thanks to Paul Stovell, I got an idea on how to implement a CustomBoundColumn. But I still have another problem, how can I get the cell value based on the Column and Row binding? Another problem is where should I bind the values of the new cells?

Normally, we can create a cell template and the binding of the row will apply to that template. But since we have a dynamic column, we should match the column's binding to the row binding in order for the data in the cell to make sense.

The main idea here is to get the Column's binding and the Row's binding then with that information, we can generate a sensible data for the cell. Then, we need a way to manage those new cell values though data binding.

Using the Code

I created a behavior for my DataGrid with the following attached properties:

• AttachedColumnsProperty - This should be bound to an ObservableCollection of ViewModels for the additional columns.
• MappedValuesProperty - This should be bound to an ObservableCollection of MappedValues. I created a MappedValue class that contains the binding source of the column header, the binding source of the view and the value that will be placed in the cell.
• HeaderTemplateProperty - The column header template.
• AttachedCellTemplateProperty - The cell template of the cell under the attached columns. This should be the template of those newly generated cells because of the attached columns.

public class AttachedColumnBehavior
{
    public static readonly DependencyProperty AttachedColumnsProperty =
            DependencyProperty.RegisterAttached("AttachedColumns",
            typeof(IEnumerable),
            typeof(AttachedColumnBehavior),
            new UIPropertyMetadata(null, OnAttachedColumnsPropertyChanged));

    public static readonly DependencyProperty MappedValuesProperty =
            DependencyProperty.RegisterAttached("MappedValues",
            typeof(MappedValueCollection),
            typeof(AttachedColumnBehavior),
            new UIPropertyMetadata(null, OnMappedValuesPropertyChanged));

    public static readonly DependencyProperty HeaderTemplateProperty =
            DependencyProperty.RegisterAttached("HeaderTemplate",
            typeof(DataTemplate),
            typeof(AttachedColumnBehavior),
            new UIPropertyMetadata(null, OnHeaderTemplatePropertyChanged));

    public static readonly DependencyProperty AttachedCellTemplateProperty =
            DependencyProperty.RegisterAttached("AttachedCellTemplate",
            typeof(DataTemplate),
            typeof(AttachedColumnBehavior),
            new UIPropertyMetadata(null, OnCellTemplatePropertyChanged));

    public static readonly DependencyProperty AttachedCellEditingTemplateProperty =
    DependencyProperty.RegisterAttached("AttachedCellEditingTemplate",
    typeof(DataTemplate),
    typeof(DataGrid),
    new UIPropertyMetadata(null, OnCellEditingTemplatePropertyChanged));

    private static void OnAttachedColumnsPropertyChanged
    (DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
    {
        var dataGrid = dependencyObject as DataGrid;
        if (dataGrid == null) return;
        var columns = e.NewValue as INotifyCollectionChanged;
        if (columns != null)
        {
            columns.CollectionChanged += (sender, args) =>
                {
                    if (args.Action == NotifyCollectionChangedAction.Remove)
                        RemoveColumns(dataGrid, args.OldItems);
                    else if(args.Action == NotifyCollectionChangedAction.Add)
                        AddColumns(dataGrid, args.NewItems);
                };
            dataGrid.Loaded += (sender, args) => AddColumns(dataGrid, GetAttachedColumns(dataGrid));
            var items = dataGrid.ItemsSource as INotifyCollectionChanged;
            if (items != null)
                items.CollectionChanged += (sender, args) =>
                    {
                        if (args.Action == NotifyCollectionChangedAction.Remove)
                            RemoveMappingByRow(dataGrid, args.NewItems);
                    };
        }
    }

    private static void AddColumns(DataGrid dataGrid, IEnumerable columns)
    {
        foreach (var column in columns)
        {
            CustomBoundColumn customBoundColumn = new CustomBoundColumn()
            {
                Header = column,
                HeaderTemplate = GetHeaderTemplate(dataGrid),
                CellTemplate = GetAttachedCellTemplate(dataGrid),
                CellEditingTemplate = GetAttachedCellEditingTemplate(dataGrid),
                MappedValueCollection = GetMappedValues(dataGrid)
            };

            dataGrid.Columns.Add(customBoundColumn);
        }
    }

    private static void RemoveColumns(DataGrid dataGrid, IEnumerable columns)
    {
        foreach (var column in columns)
        {
            DataGridColumn col = dataGrid.Columns.Where(x => x.Header == column).Single();
            GetMappedValues(dataGrid).RemoveByColumn(column);
            dataGrid.Columns.Remove(col);
        }
    }

    private static void RemoveMappingByRow(DataGrid dataGrid, IEnumerable rows)
    {
        foreach (var row in rows)
        {
            GetMappedValues(dataGrid).RemoveByRow(row);
        }
    }

    #region OnChange handlers
    private static void OnCellTemplatePropertyChanged
    (DependencyObject depObj, DependencyPropertyChangedEventArgs e)
    {

    }
    private static void OnHeaderTemplatePropertyChanged
    (DependencyObject depObj, DependencyPropertyChangedEventArgs e)
    {

    }

    private static void OnCellEditingTemplatePropertyChanged
    (DependencyObject depObj, DependencyPropertyChangedEventArgs e)
    {

    }
    private static void OnMappedValuesPropertyChanged
    (DependencyObject d, DependencyPropertyChangedEventArgs e)
    {

    }
    #endregion


    public static IEnumerable GetAttachedColumns(DependencyObject dataGrid)
    {
        return (IEnumerable)dataGrid.GetValue(AttachedColumnsProperty);
    }

    public static void SetAttachedColumns(DependencyObject dataGrid, IEnumerable value)
    {
        dataGrid.SetValue(AttachedColumnsProperty, value);
    }

    public static MappedValueCollection GetMappedValues(DependencyObject dataGrid)
    {
        return (MappedValueCollection)dataGrid.GetValue(MappedValuesProperty);
    }

    public static void SetMappedValues(DependencyObject dataGrid, MappedValueCollection value)
    {
        dataGrid.SetValue(MappedValuesProperty, value);
    }

    public static DataTemplate GetHeaderTemplate(DependencyObject dataGrid)
    {
        return (DataTemplate)dataGrid.GetValue(HeaderTemplateProperty);
    }

    public static void SetHeaderTemplate(DependencyObject dataGrid, DataTemplate value)
    {
        dataGrid.SetValue(HeaderTemplateProperty, value);
    }

    public static DataTemplate GetAttachedCellTemplate(DependencyObject dataGrid)
    {
        return (DataTemplate)dataGrid.GetValue(AttachedCellTemplateProperty);
    }

    public static void SetAttachedCellTemplate(DependencyObject dataGrid, DataTemplate value)
    {
        dataGrid.SetValue(AttachedCellTemplateProperty, value);
    }

    public static DataTemplate GetAttachedCellEditingTemplate(DependencyObject dataGrid)
    {
        return (DataTemplate)dataGrid.GetValue(AttachedCellEditingTemplateProperty);
    }

    public static void SetAttachedCellEditingTemplate(DependencyObject dataGrid, DataTemplate value)
    {
        dataGrid.SetValue(AttachedCellEditingTemplateProperty, value);
    }
}

Now here's the CustomBoundColumn, this is an extension of the DataGridTemplateColumn. Here, we will combine the binding source of the column and the row and this will be the binding of our cell template. With RowBinding and ColumnBinding, we can add MappedValue to the MappedValueCollection.

public class CustomBoundColumn : DataGridTemplateColumn//DataGridBoundColumn
{
    public DataTemplate CellTemplate { get; set; }
    public DataTemplate CellEditingTemplate { get; set; }
    public MappedValueCollection MappedValueCollection { get; set; }
  
    protected override FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
    {
        var content = new ContentControl();
        MappedValue context = MappedValueCollection.ReturnIfExistAddIfNot(cell.Column.Header, dataItem);
        var binding = new Binding() { Source = context };
        content.ContentTemplate = cell.IsEditing ? CellEditingTemplate : CellTemplate;
        content.SetBinding(ContentControl.ContentProperty, binding);          
        return content;
    }

    protected override FrameworkElement GenerateEditingElement(DataGridCell cell, object dataItem)
    {
        return GenerateElement(cell, dataItem);
    }
} 

The MappedValueCollection is just an ObservableCollection of MappedValues. I created it to easily manipulate the mapped values.

public class MappedValueCollection : ObservableCollection<MappedValue>
{
    public MappedValueCollection()
    {
    }

    public bool Exist(object ColumnBinding, object RowBinding)
    {
        return this.Count(x => x.RowBinding == RowBinding && 
        	x.ColumnBinding == ColumnBinding) > 0;
    }

    public MappedValue ReturnIfExistAddIfNot(object ColumnBinding, object RowBinding)
    {
        MappedValue value = null;

        if (Exist(ColumnBinding, RowBinding))
        {
            return this.Where(x => x.RowBinding == RowBinding && 
                                   x.ColumnBinding == ColumnBinding).Single();
        }
        else
        {
            value = new MappedValue();
            value.ColumnBinding = ColumnBinding;
            value.RowBinding = RowBinding;
            this.Add(value);
        }
        return value;
    }

    public void RemoveByColumn(object ColumnBinding)
    {
        foreach (var item in this.Where(x => x.ColumnBinding == ColumnBinding).ToList())
            this.Remove(item);
    }

    public void RemoveByRow(object RowBinding)
    {
        foreach (var item in this.Where(x => x.RowBinding == RowBinding).ToList())
            this.Remove(item);
    }
}

The MappedValue is where we bind the value of the new cells generated by newly attached columns.

public class MappedValue : ViewModelBase, IMappedValue
{
    object value;
    public object ColumnBinding { get; set; }
    public object RowBinding { get; set; }
    public object Value
    {
        get
        {
            return value;
        }
        set
        {
            if (this.value != value)
            {
                this.value = value;
                base.RaisePropertyChanged(() => Value);
            }
        }
    }
} 

In the ViewModel example, here we have three Collections, the CostingCollection which will be the ItemsSource of the DataGrid, the Suppliers which will be the additional columns to the grid and the SupplierCostValues which is the mapped value for the cells under the attached columns.

public class MainWindowViewModel : ViewModelBase
{
    ObservableCollection<CostViewModel> costingCollection;
    ObservableCollection<SupplierViewModel> suppliers;
    MappedValueCollection supplierCostValues;

    public MappedValueCollection SupplierCostValues
    {
        get { return supplierCostValues; }
        set
        {
            if (supplierCostValues != value)
            {
                supplierCostValues = value;
                base.RaisePropertyChanged(() => this.SupplierCostValues);
            }
        }
    }
    public ObservableCollection<SupplierViewModel> Suppliers
    {
        get { return suppliers; }
        set
        {
            if (suppliers != value)
            {
                suppliers = value;
                base.RaisePropertyChanged(() => this.Suppliers);
            }
        }
    }
    public ObservableCollection<CostViewModel> CostingCollection
    {
        get { return costingCollection; }
        set
        {
            if (costingCollection != value)
            {
                costingCollection = value;
                base.RaisePropertyChanged(() => this.CostingCollection);
            }
        }
    }

    public MainWindowViewModel()
    {
        SupplierCostValues = new MappedValueCollection();
        this.Suppliers = new ObservableCollection<SupplierViewModel>();
        this.CostingCollection = new ObservableCollection<CostViewModel>();

        this.Suppliers.Add(new SupplierViewModel(new Supplier() { SupplierId = 1, 
          Currency = "PHP", 
          Location = "Philippines", SupplierName = "Bench" }));
        this.Suppliers.Add(new SupplierViewModel(new Supplier() { SupplierId = 2, 
          Currency = "JPY", 
          Location = "Japan", SupplierName = "Uniqlo" }));
        this.Suppliers.Add(new SupplierViewModel(new Supplier() { SupplierId = 3, 
          Currency = "USD", 
          Location = "United States", SupplierName = "Aeropostale" }));
        this.Suppliers.Add(new SupplierViewModel(new Supplier() { SupplierId = 4, 
          Currency = "HKD", 
          Location = "Hong Kong", SupplierName = "Giordano" }));
       
        CostingCollection.Add(new CostViewModel(new Cost() 
        { CostId = 1, Name = "Service Cost" }));
        CostingCollection.Add(new CostViewModel(new Cost() 
        { CostId = 2, Name = "Items Cost" }));
        CostingCollection.Add(new CostViewModel(new Cost() 
        { CostId = 3, Name = "Shipping Cost" }));
    }

    public ICommand RemoveCommand
    {
        get
        {
            return new RelayCommand(() =>
            {
                this.Suppliers.RemoveAt(this.Suppliers.Count - 1);
            });
        }
    }
    public ICommand AddCommand
    {
        get
        {
            return new RelayCommand(() =>
            {
                this.Suppliers.Add(new SupplierViewModel(new Supplier() { SupplierId = 1, 
                  Currency = "PHP", 
                  Location = "Philippines", SupplierName = "Bench" }));
            });
        }
    }
} 

The HeaderTemplate's binding would be a SupplierViewModel, the Row's binding will be CostViewModel and the CellTemplate's binding is a MappedValue.

<Window x:Class="BindableColumn.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:BindableColumn"
        xmlns:vm="clr-namespace:BindableColumn.ViewModel"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <vm:MainWindowViewModel />
    </Window.DataContext>
    <Grid>        
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <StackPanel.Resources>
                <DataTemplate x:Key="headerTemplate">
                    <StackPanel>
                        <TextBlock Text="{Binding SupplierName}" />
                        <TextBlock Text="{Binding Currency}" />
                        <TextBlock Text="{Binding Location}" />
                    </StackPanel>
                </DataTemplate>
                <DataTemplate x:Key="cellTemplate">
                    <DataTemplate.Resources>
                        <loc:RowAndColumnMultiValueConverter x:Key="Converter"/>
                    </DataTemplate.Resources>
                    <StackPanel>
                        <TextBlock Text="{Binding Value}" />
                    </StackPanel>
                </DataTemplate>
                <DataTemplate x:Key="cellEditingTemplate">
                    <DataTemplate.Resources>
                        <loc:RowAndColumnMultiValueConverter x:Key="Converter" />
                    </DataTemplate.Resources>
                    <StackPanel>
                        <TextBox Text="{Binding Value}"/>
                    </StackPanel>
                </DataTemplate>
            </StackPanel.Resources>
            <DataGrid ItemsSource="{Binding CostingCollection}" x:Name="myGrid" 
                      loc:AttachedColumnBehavior.HeaderTemplate="{StaticResource headerTemplate}"
                      loc:AttachedColumnBehavior.AttachedCellTemplate="{StaticResource cellTemplate}"
                      loc:AttachedColumnBehavior.AttachedColumns="{Binding Suppliers}"
                      loc:AttachedColumnBehavior.AttachedCellEditingTemplate=
                      	"{StaticResource cellEditingTemplate}"
                      loc:AttachedColumnBehavior.MappedValues="{Binding SupplierCostValues}"
                      AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="CostId" Binding="{Binding CostId}"/>
                    <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
                </DataGrid.Columns>
            </DataGrid>
            <Button Content="Add Column" Command="{Binding AddCommand}"/>
            <Button Content="Remove Lastcolumn" Command="{Binding RemoveCommand}" />
        </StackPanel>
    </Grid>
</Window> 

Conclusion

Using the AttachedColumns property, we can bind an observable collection, then collection changes (add/remove) will reflect to the UI. We can now add/remove a column without having to mess up with the code behind. Aside from binding to the AttachedColumns, we can always add columns via the XAML, that makes it more flexible to use.

Allowing dynamic columns gives more complexity since there will be some new cells because of the attached columns. Using the MappedValueCollection, we can play around with the values of the newly generated cells with reference to the Row and Column of the cell. Again, no code behind involved, it can be done in the ViewModel.

Practically, this is my way of implementing a dynamic DataGrid columns using the MVVM pattern. I hope this solution helps in your development.

Further Improvement

In this solution, I only used one type of view model for all the attached columns. I think we can use different type of viewmodels for each attached column by utilizing the HeaderTemplateSelector.

References

• http://paulstovell.com/blog/dynamic-datagrid