How to: Edit a Cell with the Cell Editing Template

  • 3 minutes to read

screenshot

The PivotGrid control does not support the data editing functionality out of the box because it displays aggregated data. This example demonstrates how to implement a custom CellTemplate with the in-place editing functionality.

This example implements the base editing features. It does not allow going to the next cell by pressing the tab or arrow keys.

The PivotGridEditHelper class implements the in-place cell editor. When editing is finished, the editor calls the pvotGridControl1_OnCellEdit method. This method retrieves the underlying data for the edited cell and adjusts them so that their sum equals the new value entered in the cell.

NOTE

The complete sample project How to Edit a Cell with the Cell Editing Template is available in the DevExpress Examples repository.

<dx:ThemedWindow
    x:Class="HowToEditCell.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:dxpg="http://schemas.devexpress.com/winfx/2008/xaml/pivotgrid"
    xmlns:local="clr-namespace:HowToEditCell"
    Width="800"
    Height="450"
    Loaded="Window_Loaded"
    Title="How to Edit Cell">

    <Grid>
        <dxpg:PivotGridControl
            x:Name="pivotGridControl1"
            local:PivotGridEditHelper.OnCellEdit="pivotGridControl1_OnCellEdit"
            local:PivotGridEditHelper.UseHelper="{Binding RelativeSource={RelativeSource Self}}">
            <dxpg:PivotGridControl.Fields>
                <dxpg:PivotGridField
                    x:Name="fieldSales"
                    Area="DataArea"
                    Caption="Product Sales"
                    FieldName="ExtendedPrice">
                    <dxpg:PivotGridField.CellTemplate>
                        <DataTemplate>
                            <dxe:TextEdit
                                x:Name="edit"
                                HorizontalContentAlignment="Right"
                                DisplayFormatString="c2"
                                EditMode="InplaceInactive"
                                EditValue="{Binding Value, Mode=OneWay}"
                                local:PivotGridEditHelper.LostFocusCommand="{x:Static local:PivotGridEditHelper.Enter}"
                                Mask="[0-9]*\.[0-9]{0,2}"
                                MaskType="RegEx">
                                <dxe:TextEdit.InputBindings>
                                    <KeyBinding
                                        Key="Enter"
                                        Command="{x:Static local:PivotGridEditHelper.Enter}"
                                        CommandParameter="{Binding ElementName=edit}" />
                                    <MouseBinding
                                        Command="{x:Static local:PivotGridEditHelper.StartEdit}"
                                        CommandParameter="{Binding ElementName=edit}"
                                        MouseAction="LeftClick" />
                                </dxe:TextEdit.InputBindings>
                            </dxe:TextEdit>
                        </DataTemplate>
                    </dxpg:PivotGridField.CellTemplate>
                </dxpg:PivotGridField>
                <dxpg:PivotGridField
                    x:Name="fieldYear"
                    AllowFilter="False"
                    Area="ColumnArea"
                    Caption="Year"
                    FieldName="OrderDate"
                    GroupInterval="DateYear" />
                <dxpg:PivotGridField
                    x:Name="fieldCategoryName"
                    Area="RowArea"
                    AreaIndex="0"
                    Caption="Category"
                    FieldName="CategoryName" />
                <dxpg:PivotGridField
                    x:Name="fieldProductName"
                    Area="RowArea"
                    AreaIndex="1"
                    Caption="Product"
                    FieldName="ProductName" />
                <dxpg:PivotGridField
                    Area="DataArea"
                    Caption="Percent Of Column"
                    CellFormat="p"
                    FieldName="ExtendedPrice"
                    Name="fieldExtendedPrice2"
                    SummaryDisplayType="PercentOfColumn" />
            </dxpg:PivotGridControl.Fields>
        </dxpg:PivotGridControl>
    </Grid>

</dx:ThemedWindow>