Lesson 2 - Configure Columns and Editors

• Jun 06, 2023
• 4 minutes to read

This tutorial demonstrates how to adjust the column layout, specify cell editors, and format displayed values. The tutorial is based on Lesson 1.

Create Columns

The GridControl generates columns for all fields in a bound data source if the AutoGenerateColumns property is set to AddNew. Add columns to the GridControl explicitly to display only required columns and access settings for each column:

1. Set the DataControlBase.AutoGenerateColumns property to None (default value).
2. Add GridColumn objects to the GridControl.Columns collection. Since this collection is the GridControl content property, you can add GridColumn objects directly to the GridControl markup.
3. Specify the ColumnBase.FieldName property for each column to bind it to the data source field.

MainView.xaml

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

Refer to the following help topic for more information: Create Columns and Bind Them to Data Properties.

Change Column Layout

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

1. Set the TableView.AutoWidth property to true to fit columns to the GridControl.
2. Specify the TableView.BestFitModeOnSourceChange property to calculate the optimal width for all columns based on their cell and header content.

MainView.xaml

<dxg:GridControl.View>
    <dxg:TableView AutoWidth="True"
                   BestFitModeOnSourceChange="VisibleRows"/>
</dxg:GridControl.View>

Refer to the following help topic for more information: Move and Resize Columns.

Specify an In-Place Editor

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

1. Add a Shippers collection to the View Model:

   MainViewModel.cs

   using DevExpress.Mvvm;
   using Microsoft.EntityFrameworkCore;
   using System.Collections.Generic;
   using WPFBlankDotNETCoreAppWithNorthwindDatabase.Models;
   
   namespace WPFBlankDotNETCoreAppWithNorthwindDatabase {
       public class ViewModel : ViewModelBase {
           NorthwindEntities northwindDBContext;
   
           public ICollection<Order> Orders {
               get => GetValue<ICollection<Order>>();
               private set => SetValue(value);
           }
           public ICollection<Shipper> Shippers {
               get => GetValue<ICollection<Shipper>>();
               private set => SetValue(value);
           }
   
           public ViewModel() {
               northwindDBContext = new NorthwindEntities();
   
               northwindDBContext.Orders.Load();
               Orders = northwindDBContext.Orders.Local;
   
               northwindDBContext.Shippers.Load();
               Shippers = northwindDBContext.Shippers.Local;
           }
       }
   }
   

   MainViewModel.vb

   Imports DevExpress.Mvvm
   Imports Microsoft.EntityFrameworkCore
   Imports System.Collections.Generic
   Imports WPFBlankDotNETCoreAppWithNorthwindDatabase.Models
   
   Namespace WPFBlankDotNETCoreAppWithNorthwindDatabase
       Public Class ViewModel
           Inherits ViewModelBase
   
           Private northwindDBContext As NorthwindEntities
   
           Public Property Orders As ICollection(Of Order)
               Get
                   Return GetValue(Of ICollection(Of Order))()
               End Get
               Private Set(ByVal value As ICollection(Of Order))
                   Return SetValue(value)
               End Set
           End Property
   
           Public Property Shippers As ICollection(Of Shipper)
               Get
                   Return GetValue(Of ICollection(Of Shipper))()
               End Get
               Private Set(ByVal value As ICollection(Of Shipper))
                   Return SetValue(value)
               End Set
           End Property
   
           Public Sub New()
               northwindDBContext = New NorthwindEntities()
               northwindDBContext.Orders.Load()
               Orders = northwindDBContext.Orders.Local
               northwindDBContext.Shippers.Load()
               Shippers = northwindDBContext.Shippers.Local
           End Sub
       End Class
   End Namespace
   

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

3. Create a ComboBoxEditSettings object and assign it to the ShipVia column’s ColumnBase.EditSettings property.

4. Specify the ItemsSource property to bind the ComboBoxEditSettings to data.

5. Set the DisplayMember property to CompanyName and the ValueMember property to ShipperId.

MainView.xaml

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

Refer to the following help topic for more information about in-place editors: Assign Editors to Cells.

Format Values

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

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 editor mask to Currency.

3. Set the TextEditSettings.MaskUseAsDisplayFormat property to true.

MainView.xaml

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

Refer to the following help topic for more information: Format Cell Values.