In-Place Mode
- 6 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. The EditSettings classes provide the implementation of all editor properties that allow the in-place editor to be fully customized. A container control (e.g., GridControl) uses information provided by the EditSettings objects to create fully-functional editors when required.
This topic contains the following sections.
- GridControl In-Place Editing
- Bars In-Place Editing
- PropertyGridControl In-Place Editing
- A List of Editors that Support the In-Place Mode
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.
By default, the GridControl automatically creates editors for all columns, based on their value type. To manually assign the required 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.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-assign-a-combobox-editor-to-a-column-e1582.
<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; }
}
}
To learn more about in-place editors within the GridControl, see GridControl In-place Editors.
Bars In-Place Editing
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
To embed a specific editor into a property grid cell, assign a required 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; }
}
To learn more, see Property Definitions.
A List of WPF Data Editors that Support the In-Place Mode
The following table lists the WPF data editors that support the in-place mode. Each table row contains a short description of the editor and a link to the corresponding EditSettings class.
| Class | Description |
|---|---|
| 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. |