Edit Cell Values in In-Place Mode
- 2 minutes to read
This topic explains how to allow users to use in-place editors to display and edit DataGridView cell values.
Users can also update cell values in a separate edit form. For information on how to implement and invoke such a form, refer to the following help topics: Show Built-In Forms to Display, Create, and Edit Items and Customize CRUD Forms.
Invoke an In-Place Editor
Use the DataGridView.EditorShowMode property to specify a gesture that invokes an in-place editor for a cell. DataGridView automatically determines the editor type based on the type of a column to which a cell belongs. Note: TemplateColumn requires you to manually assign an in-place editor.
The DataGridView posts the changed cell’s value as the user focuses another cell. To immediately post changes while the user is changing a cell value, enable the GridColumn.EnableImmediatePosting or DataGridView.EnableImmediatePosting property. Note that templated columns do not support immediate posting functionality.
Specify In-Place Editor Template
This example sets an in-place editor template for a TemplateColumn‘s cell.
Assign a DataTemplate
object to the TemplateColumn.EditTemplate property. The Data Context (Binding Source) for the EditTemplate
property is CellData.
<dxg:DataGridView x:Name = "grid" ItemsSource ="{Binding Employees}" EditorShowMode="Tap">
<dxg:DataGridView.Columns>
<dxg:ImageColumn FieldName="Photo" Width="100"/>
<dxg:TemplateColumn FieldName="Name" Caption="Employee" MinWidth="250">
<dxg:TemplateColumn.DisplayTemplate>
<DataTemplate>
<Grid VerticalOptions="Center" Padding="10, 0, 0, 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Text="{Binding Item.Name}" Font="Bold, 14" Grid.Row="0" />
<Label Text="{Binding Item.Phone, StringFormat = 'Phone: {0}'}"
Font="Small" Grid.Row="1"/>
<Label Text="{Binding Item.Address, StringFormat = 'Address: {0}'}"
Font="Small" Grid.Row="2" />
</Grid>
</DataTemplate>
</dxg:TemplateColumn.DisplayTemplate>
<dxg:TemplateColumn.EditTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Editor Text="{Binding Item.Phone, StringFormat = '{0}'}"
FontSize="Small" Grid.Row="0"/>
<Editor Text="{Binding Item.Address, StringFormat = '{0}'}"
FontSize="Small" Grid.Row="1" />
</Grid>
</DataTemplate>
</dxg:TemplateColumn.EditTemplate>
</dxg:TemplateColumn>
<dxg:TextColumn FieldName="Position" MinWidth="200"/>
<dxg:PickerColumn FieldName="Access" Caption = "Access Level" MinWidth="100"/>
<dxg:CheckBoxColumn FieldName="OnVacation" MinWidth="100"/>
</dxg:DataGridView.Columns>
</dxg:DataGridView>
Call the OpenEditor and CloseEditor methods to open and close a cell in-place editor in code. The EditorShowing event fires when a cell editor is about to be displayed and allows you to cancel the action.
Validate Input Data
You can handle the following events to validate cell data when cells are edited in in-place mode:
- DataGridView.ValidateCell
- Occurs after a user changes a cell value in the in-place editor and attempts to select another cell.
- DataGridView.ValidationError
- Occurs when a value in the in-place cell editor fails validation or when it cannot be saved to a data source.