Lesson 2: Configure Grid Columns and Editors

• Apr 22, 2022
• 2 minutes to read

This tutorial demonstrates how to access and specify column settings in the GridControl.

Create Columns

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

1. Set the DataControlBase.AutoGenerateColumns property to false.
2. Add ColumnBase descendants to the DataControlBase.Columns collection.
3. Specify the ColumnBase.FieldName property for each column.

MainWindow.xaml

<dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}" AutoGenerateColumns="False">
    <dxg:GridControl.Columns>
        <dxg:GridTextColumn FieldName="ProductName"/>
        <dxg:GridTextColumn FieldName="Country"/>
        <dxg:GridSpinEditColumn FieldName="UnitPrice"/>
        <dxg:GridTextColumn FieldName="Quantity"/>
        <dxg:GridDateColumn FieldName="OrderDate"/>
    </dxg:GridControl.Columns>
</dxg:GridControl>

Add a Combo Box Column

The GridControl uses in-place editors to edit cell values. The editor’s type depends on a column’s type.

Column Type	In-place Editor	Description
GridTextColumn	TextEdit	Displays text values.
GridSpinEditColumn	SpinEdit	Displays numeric values and spin (increment/decrement) buttons.
GridCheckBoxColumn	CheckBox	Displays Boolean values.
GridComboBoxColumn	ComboBox	Displays lists.
GridDateColumn	DateEdit	Displays date-time values.
GridMaskColumn	-	Allows you to use the GridMaskColumn.Mask property to restrict data input and format data output.
GridTemplateColumn	-	Allows you to use the GridTemplateColumn.CellTemplate property to specify custom appearance for displayed data.

You can define a column with the ComboBox editor:

1. Add a Countries collection to the ViewModel:

   ViewModel.cs

   using DevExpress.Mvvm;
   using System.Collections.Generic;
   using System.Collections.ObjectModel;
   using System.Linq;
   
   namespace WinUIGetStarted {
       public class MainViewModel : ViewModelBase {
           public MainViewModel() {
               Source = ProductsDataModel.GetProducts();
   
               var countries = Source.Select(p => p.Country);
               Countries = countries.Distinct().ToList();
           }
           public ObservableCollection<Product> Source { get; }
           public IList<string> Countries { get; }
       }
   }
   

   ViewModel.vb

   Imports DevExpress.Mvvm
   Imports System.Collections.Generic
   Imports System.Collections.ObjectModel
   Imports System.Linq
   
   Namespace WinUIGetStarted
       Public Class MainViewModel
           Inherits ViewModelBase
   
           Public Sub New()
               Source = ProductsDataModel.GetProducts()
               Dim countries = Source.[Select](Function(p) p.Country)
               Countries = countries.Distinct().ToList()
           End Sub
   
           Public ReadOnly Property Source As ObservableCollection(Of Product)
           Public ReadOnly Property Countries As IList(Of String)
       End Class
   End Namespace
   

2. Change the Country column’s type to the GridComboBoxColumn and specify its GridComboBoxColumn.ItemsSource property:

   MainWindow.xaml

   <dxg:GridComboBoxColumn FieldName="Country" ItemsSource="{x:Bind ViewModel.Countries}"/>
   

3. Set the DataControlBase.NavigationStyle property to Cell to allow users to edit data:

   MainWindow.xaml

   <dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}" AutoGenerateColumns="False" NavigationStyle="Cell">
       <dxg:GridControl.Columns>
           <dxg:GridTextColumn FieldName="ProductName"/>
           <dxg:GridComboBoxColumn FieldName="Country" ItemsSource="{x:Bind ViewModel.Countries}"/>
           <dxg:GridSpinEditColumn FieldName="UnitPrice"/>
           <dxg:GridTextColumn FieldName="Quantity"/>
           <dxg:GridDateColumn FieldName="OrderDate"/>
       </dxg:GridControl.Columns>
   </dxg:GridControl>
   

Format Cell Text

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

Set the Mask property to c to display and edit the column’s values as Currency.

MainWindow.xaml

<dxg:GridSpinEditColumn FieldName="UnitPrice" Mask="c"/>