Skip to main content

TableView.EditFormTemplate Property

Gets or sets the template that defines the Edit Form appearance. This is a dependency property.

Namespace: DevExpress.Xpf.Grid

Assembly: DevExpress.Xpf.Grid.v24.1.dll

NuGet Package: DevExpress.Wpf.Grid.Core

Declaration

public DataTemplate EditFormTemplate { get; set; }

Property Value

Type Description
DataTemplate

The template that defines the appearance of the Edit Form.

Remarks

The EditFormTemplate property allows you to create a custom Edit Form layout. You can use techniques from the following topic to rearrange elements within the Edit Form: Specify Edit Form Appearance.

The EditFormEditor objects defined in the EditFormTemplate use the ColumnBase.EditFormTemplate to display the column’s editor.

Data Binding

The template’s data context is a DevExpress.Xpf.Grid.EditForm.EditFormRowData object. Use the following binding paths to access cell values and ViewModel properties:

  • Source.Row.[YourPropertyName] - Access a property of an object in the ItemsSource collection.
  • Source.DataContext.[FieldName] - Access a column value.
  • Source.View.DataContext.[YourPropertyName] - Access a property in a grid’s ViewModel.

Example

The following code sample defines a template that customizes the Edit Form‘s appearance:

Data Grid - View EditFormTemplate Example

<dxg:GridControl ItemsSource="{Binding Source}">
    <dxg:GridControl.View>
        <dxg:TableView EditFormShowMode="Inline">
            <dxg:TableView.EditFormTemplate>
                <DataTemplate>
                    <GroupBox Header="Custom Inline Edit Form" 
                              Margin="10" Padding="10"
                              KeyboardNavigation.TabNavigation="Cycle">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="Product Name: " Grid.Row="0" Grid.Column="0"/>
                            <dxg:EditFormEditor FieldName="ProductName" Grid.Row="0" Grid.Column="1" Margin="2"/>

                            <TextBlock Text="Unit Price: " Grid.Row="1" Grid.Column="0"/>
                            <dxg:EditFormEditor FieldName="UnitPrice" Grid.Row="1" Grid.Column="1" Margin="2"/>

                            <TextBlock Text="Quantity: " Grid.Row="2" Grid.Column="0"/>
                            <dxg:EditFormEditor FieldName="Quantity" Grid.Row="2" Grid.Column="1" Margin="2"/>

                            <StackPanel  Grid.Row="3" Grid.Column="1" Orientation="Horizontal">
                                <dx:SimpleButton Content="Apply" Command="{Binding CommitCommand}" Margin="2"/>
                                <dx:SimpleButton Content="Cancel" Command="{Binding CancelCommand}" Margin="2"/>
                            </StackPanel>
                        </Grid>
                    </GroupBox>
                </DataTemplate>
            </dxg:TableView.EditFormTemplate>
        </dxg:TableView>
    </dxg:GridControl.View>
    <!-- ... -->
    <dxg:GridColumn FieldName="Quantity">
        <dxg:GridColumn.EditFormTemplate>
            <DataTemplate>
                <dxe:SpinEdit Name="PART_Editor" IsFloatValue="False"/>
            </DataTemplate>
        </dxg:GridColumn.EditFormTemplate>
    </dxg:GridColumn>
</dxg:GridControl>

Specify the KeyboardNavigation.TabNavigation attached property for the root container in the EditFormTemplate to enable keyboard navigation within the custom Edit Form.

See Also