Serialization and Deserialization in UWP DataGrid (SfDataGrid)

31 May 202319 minutes to read

SfDataGrid allows you to serialize and deserialize the SfDataGrid settings using DataContractSerializer.

Serialization

You can serialize the SfDataGrid by using SfDataGrid.Serialize method which exports the current DataGrid control properties to an XML file.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
this.dataGrid.Serialize(storageFile);

Serialize as Stream

You can store the SfDataGrid settings as Stream using Serialize method by passing the stream.

C#

FileStream stream = null;
string directory = @"Pictures\DataGrid.xml";
await Task.Run(() =>
{
    stream = new FileStream(directory, FileMode.Create);
});
this.dataGrid.Serialize(stream);

Serialization options

SfDataGrid serialization operation can be customized by passing SerializationOptions instance as an argument to Serialize method.

Serialize sorting

By default, SfDataGrid allows you to serialize the sorting operation. You can disable the sorting serialization by setting the SerializationOptions.SerializeSorting to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);

SerializationOptions options = new SerializationOptions();
options.SerializeSorting = false;

this.dataGrid.Serialize(storageFile, options);

Serialize grouping

By default, SfDataGrid allows you to serialize the grouping operation. You can disable the grouping serialization by setting the SerializationOptions.SerializeGrouping to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
SerializationOptions options = new SerializationOptions();
options.SerializeGrouping = false;
this.dataGrid.Serialize(storageFile, options);

Serialize filtering

By default, SfDataGrid allows you to serialize the filtering operation. You can disable the filtering serialization by setting the SerializationOptions.SerializeFiltering to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
SerializationOptions options = new SerializationOptions();
options.SerializeFiltering = false;
this.dataGrid.Serialize(storageFile, options);

Serialize columns

By default, SfDataGrid allows you to serialize the columns manipulation operation. You can disable the columns serialization by setting the SerializationOptions.SerializeColumns to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
SerializationOptions options = new SerializationOptions();
options.SerializeColumns = false;
this.dataGrid.Serialize(storageFile, options);

Serialize summaries

By default, SfDataGrid allows you to serialize the caption summary, group summary and table summary settings in SfDataGrid. You can disable the summaries serialization by setting SerializationOptions.SerializeCaptionSummary, SerializationOptions.SerializeGroupSummaries, SerializationOptions.SerializeTableSummaries properties to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
SerializationOptions options = new SerializationOptions();
options.SerializeCaptionSummary = false;
options.SerializeGroupSummaries = false;
options.SerializeTableSummaries = false;
this.dataGrid.Serialize(storageFile, options);

Serialize stacked headers

By default, SfDataGrid allows you to serialize the stack headers operation. You can disable the stack headers serialization by setting the SerializationOptions.SerializeStackedHeaders to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
SerializationOptions options = new SerializationOptions();
options.SerializeStackedHeaders = false;
this.dataGrid.Serialize(storageFile, options);

Serialize Details View

By default, SfDataGrid allows you to serialize the DetailsViewDefinition. You can disable the DetailsViewDefinition serialization by setting the SerializationOptions.SerializeDetailsViewDefinition to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
SerializationOptions options = new SerializationOptions();
options.SerializeDetailsViewDefinition = false;
this.dataGrid.Serialize(storageFile, options);

Serialize unbound rows

By default, SfDataGrid allows you to serialize the unbound rows settings. You can disable the unbound rows serialization by setting the SerializationOptions.SerializeUnBoundRows to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.CreateFileAsync("DataGrid.xml", CreationCollisionOption.ReplaceExisting);
SerializationOptions options = new SerializationOptions();
options.SerializeUnBoundRows = false;
this.dataGrid.Serialize(storageFile, options);

Deserialization

You can deserialize the SfDataGrid setting by using SfDataGrid.Deserialize method which reconstructs the SfDataGrid based on the setting in the stored XML file.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
this.dataGrid.Deserialize(storageFile);

Deserialize from Stream

You can deserialize the SfDataGrid settings from Stream using Deserialize method.

C#

