In-Place Mode

  • 5 minutes to read

Overview

DevExpress WPF Data Editors can be used for in-place editing within the container controls such as GridControl or Bars.

Each editor has a helper class (the BaseEditSettings descendant) responsible for the editor's functionality. You can use the properties implemented in the *EditSettings class to fully customize the in-place editor. A container control (for example, GridControl) uses information provided by the *EditSettings objects to create editors when required.

GridControl In-Place Editing

When used within the GridControl, the actual editors are only created when end users start to edit a cell and are automatically destroyed when editing is completed.

The following image demonstrates various types of editors nested in the GridControl's cells and cards.

Inplace editors grid

The GridControl automatically creates editors for all columns, based on the column value type. To assign a custom editor to a column, use the column's ColumnBase.EditSettings property.

This example shows how to assign the combo box and spin editors to grid columns.

<Window x:Class="DXGrid_AssignComboBoxToColumn.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
        xmlns:local="clr-namespace:DXGrid_AssignComboBoxToColumn" 
        Title="Window1" Height="300" Width="499">
    <Grid>
        <dxg:GridControl x:Name="grid" ItemsSource="{Binding PersonList}">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="ProductName" />
                <dxg:GridColumn FieldName="UnitPrice">
                    <dxg:GridColumn.EditSettings>
                        <dxe:SpinEditSettings MaxValue="999" MinValue="1" />
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
                <dxg:GridColumn FieldName="Type" >
                    <dxg:GridColumn.EditSettings>
                        <dxe:ComboBoxEditSettings ItemsSource="{Binding TypeList}" 
                                                  DisplayMember="TypeName" ValueMember="Id"/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>
using System.Collections.ObjectModel;
using System.Windows;

namespace DXGrid_AssignComboBoxToColumn {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
            this.DataContext = new MyViewModel();
        }
    }
    public class MyViewModel {
        public MyViewModel() {
            CreateList();
        }

        public ObservableCollection<Person> PersonList { get; set; }
        public ObservableCollection<ProductType> TypeList { get; set; }
        void CreateList() {
            PersonList = new ObservableCollection<Person>();
            for (int i = 0; i < 20; i++) {
                Person p = new Person(i);
                PersonList.Add(p);
            }
            TypeList = new ObservableCollection<ProductType>();
            for (int i = 0; i < 3; i++) {
                TypeList.Add(new ProductType(i));
            }
        }
    }
    public class Person {
        public Person(int i) {
            ProductName = "FirstName" + i;

            UnitPrice = i;
            Type = 0;
        }

        public string ProductName { get; set; }

        public int Type { get; set; }

        public int UnitPrice { get; set; }
    }

    public class ProductType {
        public ProductType(int i) {
            Id = i;
            TypeName = "Type" + i;
        }
        public int Id { get; set; }
        public string TypeName { get; set; }
    }
}

See also: GridControl - In-place Editors

Bars In-Place Editing

Inplace editors bar

To embed an editor into a bar, use the BarEditItem object. The required *EditSettings object must be assigned to the BarEditItem.EditSettings property.

The following example demonstrates how to use the DateEditSettings and SpinEditSettings objects to embed editors into a bar.

<Window ...
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        >
    <Grid>
        <dxb:BarContainerControl ContainerType="Top">
            <dxb:ToolBarControl>
                <dxb:BarEditItem x:Name="editItemDateEdit1" Content="Date" EditValue="01/01/2020" EditWidth="100">
                    <dxb:BarEditItem.EditSettings>
                        <dxe:DateEditSettings />
                    </dxb:BarEditItem.EditSettings>
                </dxb:BarEditItem>
                <dxb:BarEditItem x:Name="editItemSpinEdit1" Content="Value" EditValue="123" EditWidth="100">
                    <dxb:BarEditItem.EditSettings>
                        <dxe:SpinEditSettings />
                    </dxb:BarEditItem.EditSettings>
                </dxb:BarEditItem>
            </dxb:ToolBarControl>
        </dxb:BarContainerControl>
    </Grid>
</Window>

PropertyGridControl In-Place Editing

Inplace editors propertygrid

To embed a specific editor into a property grid cell, assign an editor's *EditSettings object to the PropertyDefinition.EditSettings property.

The following example demonstrates how to assign editors to property grid rows based on the property path and type.

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
...
<dxprg:PropertyGridControl SelectedObject="{Binding Data}" ShowProperties="All">
    <dxprg:PropertyDefinition Path="ID" IsReadOnly="True"/>
    <dxprg:PropertyDefinition Type="sys:DateTime">
        <dxprg:PropertyDefinition.EditSettings>
            <dxe:DateEditSettings DisplayFormat="MMM-dd-yyyy"/>
        </dxprg:PropertyDefinition.EditSettings>
    </dxprg:PropertyDefinition>
    <dxprg:PropertyDefinition Type="sys:String">
        <dxprg:PropertyDefinition.EditSettings>
            <dxe:TextEditSettings MaxLength="15"/>
        </dxprg:PropertyDefinition.EditSettings>
    </dxprg:PropertyDefinition>
</dxprg:PropertyGridControl>
public class ViewModel {
    public SimpleModel Data { get; set; }
    public ViewModel() {
        Data = new SimpleModel()
        {
            ID = 0,
            FirstName = "Anna",
            LastName = "Trujilo",
            Birthday = new DateTime(1987, 09, 14)
        };
    }
}

public class SimpleModel {
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime Birthday { get; set; }
}

For more information, see Property Definitions.

WPF Data Editors that Support the In-Place Mode

The following table lists the WPF data editors that support the in-place mode.

Class Description
AutoSuggestEditSettings Contains settings specific to the AutoSuggestEdit editor.
BarCodeEditSettings Contains settings specific to the BarCodeEdit editor.
ButtonEditSettings Contains settings specific to the ButtonEdit editor.
CalcEditSettings Contains settings specific to the PopupCalcEdit editor.
CheckEditSettings Contains settings specific to the CheckEdit editor.
ColorEditSettings Contains settings specific to the ColorEdit editor.
ComboBoxEditSettings Contains settings specific to the ComboBoxEdit editor.
DateEditSettings Contains settings specific to the DateEdit editor.
FontEditSettings Contains settings specific to the FontEdit editor.
HyperlinkEditSettings Contains settings specific to the HyperlinkEdit editor.
ImageEditSettings Contains settings specific to the ImageEdit editor.
ListBoxEditSettings Contains settings specific to the ListBoxEdit editor.
MemoEditSettings Contains settings specific to the MemoEdit editor.
PasswordBoxEditSettings Contains settings specific to the PasswordBoxEdit editor.
PopupColorEditSettings Contains settings specific to the PopupColorEdit editor.
PopupImageEditSettings Contains settings specific to the PopupImageEdit editor.
ProgressBarEditSettings Contains settings specific to the ProgressBarEdit editor.
RatingEditSettings Contains settings specific to the RatingEdit editor.
SparklineEditSettings Contains settings specific to the SparklineEdit editor.
SpinEditSettings Contains settings specific to the SpinEdit editor.
TextEditSettings Contains settings specific to the TextEdit editor.
ToggleSwitchEditSettings Contains settings specific to the ToggleSwitchEdit editor.
TrackBarEditSettings Contains settings specific to the TrackBarEdit editor.
See Also