How to: Bind a Grid to an ICollectionView

• Jun 07, 2019
• 4 minutes to read

The example below shows how to bind DXGrid to ICollectionView.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-synchronize-the-dxgrid-with-the-icollectionview-collectionviewsource-e2209.

MainWindow.xaml.cs

using System.Windows;

namespace CollectionViewSupport {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
}

ViewModel.cs

using System;
using System.Collections.Generic;
using System.Windows.Data;
using System.ComponentModel;

namespace CollectionViewSupport {
    public class ViewModel {
        ICollectionView data;
        public ICollectionView Data {
            get {
                if (data == null) {
                    List<TestData> list = new List<TestData>();
                    for (int i = 0; i < 100; i++) {
                        list.Add(new TestData() { Number1 = i, Number2 = i * 10, Text1 = "row " + i, Text2 = "ROW " + i });
                    }
                    data = new ListCollectionView(list);
                }
                return data;
            }
        }
        List<FilterItem> filters;
        public List<FilterItem> Filters {
            get {
                if (filters == null) {
                    filters = new List<FilterItem>();

                    FilterItem f1=new FilterItem();
                    f1.Caption="All items";

                    filters.Add(f1);

                    FilterItem f2 = new FilterItem();
                    f2.Caption = "Even items";
                    f2.Filter = EvenMethod;
                    filters.Add(f2);

                    FilterItem f3 = new FilterItem();
                    f3.Caption = "Odd items";
                    f3.Filter = OddMethod;
                    filters.Add(f3);
                }
                return filters;
            }
        }

        private bool EvenMethod(object item) {
            return ((TestData)item).Number1 % 2 == 0;
        }
        private bool OddMethod(object item) {
            return ((TestData)item).Number1 % 2 == 1;
        }
    }
    public class FilterItem {
        public string Caption { get; set; }
        public Predicate<object> Filter { get; set; }
    }
    public class TestData {
        public int Number1 { get; set; }
        public int Number2 { get; set; }
        public string Text1 { get; set; }
        public string Text2 { get; set; }
    }
}

MainWindow.xaml

<Window x:Class="CollectionViewSupport.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:local="clr-namespace:CollectionViewSupport"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Grid.ColumnSpan="2">
            <CheckBox Name="isSyncCheckBox" IsChecked="True" Content="Is Synchronized With Current Item" VerticalAlignment="Center"/>

            <Label Content="Filter condition: "/>
            <ComboBox SelectedIndex="0" SelectedValue="{Binding Path=Data.Filter}" 
                      ItemsSource="{Binding Path=Filters}" 
                      DisplayMemberPath="Caption"
                      SelectedValuePath="Filter" 
                      IsEditable="False"/>
        </StackPanel>


        <dxg:GridControl Name="gridControl" ItemsSource="{Binding Path=Data}" AutoGenerateColumns="AddNew" Grid.Row="1">
            <dxg:GridControl.View>
                <dxg:TableView IsSynchronizedWithCurrentItem="{Binding Path=IsChecked, ElementName=isSyncCheckBox}" 
                                   AutoWidth="True" ShowGroupPanel="False" AllowGrouping="False"
                                   AllowEditing="False" ShowAutoFilterRow="True" />
            </dxg:GridControl.View>
        </dxg:GridControl>

        <ListView IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Path=Data}" Grid.Row="1" Grid.Column="1">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=Number1}" Header="Number1"/>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=Number2}" Header="Number2"/>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=Text1}" Header="Text1"/>
                        <GridViewColumn DisplayMemberBinding="{Binding Path=Text2}" Header="Text2"/>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

MainWindow.xaml.vb

Imports System.Windows

Namespace CollectionViewSupport
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

ViewModel.vb

Imports System
Imports System.Collections.Generic
Imports System.Windows.Data
Imports System.ComponentModel

Namespace CollectionViewSupport
    Public Class ViewModel

        Private data_Renamed As ICollectionView
        Public ReadOnly Property Data() As ICollectionView
            Get
                If data_Renamed Is Nothing Then
                    Dim list As New List(Of TestData)()
                    For i As Integer = 0 To 99
                        list.Add(New TestData() With {.Number1 = i, .Number2 = i * 10, .Text1 = "row " & i, .Text2 = "ROW " & i})
                    Next i
                    data_Renamed = New ListCollectionView(list)
                End If
                Return data_Renamed
            End Get
        End Property

        Private filters_Renamed As List(Of FilterItem)
        Public ReadOnly Property Filters() As List(Of FilterItem)
            Get
                If Filters Is Nothing Then
                    Filters = New List(Of FilterItem)()

                    Dim f1 As New FilterItem()
                    f1.Caption = "All items"

                    Filters.Add(f1)

                    Dim f2 As New FilterItem()
                    f2.Caption = "Even items"
                    f2.Filter = AddressOf EvenMethod
                    Filters.Add(f2)

                    Dim f3 As New FilterItem()
                    f3.Caption = "Odd items"
                    f3.Filter = AddressOf OddMethod
                    Filters.Add(f3)
                End If
                Return Filters
            End Get
        End Property

        Private Function EvenMethod(item As Object) As Boolean
            Return DirectCast(item, TestData).Number1 Mod 2 = 0
        End Function
        Private Function OddMethod(item As Object) As Boolean
            Return DirectCast(item, TestData).Number1 Mod 2 = 1
        End Function


    End Class
    Public Class FilterItem
        Public Property Caption() As String
        Public Property Filter() As Predicate(Of Object)
    End Class
    Public Class TestData
        Public Property Number1() As Integer
        Public Property Number2() As Integer
        Public Property Text1() As String
        Public Property Text2() As String
    End Class
End Namespace

The image below shows the result.