Bind the WPF Data Grid to Local Data

• Dec 15, 2022
• 3 minutes to read

This topic demonstrates how to bind the GridControl to a local database:

1. Connect your project to a local database.

2. Create a ViewModel:

   ViewModel.cs

   using DevExpress.Mvvm;
   using System.Collections.ObjectModel;
   using System.Data.Entity;
   
   namespace DXGridGetStarted {
       public class ViewModel : ViewModelBase {
           NorthwindEntities northwindDBContext;
           public ViewModel() {
               if (IsInDesignMode) {
                   Orders = new ObservableCollection<Order>();
               } 
               else {
                   northwindDBContext = new NorthwindEntities();
   
                   northwindDBContext.Orders.Load();
                   Orders = northwindDBContext.Orders.Local;
               }
           }
           public ObservableCollection<Order> Orders {
               get => GetValue<ObservableCollection<Order>>();
               private set => SetValue(value);
           }
       }
   }
   

   ViewModel.vb

   Imports DevExpress.Mvvm
   Imports System.Collections.ObjectModel
   Imports System.Data.Entity
   
   Namespace DXGridGetStarted
       Public Class ViewModel
           Inherits ViewModelBase
   
           Private northwindDBContext As NorthwindEntities
   
           Public Sub New()
               If IsInDesignMode Then
                   Orders = New ObservableCollection(Of Order)()
               Else
                   northwindDBContext = New NorthwindEntities()
                   northwindDBContext.Orders.Load()
                   Orders = northwindDBContext.Orders.Local
               End If
           End Sub
   
           Public Property Orders As ObservableCollection(Of Order)
               Get
                   Return GetValue(Of ObservableCollection(Of Order))()
               End Get
               Private Set(ByVal value As ObservableCollection(Of Order))
                   Return SetValue(value)
               End Set
           End Property
       End Class
   End Namespace
   

   Note

   To use the Order object’s properties at design time without a direct database connection, add an empty Orders collection to the ViewModel.

3. Build the solution to make the ViewModel class visible in the window’s Quick Actions.

4. Open the ThemedWindow‘s Quick Actions and define the window’s data context:

   

   You can also define the window’s data context in code:

   MainWindow.xaml

   <dx:ThemedWindow
       ...
       xmlns:local="clr-namespace:DXGridGetStarted">
       <dx:ThemedWindow.DataContext>
           <local:ViewModel/>
       </dx:ThemedWindow.DataContext>
   

5. Open the GridControl‘s Quick Actions and specify the ItemsSource:

   

   To bind the GridControl to data in code, specify the DataControlBase.ItemsSource property:

   MainWindow.xaml

   <dxg:GridControl AutoGenerateColumns="AddNew"
                    EnableSmartColumnsGeneration="True"
                    ItemsSource="{Binding Orders}">
       <dxg:GridControl.View>
           <dxg:TableView ShowTotalSummary="True"/>
       </dxg:GridControl.View>
   </dxg:GridControl>
   

6. Run the project. The GridControl generates columns for all fields from a bound data source:

   

Note

For information on how to post changes to a database, refer to the following help topic: Post Changes to a Database.

GitHub Examples

Framework	GitHub link
.NET Framework	View Example: WPF Data Grid - Getting Started
.NET Core	View Example: WPF Data Grid - Getting Started .NET Core

More Examples

The following example shows how to bind the WPF Data Grid to different data sources.

View Example: Bind the WPF Data Grid to Data

This example includes multiple solutions that demonstrate:

• How to bind the Data Grid to Entity Framework, EF Core, and XPO.
• Different binding mechanisms: virtual sources, server mode sources, and local data.
• MVVM and code-behind patterns.

After you bind the Data Grid to a database, you can implement CRUD operations (create, read update, delete). Refer to the following topic for more information: CRUD Operations in a Data-Bound Grid.

View Example: Implement CRUD Operations in the WPF Data Grid