FileStream stream = null;
string directory = @"Pictures\DataGrid.xml";
await Task.Run(() =>
{
    stream = new FileStream(directory, FileMode.Open);
});
this.dataGrid.Deserialize(stream);

Deserialization options

Deserialization operation can be customized by passing DeserializationOptions instance as an argument to Deserialize method.

Deserialize sorting

By default, SfDataGrid allows you to deserialize the sorting operation. You can disable the sorting deserialization by setting the DeserializationOptions.DeserializeSorting to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeSorting = false;
this.dataGrid.Deserialize(storageFile, options);

Deserialize grouping

By default, SfDataGrid allows you to deserialize the grouping operation. You can disable the grouping deserialization by setting the DeserializationOptions.DeserializeGrouping to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeGrouping = false;
this.dataGrid.Deserialize(storageFile, options);

Deserialize filtering

By default, SfDataGrid allows you to deserialize the filtering. you can disable the filtering deserialization by setting DeserializationOptions.DeserializeFiltering to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeFiltering = false;
this.dataGrid.Deserialize(storageFile, options);

Deserialize columns

By default, SfDataGrid allows you to deserialize the columns manipulation operations. You can disable the columns deserialization by setting the DeserializationOptions.DeserializeColumns to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeColumns = false;
this.dataGrid.Deserialize(storageFile, options);

Deserialize summaries

By default, SfDataGrid allows you to deserialize the group summary, caption summary and table summary settings. You can disable the summaries deserialization by setting DeserializationOptions.DeserializeCaptionSummary, DeserializationOptions.DeserializeGroupSummaries, DeserializationOptions.DeserializeTableSummaries properties to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeCaptionSummary = false;
options.DeserializeGroupSummaries = false;
options.DeserializeTableSummaries = false;
this.dataGrid.Deserialize(storageFile, options);

Deserialize stacked headers

By default, SfDataGrid allows you to deserialize the stack headers. You can disable the stacked headers deserialization by setting the DeserializationOptions.DeserializeStackedHeaders to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeStackedHeaders = false;
this.dataGrid.Deserialize(storageFile, options);

Deserialize Details View

By default, SfDataGrid allows you to deserialize the DetailsViewDefinition. You can disable the DetailsViewDefinition deserialization by setting the DeserializationOptions.DeserializeDetailsViewDefinition to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeDetailsViewDefinition = false;
this.dataGrid.Deserialize(storageFile, options);

Deserialize unbound rows

By default, SfDataGrid allows you to deserialize the unbound rows settings. You can disable the unbound rows deserialization by setting the DeserializationOptions.DeserializeUnBoundRows to false.

C#

var folder = ApplicationData.Current.LocalFolder;
var storageFile = await folder.GetFileAsync("DataGrid.xml");
DeserializationOptions options = new DeserializationOptions();
options.DeserializeUnBoundRows = false;
this.dataGrid.Deserialize(storageFile, options);

Customizing Serialization and Deserialization Operations

SfDataGrid allows you to customize the serialization and deserialization operations by deriving SerializationController class and override the necessary virtual methods.

Serialize custom column

By default, the unknown(custom) column types are serialized as GridTextColumn type. If you want to serialize the custom column, you have to add custom column type into predefined types.

In the below code snippet, TimePickerColumn is created .For more information about creating custom column refer here.

C#

public class TimePickerColumn : GridColumn
{
    
    public TimePickerColumn()
    {
        SetCellType("TimePicker");
    }
}

In the below code snippet, the TimePickerColumn is defined in SfDataGrid.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid"
                        AutoGenerateColumns="False"
                        ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
       <local:TimePickerColumn HeaderText="Delivered Time" MappingName="OrderDate" />
    </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

To serialize the above TimePickerColumn, follow the below steps.

1.Create a class derived from SerializableGridColumn and define the custom column properties in SerializableCustomGridColumn class.

C#

[DataContract(Name = "SerializableCustomGridColumn")]

public class SerializableCustomGridColumn:SerializableGridColumn
{
}

2.Create a new class named as SerializationControllerExt by overriding SerializationController class.

C#

dataGrid.SerializationController = new SerializationControllerExt(dataGrid);

