Edit Cell Values in In-Place Mode

• Sep 06, 2023
• 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 a TemplateColumn requires you to manually assign an in-place editor.

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.

XAML

<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.

View Example: Define the In-Place Editor's Template

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.