Lesson 2 - Display and Edit Data

• Aug 03, 2020
• 3 minutes to read

This tutorial demonstrates how to display and edit data within the GridControl. The tutorial is based on Lesson 1.

Create Columns

Add columns to the GridControl explicitly to access individual settings for each column.

Create the GridColumn objects and specify their ColumnBase.FieldName and ColumnBase.IsSmart properties:

MainWindow.xaml

<dxg:GridControl ItemsSource="{Binding Orders}">
    <dxg:GridControl.View>
        <dxg:TableView />
    </dxg:GridControl.View>
    <dxg:GridColumn FieldName="OrderId" IsSmart="True"/>
    <dxg:GridColumn FieldName="CustomerId" IsSmart="True"/>
    <dxg:GridColumn FieldName="OrderDate" IsSmart="True"/>
    <dxg:GridColumn FieldName="ShipVia" IsSmart="True"/>
    <dxg:GridColumn FieldName="Freight" IsSmart="True"/>
    <dxg:GridColumn FieldName="ShipName" IsSmart="True"/>
    <dxg:GridColumn FieldName="ShipCity" IsSmart="True"/>
    <dxg:GridColumn FieldName="ShipCountry" IsSmart="True"/>
</dxg:GridControl>

Change Column Layout

Fit columns to the GridControl and set the optimal width for all columns to completely display their contents:

1. Set the TableView.AutoWidth property to true to fit columns to the GridControl.

2. Set the TableView.BestFitModeOnSourceChange to VisibleRows to calculate the optimal width for all columns:

   MainWindow.xaml

   <dxg:GridControl ItemsSource="{Binding Orders}">
       <dxg:GridControl.View>
           <dxg:TableView AutoWidth="True" 
                          BestFitModeOnSourceChange="VisibleRows"/>
       </dxg:GridControl.View>
       ...
   </dxg:GridControl>
   

Specify an In-Place Editor

The GridControl uses in-place editors to edit cell values. The editor’s type depends on a column’s content. The CheckEdit is used for Boolean values, the DateEdit - for dates, the TextEdit - for strings and numbers. You can also define a custom editor (for example, the ComboBoxEdit):

Add a Shippers collection to the ViewModel:

ViewModel.cs

using System.Collections.ObjectModel;
using Microsoft.EntityFrameworkCore;
using DevExpress.Mvvm;
using DevExpress.Mvvm.Native;
using WPFBlankDotNETCoreAppWithNorthwindDatabase.Models;

namespace WPFBlankDotNETCoreAppWithNorthwindDatabase {
    public class ViewModel : ViewModelBase {
        NorthwindEntities northwindDBContext;
        public ViewModel() {
            if (IsInDesignMode) {
                Orders = new ObservableCollection<Order>();
                Shippers = new ObservableCollection<Shipper>();
            }
            else {
                northwindDBContext = new NorthwindEntities();

                northwindDBContext.Orders.Load();
                Orders = northwindDBContext.Orders.ToObservableCollection();

                northwindDBContext.Shippers.Load();
                Shippers = northwindDBContext.Shippers.ToObservableCollection();
            }
        }
        public ObservableCollection<Order> Orders {
            get => GetValue<ObservableCollection<Order>>();
            private set => SetValue(value);
        }
        public ObservableCollection<Shipper> Shippers {
            get => GetValue<ObservableCollection<Shipper>>();
            private set => SetValue(value);
        }
    }
}

ViewModel.vb

Imports System.Collections.ObjectModel
Imports Microsoft.EntityFrameworkCore
Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.Native
Imports WPFBlankDotNETCoreAppWithNorthwindDatabase.Models

Namespace WPFBlankDotNETCoreAppWithNorthwindDatabase
    Public Class ViewModel
        Inherits ViewModelBase

        Private northwindDBContext As NorthwindEntities

        Public Sub New()
            If IsInDesignMode Then
                Orders = New ObservableCollection(Of Order)()
                Shippers = New ObservableCollection(Of Shipper)()
            Else
                northwindDBContext = New NorthwindEntities()
                northwindDBContext.Orders.Load()
                Orders = northwindDBContext.Orders.ToObservableCollection()
                northwindDBContext.Shippers.Load()
                Shippers = northwindDBContext.Shippers.ToObservableCollection()
            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

        Public Property Shippers As ObservableCollection(Of Shipper)
            Get
                Return GetValue(Of ObservableCollection(Of Shipper))()
            End Get
            Private Set(ByVal value As ObservableCollection(Of Shipper))
                Return SetValue(value)
            End Set
        End Property
    End Class
End Namespace

1. Add the xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" namespace to the ThemedWindow.

2. Create the ComboBoxEdit object and assign it to the Ship Via column’s ColumnBase.EditSettings property.

3. Specify the ItemsSource property to bind the ComboBoxEdit to data.

4. Set the DisplayMember property to CompanyName and the ValueMember property to ShipperId:

   MainWindow.xaml

   <dx:ThemedWindow
       ...
       xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       ...
       <dxg:GridColumn FieldName="ShipVia" IsSmart="True">
           <dxg:GridColumn.EditSettings>
               <dxe:ComboBoxEditSettings ItemsSource="{Binding Shippers}" 
                                         DisplayMember="CompanyName" 
                                         ValueMember="ShipperId"/>
           </dxg:GridColumn.EditSettings>
       </dxg:GridColumn>
   

Format Values

You can configure how the GridControl displays data. The following example formats the Freight column’s data:

1. Create a TextEditSettings object and assign it to the Freight column’s ColumnBase.EditSettings property.

2. Specify the TextEditSettings.MaskType and TextEditSettings.Mask properties to set the in-placed editor’s mask to Currency.

3. Set the TextEditSettings.MaskUseAsDisplayFormat property to true:

   MainWindow.xaml

   <dxg:GridColumn FieldName="Freight" IsSmart="True">
       <dxg:GridColumn.EditSettings>
           <dxe:TextEditSettings Mask="c" MaskType="Numeric"            
                                 MaskUseAsDisplayFormat="True"/>
       </dxg:GridColumn.EditSettings>
   </dxg:GridColumn>