Skip to main content

Lesson 1 - Add a GridControl to a Project and Bind it to Data

  • 4 minutes to read

This tutorial demonstrates how to add a GridControl to your project and bind the control to a database:

GridControl Tutorial Result

  1. Use the DevExpress Template Gallery to create a new Blank MVVM Application. This project template contains a boilerplate View Model class and sets it as a data context for the MainView:

    WPF Project Templates

  2. Connect the project to a local database as demonstrated in the following example: Blank .NET 6 App with the Northwind Database.

  3. Add the GridControl toolbox item to the MainView:

    GridControl Tutorial Toolbox

    If your project does not have the DevExpress.Wpf.Grid.Core.v24.1 reference, Visual Studio displays the following message:

    Add Control from the Toolbox

    This message informs you that the required reference was added and asks you to add the control again.

    Tip

    If you obtain DevExpress products from a NuGet feed instead of the Unified Component Installer, the toolbox does not contain DevExpress controls until you add the corresponding NuGet package.

    Go to Tools | NuGet Package Manager | Manage NuGet Packages for Solution and add the DevExpress.Wpf.Grid NuGet package.

  4. Select the GridControl and invoke its Quick Actions menu. Click Bind to a Data Source to launch the Items Source Wizard:

    Items Source Wizard

  5. Select a data source:

    Items Source Wizard - Data Source

    Select a table to show in the GridControl:

    Items Source Wizard - Table

    Select the Simple Binding model. Refer to the following help topic for more information about other binding models: WPF Data Grid: Bind to Data.

    Items Source Wizard - Model

    Ensure that CRUD options are enabled:

    Items Source Wizard - Settings

    Select the View Model option to generate data binding code in your View Model. Verify that the MainViewModel class is selected as the View Model:

    Items Source Wizard - Boilerplate Code

  6. The Items Source Wizard generates the following code:

    Show Generated Code
    <dxg:GridControl x:Name="grid" AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" ItemsSource="{Binding ItemsSource}" RestoreStateKeyFieldName="OrderId" RestoreStateOnSourceChange="True">
        <dxg:GridControl.TotalSummary>
            <dxg:GridSummaryItem Alignment="Right" SummaryType="Count"/>
        </dxg:GridControl.TotalSummary>
        <dxg:GridControl.InputBindings>
            <KeyBinding Command="{Binding View.Commands.DeleteFocusedRow, ElementName=grid}" Key="Delete"/>
        </dxg:GridControl.InputBindings>
        <dxg:GridControl.View>
            <dxg:TableView NewItemRowPosition="Top" ShowUpdateRowButtons="OnCellEditorOpen" ValidateRowCommand="{Binding ValidateRowCommand}" ValidateRowDeletionCommand="{Binding ValidateRowDeletionCommand}" DataSourceRefreshCommand="{Binding DataSourceRefreshCommand}" ShowFixedTotalSummary="True"/>
        </dxg:GridControl.View>
        <dxg:GridColumn FieldName="OrderId" IsSmart="True" ReadOnly="True"/>
        <dxg:GridColumn FieldName="CustomerId" IsSmart="True"/>
        <dxg:GridColumn FieldName="EmployeeId" IsSmart="True"/>
        <dxg:GridColumn FieldName="OrderDate" IsSmart="True"/>
        <dxg:GridColumn FieldName="RequiredDate" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShippedDate" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShipVia" IsSmart="True"/>
        <dxg:GridColumn FieldName="Freight" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShipName" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShipAddress" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShipCity" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShipRegion" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShipPostalCode" IsSmart="True"/>
        <dxg:GridColumn FieldName="ShipCountry" IsSmart="True"/>
    </dxg:GridControl>
    
    using DevExpress.Mvvm;
    using System;
    using WPF_DataGrid_GetStarted.Models;
    using DevExpress.Mvvm.DataAnnotations;
    using System.Linq;
    using System.Collections.Generic;
    using DevExpress.Mvvm.Xpf;
    
    namespace WPF_DataGrid_GetStarted.ViewModels {
        public class MainViewModel : ViewModelBase {
            NorthwindEntities _Context;
            IList<Order> _ItemsSource;
            public IList<Order> ItemsSource {
                get {
                    if (_ItemsSource == null && !DevExpress.Mvvm.ViewModelBase.IsInDesignMode) {
                        _Context = new NorthwindEntities();
                        _ItemsSource = _Context.Orders.ToList();
                    }
                    return _ItemsSource;
                }
            }
            [Command]
            public void ValidateRow(RowValidationArgs args) {
                var item = (Order)args.Item;
                if (args.IsNewItem)
                    _Context.Orders.Add(item);
                _Context.SaveChanges();
            }
            [Command]
            public void ValidateRowDeletion(ValidateRowDeletionArgs args) {
                var item = (Order)args.Items.Single();
                _Context.Orders.Remove(item);
                _Context.SaveChanges();
            }
            [Command]
            public void DataSourceRefresh(DataSourceRefreshArgs args) {
                _ItemsSource = null;
                _Context = null;
                RaisePropertyChanged(nameof(ItemsSource));
            }
        }
    }
    

    This code enables CRUD operations, generates columns for all data source fields, and displays total row count in the fixed summary panel.

  7. Run the project:

    GridControl Tutorial Result

See Also