Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.

DevExpress DataGridView for MAUI - In-place editing

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.

TemplateColumn.EditTemplate

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.

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.