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.