Lesson 2: Configure Grid Columns and Editors
- 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:
- Set the DataControlBase.AutoGenerateColumns property to false.
- Add ColumnBase descendants to the DataControlBase.Columns collection.
- Specify the ColumnBase.FieldName property for each column.
<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 |
---|---|---|
Grid |
Text |
Displays text values. |
Grid |
Spin |
Displays numeric values and spin (increment/decrement) buttons. |
Grid |
Check |
Displays Boolean values. |
Grid |
Combo |
Displays lists. |
Grid |
Date |
Displays date-time values. |
Grid |
- | Allows you to use the Grid |
Grid |
- | Allows you to use the Grid |
You can define a column with the ComboBox editor:
Add a Countries collection to the ViewModel:
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; } } }
Change the Country column’s type to the GridComboBoxColumn and specify its GridComboBoxColumn.ItemsSource property:
<dxg:GridComboBoxColumn FieldName="Country" ItemsSource="{x:Bind ViewModel.Countries}"/>
Set the DataControlBase.NavigationStyle property to Cell to allow users to edit data:
<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.
<dxg:GridSpinEditColumn FieldName="UnitPrice" Mask="c"/>