ContextQMD
Back to Devexpress

ColumnBase.CellEditTemplate Property

wpf-devexpress-dot-xpf-dot-grid-dot-columnbase.md

latest13.6 KB
Original Source

ColumnBase.CellEditTemplate Property

Gets or sets a template that displays a custom editor used to edit column values. This is a dependency property.

Namespace : DevExpress.Xpf.Grid

Assembly : DevExpress.Xpf.Grid.v25.2.Core.dll

NuGet Package : DevExpress.Wpf.Grid.Core

Declaration

csharp
public DataTemplate CellEditTemplate { get; set; }
vb
Public Property CellEditTemplate As DataTemplate

Property Value

TypeDescription
DataTemplate

A template that displays a custom editor.

|

Remarks

The binding source for the CellEditTemplate is EditGridCellData. Refer to the Data Binding section.

Note

The immediate posting functionality is not supported when the Data Grid uses the CellEditTemplate.

To apply different cell templates based on certain conditions, use a custom CellEditTemplateSelector. If both the CellEditTemplate and CellEditTemplateSelector are specified, the template returned by the template selector has a higher priority. If the template selector returns null , the template specified by the CellEditTemplate property is used.

Each column has the following templates that define editors for display and edit modes:

TemplateDescription
ColumnBase.CellDisplayTemplate / DataViewBase.CellDisplayTemplateDefines a template that displays column values.
ColumnBase.CellEditTemplate / DataViewBase.CellEditTemplateDefines a template that represents an editor used to edit cell values.

Custom In-Place Cell Editors

We recommend that you set a custom editor in the cell template as follows:

  • The editor is a BaseEdit descendant.
  • The editor’s Name property is set to PART_Editor.

This technique has the following advantages:

  • Binds the editor’s value to the source field specified by the ColumnBase.FieldName or ColumnBase.Binding properties.
  • Full keyboard navigation.
  • Input validation support. For more information, refer to the Input Validation topic.
  • Removes the editor’s border to adjust the appearance of in-place use.

In the following code sample, a numeric column uses the ProgressBarEdit editors to display data. When users focus cells, the TrackBarEdit editors replace progress bars:

xaml
<dxg:GridControl>
    <!-- ... -->
    <dxg:GridColumn FieldName="UnitsOnOrder">
        <dxg:GridColumn.CellDisplayTemplate>
            <DataTemplate>
                <dxe:ProgressBarEdit Name="PART_Editor" Minimum="0" Maximum="50" />
            </DataTemplate>
        </dxg:GridColumn.CellDisplayTemplate>
        <dxg:GridColumn.CellEditTemplate>
            <DataTemplate>
                <dxe:TrackBarEdit Name="PART_Editor" Minimum="0" Maximum="50" />
            </DataTemplate>  
        </dxg:GridColumn.CellEditTemplate>
    </dxg:GridColumn>
    <!-- ... -->   
</dxg:GridControl>

To change how the GridControl binds the cell editor to a source property, use the ColumnBase.Binding property:

xaml
<dxg:GridColumn Header="Name" 
    Binding="{Binding Name, Mode=TwoWay,
        Converter={StaticResource myConverter}}" >
    <dxg:GridColumn.CellEditTemplate>
        <DataTemplate>  
            <dxe:TextEdit Name="PART_Editor" IsEnabled="{Binding RowData.Row.Enabled}" />  
        </DataTemplate>
    </dxg:GridColumn.CellEditTemplate>
</dxg:GridColumn>

Use the editor’s EditValue property if you need to change how the GridControl handles the editor’s value and specify a custom binding.

xaml
<dxg:GridColumn FieldName="Name">
    <dxg:GridColumn.CellEditTemplate>
        <DataTemplate>
            <!--DataContext is EditGridCellData-->
            <dxe:TextEdit Name="PART_Editor" EditValue="{Binding Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource myConverter}}"/>  
            <!--Or
            <dxe:TextEdit Name="PART_Editor" EditValue="{Binding RowData.Row.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource myConverter}}"/>-->
            <!--RowData.Row is a path to an underlying row object-->
        </DataTemplate>
    </dxg:GridColumn.CellEditTemplate>
</dxg:GridColumn>

Non-DevExpress Editors

View Example: How to Use Custom Editors to Edit Cell Values

You can use non-BaseEdit cell editors in the CellEditTemplate to edit data. This method has the following limitations:

  • You cannot use the PART_Editor method, you should bind the editor’s value.

  • Non-DevExpress editors do not use lightweight templates that are designed to improve performance.

  • The GridControl does not remove the editor’s borders to adjust the appearance of in-place editors.

  • You need to handle events to process user actions such as focusing and keyboard navigation:

  • Input Validation is not supported.

