Lesson 2 - Display and Edit Data

• May 09, 2020
• 2 minutes to read

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

Operate a Set of Columns

The GridControl generates columns for all fields from a bound data source. You can add columns to the GridControl explicitly. Define columns and use the GridControl.Columns property to add them to the GridControl:

MainWindow.xaml

<dxg:GridControl AutoGenerateColumns="AddNew" ItemsSource="{Binding Customers}">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="Name" IsSmart="True"/>
        <dxg:GridColumn FieldName="City" IsSmart="True"/>
        <dxg:GridColumn FieldName="Visits" IsSmart="True"/>
        <dxg:GridColumn FieldName="Birthday" IsSmart="True"/>
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TableView />
    </dxg:GridControl.View>
</dxg:GridControl>

Change an In-Place Editor

The GridControl uses an in-place editor that 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 define a custom editor (for example, the ComboBoxEdit):

1. Create a list of cities in the View Model:

   MainWindow.xaml.cs

   namespace DxGridGettingStarted {
       public class MainWindowViewModel : INotifyPropertyChanged {
           public MainWindowViewModel() { 
               // ... 
               var cities = from c in people select c.City;
               Cities = cities.Distinct().ToList();
           }
           public List<Customer> Customers { get; private set; }
           // A list of cities for ComboBoxEdit
           public List<string> Cities { get; private set; }
           public event PropertyChangedEventHandler PropertyChanged;
       }
   }
   

   MainWindow.xaml.vb

   Namespace DxGridGettingStarted
       Public Class MainWindowViewModel
           Inherits INotifyPropertyChanged
   
           Public Sub New()
               ' ...
               Dim cities = From c In people Select c.City
               Cities = cities.Distinct().ToList()
           End Sub
   
           Public Property Customers As List(Of Customer)
   
           ' A list of cities for ComboBoxEdit
           Public Property Cities As List(Of String)
   
           Public Event PropertyChanged As PropertyChangedEventHandler
       End Class
   End Namespace
   

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

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

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

   MainWindow.xaml

   <Window
       ...
       xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
       ... > 
   
       <dxg:GridColumn FieldName="City" IsSmart="True">
           <dxg:GridColumn.EditSettings>
               <dxe:ComboBoxEditSettings ItemsSource="{Binding Cities}"/>
           </dxg:GridColumn.EditSettings>
       </dxg:GridColumn>
   

Format Values

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

1. Create the DateEditSettings object and assign it to the Birthday column’s ColumnBase.EditSettings property.
2. Set an in-placed editor’s mask to Month day with the TextEditSettings.Mask property.

3. Set the TextEditSettings.MaskUseAsDisplayFormat property to true:

   MainWindow.xaml

   <dxg:GridColumn FieldName="Birthday" IsSmart="True">
       <dxg:GridColumn.EditSettings>
           <dxe:DateEditSettings Mask="m" MaskUseAsDisplayFormat="True"/>
       </dxg:GridColumn.EditSettings>
   </dxg:GridColumn>