Grid Control

Performance
Improvement
 Oct 09, 2020

This section provides recommendations that help you create high performance
WPF applications using the DevExpress Grid Control. These address the following
usage cases.

Scrolling Speed
Expanded Vertical Scrolling with Cascading Data

Updates
The Cascading Data Updates feature is aimed to speed up the GridControl's
performance while scrolling data rows. Initially, when an end user scrolls grid
rows, the grid synchronously loads all rows that should be displayed onscreen.
With the enabled cascading data updates, visible rows are asynchronously
loaded. To enable this feature, set
the TableView.AllowCascadeUpdate / TreeListView.AllowCascadeUpdate property
to true.
 To enable asynchronous update of group summaries, set
the TableView.AllowGroupSummaryCascadeUpdate property to true.

To provide visual feedback, the grid plays an animation after row data has been
retrieved from a data source. Multiple settings enable you to fine tune the
animation effect. These settings are:

 Animation Effect

Use the DataViewBase.RowAnimationKind property to specify what animation is

played while data rows are being asynchronously retrieved by the data source.

To provide a custom animation effect, set

the DataViewBase.RowAnimationKind property
to RowAnimationKind.Custom and handle
the DataViewBase.RowAnimationBegin event.

 Animation Duration

By default, the grid displays rows that are being loaded by animating their
opacity. Use the DataViewBase.RowOpacityAnimationDuration property to
specify the length of an animation in milliseconds.
 #Expanded Horizontal UI Virtualization
The horizontal UI virtualization feature improves the GridControl's performance
when the control cannot display all its columns on a screen. When horizontal
virtualization is enabled, the GridControl loads only the visible cells. Once
generated, cells are reused to render the newly loaded columns when the user
scrolls the grid horizontally.

As a result, the GridControl uses less memory and takes less time to load.

Note that horizontal virtualization slows down horizontal scrolling performance.

Set
the TableView.AllowHorizontalScrollingVirtualization or TreeListView.AllowHorizo
ntalScrollingVirtualization (for TreeListView) property to false to disable this
feature.

Lock GridControl Updates

The GridControl refreshes its UI and internal state each time its data source
collection is updated.

Depending on the size of your data source, the amount and frequency of
updates, it may be useful to lock the GridControl and update it after all the data
is updated.

Use
the DataControlBase.BeginDataUpdate and DataControlBase.EndDataUpdate met
hods to prevent the control's internal data updates:

1. Call the BeginDataUpdate method. The GridControl stops reacting on data

updates.

2. Perform data updates.

3. Call the EndDataUpdate method. The GridControl updates its UI to reflect all the

changes.
 NOTE
If a data source is modified from another thread (for example, using
Parallel.ForEach), the grid cannot process these changes correctly, and an
exception is thrown. To avoid possible issues, use one of the following
approaches:
 Use the Dispatcher.Invoke method to update the data source from the main
thread

 Enclose the changes within the BeginDataUpdate and EndDataUpdate method

calls
The code sample below demonstrates how to prevent GridControl from frequent
updates during multiple data changes.

 C#

public void PerformUpdates() {

gridControl.BeginDataUpdate();
// Perform massive data updates...
gridControl.EndDataUpdate();
}

Optimized Mode
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.

# 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.
o 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.
o 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 DevExpress.Xpf.Grid.RowControl

 XAML  XAML

{dxgt:GridRowThemeKey {dxgt:GridRowThemeKey
 ResourceKey=RowControlTemplate} ResourceKey=RowTemplate}

DevExpress.Xpf.Grid.GridRowContent

 XAML

{dxgt:GridRowThemeKey
ResourceKey=RowControlContainerTemplate}

DevExpress.Xpf.Grid.RowIndicatorControl DevExpress.Xpf.Grid.RowIndicator

 XAML  XAML

{dxgt:RowIndicatorThemeKey {dxgt:RowIndicatorThemeKey
ResourceKey=ItemTemplate} ResourceKey=RowIndicatorTemplate}
{dxgt:RowIndicatorThemeKey
ResourceKey=RowTemplate}

DevExpress.Xpf.Grid.DetailRowsIndentControl -

DevExpress.Xpf.Grid.RowOffsetPresenter -

 XAML

{dxgt:RowIndicatorThemeKey
ResourceKey=RowOffsetTemplate}

DevExpress.Xpf.Grid.GridCellContentPresenter DevExpress.Xpf.Grid.LightweightCellEditor

 XAML

{dxgt:GridRowThemeKey
ResourceKey=CellContentPresenterTemplate}

 XAML  XAML

{dxgt:GridRowThemeKey {dxgt:GridRowThemeKey
ResourceKey=FixedColumnsDelimiterTemplate} ResourceKey=FixedLineSeparatorTemplat

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.