Data Binding

Cell elements contain EditGridCellData objects in their DataContext.

Use the following binding paths to access cell values, columns, and ViewModel properties:

  • Value - access the current cell value;
  • Column - access the current column;
  • RowData.Row.[YourPropertyName] - access a property of an object from the ItemsSource collection;
  • Data.[FieldName] - access column values in Server Mode or if you use the RealTimeSource, access unbound column values;
  • View.DataContext.[YourPropertyName] - access a property in a grid’s ViewModel.

View Example: Build Binding Paths in WPF Data Grid Cells

The code sample below shows how to use a custom ComboBoxEdit within grid cells and bind its ItemsSource to a data row property:

xaml
<dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" ItemsSource="{Binding Items}">
    <dxg:GridColumn FieldName="Country"/>
    <dxg:GridColumn FieldName="City">
        <dxg:GridColumn.CellEditTemplate>
            <DataTemplate>
                <dxe:ComboBoxEdit x:Name="PART_Editor" ItemsSource="{Binding RowData.Row.Cities}"/>
            </DataTemplate>
        </dxg:GridColumn.CellEditTemplate>
    </dxg:GridColumn>
    <dxg:GridControl.View>
        <dxg:TableView/>
    </dxg:GridControl.View>
</dxg:GridControl>
csharp
public ObservableCollection<CountryCities> Items {
    get {
        if(this._Items == null) {
            this._Items = new ObservableCollection<CountryCities>();

            CountryCities usa = new CountryCities() {
                Country = "USA",
                Cities = new List<string> { "Washington, D.C.", "New York", "Los Angeles", "Las Vegas" },
                City = "Los Angeles"
            };
            this._Items.Add(usa);

            CountryCities germany = new CountryCities() {
                Country = "Germany",
                Cities = new List<string> { "Berlin", "Munich", "Frankfurt" },
                City = "Munich"
            };
            this._Items.Add(germany);

            CountryCities russia = new CountryCities() {
                Country = "Russia",
                Cities = new List<string> { "Moscow", "Saint-Petersburg" },
                City = "Moscow"
            };
            this._Items.Add(russia);
        }
        return this._Items;
    }
}
vb
Public ReadOnly Property Items As ObservableCollection(Of CountryCities)
    Get

        If Me._Items Is Nothing Then
            Me._Items = New ObservableCollection(Of CountryCities)()
            Dim usa As CountryCities = New CountryCities() With {
                .Country = "USA",
                .Cities = New List(Of String) From {
                    "Washington, D.C.",
                    "New York",
                    "Los Angeles",
                    "Las Vegas"
                },
                .City = "Los Angeles"
            }
            Me._Items.Add(usa)
            Dim germany As CountryCities = New CountryCities() With {
                .Country = "Germany",
                .Cities = New List(Of String) From {
                    "Berlin",
                    "Munich",
                    "Frankfurt"
                },
                .City = "Munich"
            }
            Me._Items.Add(germany)
            Dim russia As CountryCities = New CountryCities() With {
                .Country = "Russia",
                .Cities = New List(Of String) From {
                    "Moscow",
                    "Saint-Petersburg"
                },
                .City = "Moscow"
            }
            Me._Items.Add(russia)
        End If

        Return Me._Items
    End Get
End Property

Data Processing and EditSettings

When you use the CellEditTemplate, the editor specified in the EditSettings property is ignored. However, the EditSettings value affects the formatting settings, data processing (sorting, grouping, filtering, summary calculation), and export.

Events in CellTemplate

The GridControl utilizes virtualization to improve its performance. Virtualization reuses row, cell, and column visual elements, and changes their properties and data context.

Do not handle events related to changes in the EditValue , Text , Value , SelectedItem , and other value-related properties to avoid issues related to virtualization. Instead, use CellValueChangingEvent and CellValueChangedEvent.

Refer to this KB article for more information: How to avoid problems with the DXGrid virtualization mechanism.

The following code snippets (auto-collected from DevExpress Examples) contain references to the CellEditTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

wpf-data-grid-embed-a-richtextbox-into-grid-cells/CS/Window1.xaml#L43

xml
</dxg:GridColumn.CellDisplayTemplate>
<dxg:GridColumn.CellEditTemplate>
    <DataTemplate>

wpf-data-grid-filter-column-lookupedit-based-on-value-in-another-column/CS/MainWindow.xaml#L23

xml
</dxg:GridColumn.EditSettings>
<dxg:GridColumn.CellEditTemplate>
    <DataTemplate>

See Also

ColumnBase Class

ColumnBase Members

DevExpress.Xpf.Grid Namespace