Optimized Mode

• Jun 06, 2022
• 4 minutes to read

The GridControl uses lightweight templates to render its UI elements in optimized mode. This mode improves scrolling performance and reduces subsequent load times after loading the first instance.

The optimized mode is enabled by default for all supported GridControl editors (see the In-place Editing section for the editors’ list). To disable the optimized mode for compatibility purposes, specify the UseLightweightTemplates property. Refer to the following section for more information: Limitations.

In-place Editing

The GridControl’s cell displays an in-placed data editor in edit mode when an end user edits a cell. Otherwise, the GridControl’s cell displays its value in one of the following ways:

• using the in-place editor in display mode
• using the lightweight DevExpress.Xpf.Editors.InplaceBaseEdit editor (without a default visual tree). This approach is used in optimized mode.

The following editors support the optimized mode.

• ButtonEdit
• PopupCalcEdit
• CheckEdit
• ComboBoxEdit
• DateEdit
• LookUpEdit
• PopupBaseEdit
• SpinEdit
• TextEdit

Optimized in-place editors in cell templates

Place a DevExpress.Xpf.Editors.InplaceBaseEdit editor with the x:Name property set to “PART_Editor“ inside the cell template to use an optimized cell editor in a custom cell template. The column’s EditSettings property value provides the editor’s settings.

The code sample below demonstrates a GridControl that uses a custom cell template to render its Id column cells. When an end-user edits this column’s values, the SpinEdit control is used to edit column’s values. In display mode, the cell values are rendered using the optimized editor.

XAML

<dxg:GridControl ItemsSource="{Binding Items}" Name="grid"> 
    <dxg:GridControl.Resources>
        <!-- Template used to render cell values -->
        <DataTemplate x:Key="optimizedCellTemplate">
            <Border Background="Yellow" >
                <dxe:InplaceBaseEdit x:Name="PART_Editor"/>
            </Border>
        </DataTemplate>
    </dxg:GridControl.Resources>

    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="Name" />
        <dxg:GridColumn FieldName="Age" CellTemplate="{StaticResource optimizedCellTemplate}">
            <dxg:GridColumn.EditSettings>
                <!-- Specifies the column editor settings -->
                <dxe:SpinEditSettings />
            </dxg:GridColumn.EditSettings>
        </dxg:GridColumn>
    </dxg:GridControl.Columns>
</dxg:GridControl>

Applying styles to optimized editors

The Optimized mode does not support implicit editor styles. You can apply implicit styles in the following ways:

• Apply an implicit style to the DevExpress.Xpf.Editors.InplaceBaseEdit that is rendered instead of an actual editor.

  XAML

  <dxg:GridControl Name="grid" ItemsSource="{Binding Items}">
      <dxg:GridControl.Resources>
          <Style TargetType="dxe:InplaceBaseEdit">
              <Setter Property="Foreground" Value="DarkOrange" />
          </Style>
      </dxg:GridControl.Resources>
      <dxg:GridControl.Columns>
          <dxg:GridColumn FieldName="Id" />
          <dxg:GridColumn FieldName="FirstName" />
          <dxg:GridColumn FieldName="LastName" />
      </dxg:GridControl.Columns>
  </dxg:GridControl>
  

• Use the CellTemplate (see the Optimized in-place editors in cell templates section above) to create the required editor, and use the DevExpress.Xpf.Editors.InplaceBaseEdit‘s EditCoreStyle property to specify its custom style in edit mode.

  XAML

  <dxg:GridControlItemsSource="{Binding Items}">
      <dxg:GridControl.Resources>
          <Style x:Key="activeSpinEditStyle" TargetType="dxe:SpinEdit">
              <Setter Property="MaxValue" Value="100" />
              <Setter Property="Mask" Value="n0" />
          </Style>
          <DataTemplate x:Key="optimizedCellTemplate">
              <Border BorderThickness="0" Background="LightGray" >
                  <dxe:InplaceBaseEdit x:Name="PART_Editor" EditCoreStyle="{StaticResource activeSpinEditStyle}"/>
              </Border>
          </DataTemplate>
      </dxg:GridControl.Resources>
  
      <dxg:GridControl.Columns>
          <dxg:GridColumn FieldName="Name" />
          <dxg:GridColumn FieldName="Age" CellTemplate="{StaticResource optimizedCellTemplate}">
              <dxg:GridColumn.EditSettings>
                  <dxe:SpinEditSettings />
              </dxg:GridColumn.EditSettings>
          </dxg:GridColumn>
      </dxg:GridControl.Columns>
  </dxg:GridControl>
  

Note

In optimized mode, the ShowEditor() method sets the ActiveEditor property value asynchronously. To access the active editor, use the ShownEditor‘s Editor property. In TreeListView, use the ShownEditor‘s Editor property to access the active editor.

Row and Cell Resources

When the GridControl functions in optimized mode, it uses a special lightweight visual elements and templates. Certain custom styles and resources can only be used in optimized mode. Below is a table with both modes’ corresponding elements.

Unoptimized Mode	Optimized Mode
DevExpress.Xpf.Grid.GridRow {dxgt:GridRowThemeKey ResourceKey=RowControlTemplate} DevExpress.Xpf.Grid.GridRowContent {dxgt:GridRowThemeKey ResourceKey=RowControlContainerTemplate}	DevExpress.Xpf.Grid.RowControl {dxgt:GridRowThemeKey ResourceKey=RowTemplate}
DevExpress.Xpf.Grid.RowIndicatorControl {dxgt:RowIndicatorThemeKey ResourceKey=ItemTemplate} {dxgt:RowIndicatorThemeKey ResourceKey=RowTemplate}	DevExpress.Xpf.Grid.RowIndicator {dxgt:RowIndicatorThemeKey ResourceKey=RowIndicatorTemplate}
DevExpress.Xpf.Grid.DetailRowsIndentControl	-
DevExpress.Xpf.Grid.RowOffsetPresenter {dxgt:RowIndicatorThemeKey ResourceKey=RowOffsetTemplate}	-
DevExpress.Xpf.Grid.GridCellContentPresenter {dxgt:GridRowThemeKey ResourceKey=CellContentPresenterTemplate}	DevExpress.Xpf.Grid.LightweightCellEditor
{dxgt:GridRowThemeKey ResourceKey=FixedColumnsDelimiterTemplate}	{dxgt:GridRowThemeKey ResourceKey=FixedLineSeparatorTemplate}
DevExpress.Xpf.Grid.GroupRowContentPresenter	DevExpress.Xpf.Grid.GroupRowControl

You should change the following target types to use the Optimized mode:

For the RowStyle style, set the target type to DevExpress.Xpf.Grid.RowControl.

For CellStyle style, set the target type to DevExpress.Xpf.Grid.LightweightCellEditor.

The base style is as follows.

XAML

{dxgt:GridRowThemeKey ResourceKey=LightweightCellStyle}

Note

When the view‘s cell or row styles and templates are specified before setting the UseLightweightTemplates value, an exception occurs. You can avoid exceptions using any of the following workarounds:

• Specify the view‘s cell or row styles and templates after setting the UseLightweightTemplates value.
• Set the view’s static DisableOptimizedModeVerification property to true.

Limitations

• TableView.DefaultDataRowTemplate and TableView.RowDecorationTemplate are not supported in optimized mode.
• TableView.RowDetailsTemplate and TableView.RowDetailsTemplateSelector are only supported in optimized mode.
• When the TreeList is set to HierarchicalDataTemplate mode using the TreeListView.TreeDerivationMode property, optimized mode is automatically disabled.