Lesson 2 - Display and Edit Data

  • 2 min 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:

<dxg:GridControl AutoGenerateColumns="AddNew" ItemsSource="{Binding Customers}">
        <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:TableView />

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:

    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;
  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:

        ... > 
        <dxg:GridColumn FieldName="City" IsSmart="True">
                <dxe:ComboBoxEditSettings ItemsSource="{Binding Cities}"/>

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:

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