Save and Restore Layout

  • 6 minutes to read

The GridControl allows you to save the information on its layout to a data store (an XML file or stream) and restore it when required. This information may include the visibility, position and size of visual elements, filter, sorting, grouping and summary information, etc. Multiple options allow you to specify which settings need to be saved and restored when the layout is saved/restored.

To save the grid's layout, use the DataControlBase.SaveLayoutToStream or DataControlBase.SaveLayoutToXml methods.

To restore the layout, use the DataControlBase.RestoreLayoutFromStream or DataControlBase.RestoreLayoutFromXml method.

NOTE

To correctly save and restore the grid layout, grid columns and bands should be uniquely identified.

Use the x:Name attribute to uniquely identify grid bands and grid columns.

Set the DataControlBase.UseFieldNameForSerialization property to true (it is set to true by default) to uniquely identify the grid columns and use their bound field name as a unique value.

Layout Options

The DXSerializer.StoreLayoutMode specifies which settings should be saved. The property values:

  • None - nothing is saved or restored.
  • All - all settings are saved/restored. These include the visual, data-aware, behavior, customization options, etc.
  • UI (Default Value) - only those settings that are marked with the GridUIProperty attribute are saved/restored. These include visibility state, position and size of columns, sorting and grouping settings, summary information, etc.

To manually control which settings should be serialized, handle the DXSerializer.AllowProperty event:

foreach (GridColumn column in grid.Columns)
    column.AddHandler(DXSerializer.AllowPropertyEvent, new AllowPropertyEventHandler(column_AllowProperty));
grid.SaveLayoutToXml("d:\\layout.xml");

// ...

void column_AllowProperty(object sender, AllowPropertyEventArgs e) {
    e.Allow = e.DependencyProperty == GridColumn.ActualWidthProperty ||
              e.DependencyProperty == GridColumn.FieldNameProperty ||
              e.DependencyProperty == GridColumn.VisibleProperty;
}
NOTE

The GridControl does not support serialization of the *Style and *Template properties because of the following points:

  • There is no general way to serialize such complex objects like Style or Template.
  • Serialization is used to save/restore properties that can be changed by an end user, but there is no capability to change Style or Template at runtime (unless you provide this functionality manually).

The GridControl does not support serialization of the applied filter if it contains custom or enumeration objects.

Layout Loading Specifics

There are two options that specify what to do with the columns that exist in the layout being loaded, but not in the current grid. By default, the columns that exist in the current grid but not in the layout being loaded are retained. Also, the columns that exist in the layout being loaded but do not exist in the current grid's layout are destroyed. To change this behavior, use the DataControlSerializationOptions.AddNewColumns and DataControlSerializationOptions.RemoveOldColumns properties.

Example

This example shows how to save the grid layout to a memory stream. To do this, click the 'Save Layout' button. Once saved, the grid layout can then be restored by clicking the 'Restore Layout' button.

<UserControl x:Class="DXGrid_GridLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
    xmlns:local="clr-namespace:DXGrid_GridLayout" >

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <dxg:GridControl x:Name="grid" dx:DXSerializer.SerializationID="grid" 
                         dx:DXSerializer.StoreLayoutMode="All" 
                         dxg:GridSerializationOptions.AddNewColumns="False" 
                         dxg:GridSerializationOptions.RemoveOldColumns="False">
            <dxg:GridControl.Columns>
                <dxg:GridColumn x:Name="colIssueName" FieldName="IssueName" />
                <dxg:GridColumn x:Name="colIssueType" FieldName="IssueType" />
                <dxg:GridColumn x:Name="colPrivate" FieldName="IsPrivate">Private</dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" />
            </dxg:GridControl.View>
        </dxg:GridControl>

        <StackPanel Grid.Row="1" Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <Button Margin="1" Click="Button_Click">AddNewColumn</Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button Margin="1" Click="SaveButton_Click">Save Layout</Button>
                <Button x:Name="restoreButton" Margin="1" 
                        Click="LoadButton_Click" IsEnabled="{Binding IsLayoutSaved}">
                        Restore Layout
                </Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;

namespace DXGrid_GridLayout {
    public partial class MainPage : UserControl {
        public static readonly DependencyProperty IsLayoutSavedProperty =
            DependencyProperty.Register("IsLayoutSaved", typeof(bool), typeof(MainPage), null);
        public bool IsLayoutSaved {
            get { return (bool)GetValue(IsLayoutSavedProperty); }
            set { SetValue(IsLayoutSavedProperty, value); }
        }
        MemoryStream layoutStream;
        public MainPage() {
            DataContext = this;
            InitializeComponent();
            IsLayoutSaved = false;
            grid.ItemsSource = IssueList.GetData();
        }

        private void SaveButton_Click(object sender, RoutedEventArgs e) {
            layoutStream = new MemoryStream();
            grid.SaveLayoutToStream(layoutStream);
            IsLayoutSaved = true;
        }
        private void LoadButton_Click(object sender, RoutedEventArgs e) {
            layoutStream.Position = 0;
            grid.RestoreLayoutFromStream(layoutStream);
        }
        private void Button_Click(object sender, RoutedEventArgs e) {
            grid.Columns.Add(new DevExpress.Xpf.Grid.GridColumn() { FieldName = "IsPrivate" });
        }
    }
    public class IssueList {
        static public List<IssueDataObject> GetData() {
            List<IssueDataObject> data = new List<IssueDataObject>();
            data.Add(new IssueDataObject() {
                IssueName = "Transaction History",
                IssueType = "Bug", IsPrivate = true
            });
            data.Add(new IssueDataObject() {
                IssueName = "Ledger: Inconsistency",
                IssueType = "Bug", IsPrivate = false
            });
            data.Add(new IssueDataObject() {
                IssueName = "Data Import",
                IssueType = "Request", IsPrivate = false
            });
            data.Add(new IssueDataObject() {
                IssueName = "Data Archiving",
                IssueType = "Request", IsPrivate = true
            });
            return data;
        }
    }

    public class IssueDataObject {
        public string IssueName { get; set; }
        public string IssueType { get; set; }
        public bool IsPrivate { get; set; }
    }
}

Restore State On Source Change

Set the DataControlBase.RestoreStateOnSourceChange property to true to retain the control's select, focus, check, and group states when a new ItemsSource is assigned.

<dxg:GridControl Name="grid" ItemsSource="{Binding Items}" AutoGenerateColumns="AddNew" SelectionMode="Row" 
                 RestoreStateOnSourceChange="True" RestoreStateKeyFieldName="ID">
    <dxg:GridControl.View>
        <dxg:TableView />
    </dxg:GridControl.View>
</dxg:GridControl>
public class ViewModel : ViewModelBase {
    public ObservableCollection<Item> Items {
        get { return GetValue<ObservableCollection<Item>>(nameof(Items)); }
        private set { SetValue(value, nameof(Items)); }
    }
}
public class Item : BindableBase {
    public string Name {
        get { return GetValue<string>(nameof(Name)); }
        set { SetValue(value, nameof(Name)); }
    }
    public int ID { 
        get { return GetValue<int>(nameof(ID)); }
        set { SetValue(value, nameof(ID)); }
    }      
    public int GroupID {
        get { return GetValue<int>(nameof(GroupID)); }
        set { SetValue(value, nameof(GroupID)); }
    }
}