Skip to content

Commit ed2e39c

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

File tree

1 file changed

+112
-2
lines changed

1 file changed

+112
-2
lines changed

‎README.md‎

Lines changed: 112 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,112 @@
1-
# How-to-Serialize-custom-column-in-.NET-MAUI-DataGrid--SfDataGrid-
2-
This demo shows how to Serialize template column content in .NET MAUI DataGrid (SfDataGrid)?
1+
# How-to-Serialize-custom-column-in-.NET-MAUI-DataGrid--SfDataGrid
2+
3+
This sample demonstrates how to serialize and deserialize a custom/template column in the Syncfusion .NET MAUI DataGrid (`SfDataGrid`). The Syncfusion DataGrid supports built-in column types (text, numeric, date, etc.), but when you introduce a custom column (for example a template that shows text with an image) you need to extend the grid's serialization pipeline so that your custom column's properties are preserved when the grid is serialized to XML and later restored.
4+
5+
6+
For the official documentation and additional details about the DataGrid serialization API, please refer: [Serialization and Deserialization in .NET MAUI DataGrid (SfDataGrid)](https://help.syncfusion.com/maui/datagrid/serialization)
7+
8+
## What this sample shows
9+
10+
- How to register a custom cell renderer and custom column type in `SfDataGrid`.
11+
- How to provide a custom `DataGridSerializationController` that knows how to convert your custom column to a serializable representation and back.
12+
- How to write/read the serialized XML to a file in the app's local data folder.
13+
14+
## XAML
15+
The sample defines two grids (`dataGrid` and `dataGrid1`) and registers a custom column named `TextImageColumn`. A pair of buttons allow the user to serialize the first grid to a local XML file and then deserialize it into the second grid.
16+
17+
```
18+
<ContentPage.BindingContext>
19+
<local:EmployeeViewModel x:Name="viewModel" />
20+
</ContentPage.BindingContext>
21+
22+
<Grid ColumnDefinitions="*,300"
23+
RowDefinitions="Auto,Auto">
24+
<syncfusion:SfDataGrid x:Name="dataGrid"
25+
Grid.Column="0"
26+
Grid.Row="0"
27+
AllowGroupExpandCollapse="True"
28+
ColumnWidthMode="Auto"
29+
GridLinesVisibility="Both"
30+
HeaderGridLinesVisibility="Both"
31+
AutoGenerateColumnsMode="None"
32+
ItemsSource="{Binding Employees}">
33+
34+
<syncfusion:SfDataGrid.Columns>
35+
<syncfusion:DataGridNumericColumn MappingName="EmployeeID"
36+
HeaderText="Employee ID" />
37+
<syncfusion:DataGridTextColumn MappingName="Title"
38+
HeaderText="Designation" />
39+
<syncfusion:DataGridDateColumn MappingName="HireDate"
40+
HeaderText="Hire Date" />
41+
<local:TextImageColumn MappingName="Title" />
42+
43+
</syncfusion:SfDataGrid.Columns>
44+
</syncfusion:SfDataGrid>
45+
46+
<syncfusion:SfDataGrid x:Name="dataGrid1"
47+
Grid.Column="0"
48+
Grid.Row="1"
49+
ItemsSource="{Binding Employees}">
50+
</syncfusion:SfDataGrid>
51+
52+
<VerticalStackLayout Grid.Column="1">
53+
<Grid RowDefinitions="80,80">
54+
<Button Text="Serialize"
55+
Grid.Row="0"
56+
Margin="0,0,0,20"
57+
WidthRequest="150"
58+
Clicked="Button_Clicked" />
59+
<Button Text="Deserialize"
60+
Grid.Row="1"
61+
Margin="0,20,0,0"
62+
WidthRequest="150"
63+
Clicked="Button_Clicked_1" />
64+
</Grid>
65+
</VerticalStackLayout>
66+
</Grid>
67+
```
68+
69+
## C#
70+
71+
The code registers the custom cell renderer, sets a custom serialization controller and implements a custom serializable column type.
72+
73+
```
74+
dataGrid.CellRenderers.Add("TextImage", new TextImageColumnRenderer());
75+
dataGrid1.CellRenderers.Add("TextImage", new TextImageColumnRenderer());
76+
dataGrid.SerializationController = new SerializationControllerCustomExt(dataGrid);
77+
dataGrid1.SerializationController = new SerializationControllerCustomExt(dataGrid1);
78+
79+
private void Button_Clicked(object sender, EventArgs e)
80+
{
81+
string localPath = Path.Combine(FileSystem.AppDataDirectory, "DataGrid.xml");
82+
using (var file = File.Create(localPath))
83+
{
84+
dataGrid.Serialize(file);
85+
}
86+
}
87+
88+
private void Button_Clicked_1(object sender, EventArgs e)
89+
{
90+
string localPath = Path.Combine(FileSystem.AppDataDirectory, "DataGrid.xml");
91+
92+
using (var file = File.Open(localPath, FileMode.Open))
93+
{
94+
dataGrid1.Deserialize(file);
95+
}
96+
}
97+
```
98+
99+
## Try it
100+
101+
1. Run the app on your target platform (Android, iOS, Windows, etc.).
102+
2. Tap "Serialize" to write `DataGrid.xml` to the app's local storage.
103+
3. Tap "Deserialize" to read the file and restore the grid definition into the second grid instance.
104+
105+
##### Conclusion
106+
107+
I hope you enjoyed learning about how to Serialize template column content in .NET MAUI DataGrid (SfDataGrid).
108+
109+
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.
110+
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.
111+
112+
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)