Skip to content

Commit e89a228

Browse files
Gowtham-SF4769Gowtham-SF4769
committed
MAUI-978225-[others][maui]: updated README file.
1 parent 4133857 commit e89a228

File tree

1 file changed

+148
-1
lines changed

1 file changed

+148
-1
lines changed

‎README.md‎

Lines changed: 148 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,149 @@
11
# How-to-Serialize-template-column-content-in-.NET-MAUI-DataGrid--SfDataGrid-
2-
This demo shows how to Serialize template column content in .NET MAUI DataGrid (SfDataGrid)?
2+
3+
This sample shows how to serialize and deserialize template column content in the .NET MAUI DataGrid (SfDataGrid).
4+
5+
The example demonstrates placing a `DataGridTemplateColumn` with a `CellTemplate` (defined in XAML resources), wiring a custom `DataGridSerializationController` to preserve template column configuration, and using simple Serialize/Deserialize buttons to write/read the grid state to an XML file in app data.
6+
7+
**Refer to the official UG for more details:**
8+
9+
- [Getting Started with .NET MAUI DataGrid](https://help.syncfusion.com/maui/datagrid/getting-started)
10+
- [Serialization and Deserialization in .NET MAUI DataGrid (SfDataGrid)](https://help.syncfusion.com/maui/datagrid/serialization)
11+
12+
## XAML
13+
14+
The grid includes a `DataGridTemplateColumn` whose `CellTemplate` is stored in page resources with x:Key="cellTemplate".
15+
16+
```xml
17+
<ContentPage.BindingContext>
18+
<local:EmployeeViewModel x:Name="viewModel" />
19+
</ContentPage.BindingContext>
20+
21+
<ContentPage.Resources>
22+
<ResourceDictionary>
23+
<DataTemplate x:Key="cellTemplate">
24+
<Button Text="Test" />
25+
</DataTemplate>
26+
</ResourceDictionary>
27+
</ContentPage.Resources>
28+
29+
<Grid ColumnDefinitions="*,300"
30+
RowDefinitions="Auto,Auto">
31+
<syncfusion:SfDataGrid x:Name="dataGrid"
32+
Grid.Column="0"
33+
Grid.Row="0"
34+
AllowGroupExpandCollapse="True"
35+
ColumnWidthMode="Auto"
36+
GridLinesVisibility="Both"
37+
HeaderGridLinesVisibility="Both"
38+
AutoGenerateColumnsMode="None"
39+
ItemsSource="{Binding Employees}">
40+
41+
<syncfusion:SfDataGrid.Columns>
42+
<syncfusion:DataGridNumericColumn MappingName="EmployeeID"
43+
HeaderText="Employee ID" />
44+
<syncfusion:DataGridTextColumn MappingName="Title"
45+
HeaderText="Designation" />
46+
<syncfusion:DataGridDateColumn MappingName="HireDate"
47+
HeaderText="Hire Date" />
48+
<syncfusion:DataGridTemplateColumn MappingName="Name"
49+
HeaderText="Employee Name"
50+
CellTemplate="{StaticResource cellTemplate}" />
51+
52+
</syncfusion:SfDataGrid.Columns>
53+
</syncfusion:SfDataGrid>
54+
55+
<syncfusion:SfDataGrid x:Name="dataGrid1"
56+
Grid.Column="0"
57+
Grid.Row="1"
58+
ItemsSource="{Binding Employees}">
59+
</syncfusion:SfDataGrid>
60+
61+
<VerticalStackLayout Grid.Column="1">
62+
<Grid RowDefinitions="80,80">
63+
<Button Text="Serialize"
64+
Grid.Row="0"
65+
Margin="0,0,0,20"
66+
WidthRequest="150"
67+
Clicked="Button_Clicked" />
68+
<Button Text="Deserialize"
69+
Grid.Row="1"
70+
Margin="0,20,0,0"
71+
WidthRequest="150"
72+
Clicked="Button_Clicked_1" />
73+
</Grid>
74+
</VerticalStackLayout>
75+
</Grid>
76+
```
77+
78+
## C#
79+
80+
To support serialization and restore the `CellTemplate` after deserialization, the sample adds a small extension of `DataGridSerializationController` that looks up the template in the page `ResourceDictionary` and reassigns it when restoring column properties.
81+
82+
83+
```csharp
84+
public MainPage()
85+
{
86+
InitializeComponent();
87+
this.dataGrid.SerializationController = new SerializationControllerExt(this.dataGrid, Resources);
88+
this.dataGrid1.SerializationController = new SerializationControllerExt(this.dataGrid1, Resources);
89+
}
90+
91+
private void Button_Clicked(object sender, EventArgs e)
92+
{
93+
string localPath = Path.Combine(FileSystem.AppDataDirectory, "DataGrid.xml");
94+
using (var file = File.Create(localPath))
95+
{
96+
dataGrid.Serialize(file);
97+
}
98+
}
99+
100+
private void Button_Clicked_1(object sender, EventArgs e)
101+
{
102+
string localPath = Path.Combine(FileSystem.AppDataDirectory, "DataGrid.xml");
103+
104+
using (var file = File.Open(localPath, FileMode.Open))
105+
{
106+
dataGrid1.Deserialize(file);
107+
}
108+
}
109+
110+
public class SerializationControllerExt : DataGridSerializationController
111+
{
112+
private readonly ResourceDictionary _pageResources;
113+
114+
public SerializationControllerExt(SfDataGrid grid, ResourceDictionary pageResources)
115+
: base(grid)
116+
{
117+
_pageResources = pageResources;
118+
}
119+
120+
protected override void RestoreColumnProperties(SerializableDataGridColumn serializableColumn, DataGridColumn column)
121+
{
122+
base.RestoreColumnProperties(serializableColumn, column);
123+
124+
if (column is DataGridTemplateColumn templateColumn &&
125+
string.Equals(templateColumn.MappingName, "Name", StringComparison.Ordinal))
126+
{
127+
if (_pageResources.TryGetValue("cellTemplate", out var template) &&
128+
template is DataTemplate dataTemplate)
129+
{
130+
templateColumn.CellTemplate = dataTemplate;
131+
}
132+
}
133+
}
134+
}
135+
```
136+
137+
## How it works
138+
- The grid's `SerializationController` is set to `SerializationControllerExt` which inherits from `DataGridSerializationController`.
139+
- When the grid is serialized, column definitions including type and properties are written to the stream (here, an XML file in `FileSystem.AppDataDirectory`).
140+
- On deserialization the base controller restores basic column properties; `SerializationControllerExt.RestoreColumnProperties` runs afterward to reconnect runtime-only artifacts such as `DataTemplate` instances that live in the page `ResourceDictionary`.
141+
142+
##### Conclusion
143+
144+
I hope you enjoyed learning about how to Serialize template column content in .NET MAUI DataGrid (SfDataGrid).
145+
146+
You can refer to our [.NET MAUI DataGrid’s feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to learn about its other groundbreaking feature representations. You can also explore our [.NET MAUI DataGrid Documentation](https://help.syncfusion.com/maui/datagrid/getting-started) to understand how to present and manipulate data.
147+
For current customers, you can check out our .NET MAUI components on the [License and Downloads](https://www.syncfusion.com/sales/teamlicense) page. If you are new to Syncfusion, you can try our 30-day [free trial](https://www.syncfusion.com/downloads/maui) to explore our .NET MAUI DataGrid and other .NET MAUI components.
148+
149+
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://support.syncfusion.com/create) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid), or the feedback portal. We are always happy to assist you!

0 commit comments

Comments
 (0)