The DevExpress Grid Control for Silverlight allows you to save the layout information to a data store and reload it when required. This layout information can include the visibility, position and size of visual elements, filter, sorting, grouping and summary information and more. You may also specify which settings to save and restore as well as whether to save it into the isolated storage or as a separate XML file.
This blog post (and a corresponding video – to be published) will serve as the first part of the tutorial, where we look at how to save the complete layout information in Isolated Storage and then reload it again at runtime. The next segment will cover how to specify only certain information to be saved and how to save it as an external XML file.
So, to get started, I’ll use a Silverlight Application Project that already has its Data Model and Domain Service created to be bound to the Products Table of the Sample Northwind Database. This database is located on a local copy of SQL Server Express 2008.
I like organization, therefore, let’s create the basic infrastructure of the application so that I can use buttons to save and restore the grid’s layout. To make this easy and flexible, I’ll use the DevExpress Layout Control to achieve this:
The XAML is as follows:
- <Grid x:Name="LayoutRoot" Background="White">
- <dxlc:LayoutControl Name="layoutControl1" Orientation="Vertical">
- <dxlc:LayoutGroup Header="Layout Persistence Options" Name="layoutGroup1"
- View="GroupBox" HorizontalAlignment="Stretch">
- <Button Content="Save Grid Layout" Height="23" HorizontalAlignment="Stretch"
- Name="button1" VerticalAlignment="Top" Click="button1_Click" />
- <Button Content="Load Grid Layout" Height="23" HorizontalAlignment="Stretch"
- Name="button2" VerticalAlignment="Top" Click="button2_Click" />
- </dxlc:LayoutGroup>
- <dxg:GridControl HorizontalAlignment="Stretch" Name="gridControl1"
- VerticalAlignment="Stretch" AutoPopulateColumns="True">
- <dxg:GridControl.View>
- <dxg:TableView AutoWidth="True" ShowFilterPanelMode="ShowAlways" />
- </dxg:GridControl.View>
- </dxg:GridControl>
- </dxlc:LayoutControl>
- </Grid>
There, the layout is done, the grid is bound to data, so let’s take a look at the code that’ll make it all work!
- ...
- using SLGridSerialization.Web;
- using System.ServiceModel.DomainServices.Client;
- ...
- using System.IO.IsolatedStorage;
- using System.IO;
-
- namespace SLGridSerialization
- {
- public partial class MainPage : UserControl
- {
- private ProductsContext _productsContext = new ProductsContext();
-
- string fileName = "gridLayout.xml";
- string layoutFolderName = "gridLayout";
-
- public MainPage()
- {
- InitializeComponent();
- LoadOperation<Products> loadOperation =
- _productsContext.Load(_productsContext.GetProductsQuery());
- gridControl1.DataSource = loadOperation.Entities;
- }
-
- private void button1_Click(object sender, RoutedEventArgs e)
- {
- IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication();
- if (!file.DirectoryExists(layoutFolderName))
- {
- file.CreateDirectory(layoutFolderName);
- }
- string fullPath = System.IO.Path.Combine(layoutFolderName, fileName);
- using (IsolatedStorageFileStream fs = file.CreateFile(fullPath))
- {
- gridControl1.SaveLayoutToStream(fs);
- }
- }
-
- private void button2_Click(object sender, RoutedEventArgs e)
- {
- IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication();
- string fullPath = System.IO.Path.Combine(layoutFolderName, fileName);
- using (IsolatedStorageFileStream fs =
- file.OpenFile(fullPath, FileMode.Open, FileAccess.Read))
- {
- gridControl1.RestoreLayoutFromStream(fs);
- }
- }
- }
- }
Looks like a lot of code doesn’t it? It’s pretty simple really... all that’s required to save/load the layout to the file stream are the SaveLayoutToStream and SaveLayoutFromStream methods of the grid control. The rest is code to create the “plumbing” for the application.
And that’s it! When you run the application, you can customize the grid, apply filters, sorting, grouping, etc... and save the information to the isolated storage. You can then undo or change your customization and restore the layout information based on the XML file saved in the “gridLayout” folder of the user store.
You may also download a similar example from CodeCentral: http://www.devexpress.com/Support/Center/e/E2643.aspx