public class SerializationControllerExt : SerializationController
{

    public SerializationControllerExt(SfDataGrid dataGrid)
            : base(dataGrid)
    {
    }
}

3.You can get the custom column property settings for serialization by overriding the GetSerializableGridColumn virtual method.

C#

public class SerializationControllerExt : SerializationController
{

    public SerializationControllerExt(SfDataGrid dataGrid)
            : base(dataGrid)
    {
    }

    protected override SerializableGridColumn GetSerializableGridColumn(GridColumn column)
    {
    
        if (column.MappingName == "OrderDate")
        {
            return new SerializableCustomGridColumn();
        }
        return base.GetSerializableGridColumn(column);
    }
    }

4.Store the custom column property settings during serialization by overriding the StoreGridColumnProperties virtual method.

C#

public class SerializationControllerExt : SerializationController
{
   
   public SerializationControllerExt(SfDataGrid dataGrid)
            : base(dataGrid)
   {
   }
  
   protected override void StoreGridColumnProperties(GridColumn column, SerializableGridColumn serializableColumn)
   {
        base.StoreGridColumnProperties(column, serializableColumn);
   }
}

5.Add the custom column in to known column types by overriding the KnownTypes virtual method.

C#

public class SerializationControllerExt : SerializationController
{
    public SerializationControllerExt(SfDataGrid dataGrid)
            : base(dataGrid)
    {
    }

    public override Type[] KnownTypes()
    {
        var types = base.KnownTypes();
        var list = types.Cast<Type>().ToList();
        list.Add(typeof(SerializableCustomGridColumn));
        return list.ToArray();
    }
}

6.During deserialization, you can get the custom column settings from SerializableGridColumn by overriding GetGridColumn virtual method.

C#

public class SerializationControllerExt : SerializationController
{
    public SerializationControllerExt(SfDataGrid dataGrid)
        : base(dataGrid)
    {
    }

    protected override GridColumn GetGridColumn(SerializableGridColumn serializableColumn)
    {
     
        if (serializableColumn is SerializableCustomGridColumn)
            return new TimePickerColumn();
            
        return base.GetGridColumn(serializableColumn);
    }
        
}

7.Now, restore the custom column settings from SerializableGridColumn by overriding the RestoreColumnProperties virtual method.

C#

public class SerializationControllerExt : SerializationController
{
    public SerializationControllerExt(SfDataGrid dataGrid)
            : base(dataGrid)
    {
    }

    protected override void RestoreColumnProperties(SerializableGridColumn  serializableColumn, GridColumn column)
   { 
        base.RestoreColumnProperties(serializableColumn, column);
   }
}

You can download the sample demo here.

Serializing template column content

By default, you cannot serialize the template content in SfDataGrid. This is the default behavior during Serialization and Deserialization operation.

XAML

<Application.Resources>
    <DataTemplate x:Key="cellTemplate">
        <Button Content="{Binding Value}" />
    </DataTemplate>
</Application.Resources>


<syncfusion:SfDataGrid x:Name="dataGrid"
                       AutoGenerateColumns="False"
                       ItemsSource="{Binding Orders}">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTemplateColumn CellTemplate="{StaticResource cellTemplate}"
                                       HeaderText="Order ID"
                                       MappingName="OrderID"
                                       SetCellBoundValue="True" />        
    </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

If you want to serialize and deserialize the template content, you have to reconstruct the same template during deserialization in RestoreColumnProperties method.

C#

this.dataGrid.SerializationController = new SerializationControllerExt(this.dataGrid);

public class SerializationControllerExt : SerializationController
{
 
    public SerializationControllerExt(SfDataGrid grid)
        : base(grid)
    {
    }
        
    protected override void RestoreColumnProperties(SerializableGridColumn serializableColumn, GridColumn column)
    {
        base.RestoreColumnProperties(serializableColumn, column);
    
        if (column is GridTemplateColumn)
        {
    
            if (column.MappingName == "OrderID")
            {
                column.CellTemplate = App.Current.Resources["TemplateColumn"] as DataTemplate;
            }
        }
    }
}

You can download the sample demo here.