Skip to content

Commit 8afd997

Browse files
Addressed review concerns.
1 parent 64a5558 commit 8afd997

File tree

1 file changed

+38
-36
lines changed

1 file changed

+38
-36
lines changed

MAUI/DataGrid/Column-types.md

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ public class DisplayBindingConverter : IValueConverter
131131

132132
### Load DataTemplate for Cells
133133

134-
You can customize the display of any column in the `SfDataGrid` by setting the [DataGridColumn.CellTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html#Syncfusion_Maui_DataGrid_DataGridColumn_CellTemplate) property. This allows you to format data visually using MAUI controls and apply conditional styling using DataTrigger or Binding. In edit mode, the appropriate editor will be loaded based on the column type.
134+
You can customize the display of any column in the `SfDataGrid` by setting the [DataGridColumn.CellTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html#Syncfusion_Maui_DataGrid_DataGridColumn_CellTemplate) property. This allows you to format data visually using MAUI controls and apply conditional styling using [DataTrigger](https://learn.microsoft.com/en-us/dotnet/api/system.windows.datatrigger?view=windowsdesktop-9.0) or Binding. In edit mode, the appropriate editor will be loaded based on the column type.
135135

136136
{% tabs %}
137137
{% highlight xaml tabtitle="MainPage.xaml" %}
@@ -159,41 +159,9 @@ You can customize the display of any column in the `SfDataGrid` by setting the [
159159

160160
<img alt="CellTemplate" src="Images\column-types\maui-datagrid-CellTemplate.png" width="404"/>
161161

162-
* **Reusing DataTemplate**: To reuse a single DataTemplate across multiple columns, set the [DataGridColumn.SetCellBoundValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html#Syncfusion_Maui_DataGrid_DataGridColumn_SetCellBoundValue) property to `true`. This changes the BindingContext to a helper object with `Value` (column's mapped value) and `Record` (original data object) properties.
162+
The `SfDataGrid` also supports using a [DataTemplateSelector](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/datatemplate#choose-a-datatemplate-based-on-properties-of-the-data-object) to dynamically choose templates based on data. This is useful when you want to apply different styles or layouts depending on the properties of the data object.
163163

164-
{% tabs %}
165-
{% highlight xaml tabtitle="MainPage.xaml" %}
166-
<ContentPage.Resources>
167-
<ResourceDictionary>
168-
<DataTemplate x:Key="cellTemplate">
169-
<Label Text="{Binding Path=Value}"
170-
HorizontalOptions="CenterAndExpand"
171-
VerticalOptions="CenterAndExpand"
172-
TextColor="#E65100"/>
173-
</DataTemplate>
174-
</ResourceDictionary>
175-
</ContentPage.Resources>
176-
177-
<syncfusion:SfDataGrid x:Name="dataGrid"
178-
ItemsSource="{Binding OrderInfoCollection}">
179-
<syncfusion:SfDataGrid.Columns>
180-
<syncfusion:DataGridNumericColumn HeaderText="Order ID"
181-
MappingName="OrderID"
182-
SetCellBoundValue="True"
183-
CellTemplate="{StaticResource cellTemplate}"/>
184-
<syncfusion:DataGridTextColumn HeaderText="Customer Name"
185-
MappingName="CustomerName"
186-
SetCellBoundValue="True"
187-
CellTemplate="{StaticResource cellTemplate}"/>
188-
</syncfusion:SfDataGrid.Columns>
189-
</syncfusion:SfDataGrid>
190-
{% endhighlight %}
191-
{% endtabs %}
192-
193-
<img alt="CellTemplate" src="Images\column-types\maui-datagrid-CellTemplate-Reusable.png" width="404"/>
194-
195-
196-
* **Template Selector**: Use [DataTemplateSelector](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/datatemplate#choose-a-datatemplate-based-on-properties-of-the-data-object) to choose different DataTemplates based on data object properties.
164+
In the following example, a custom DataTemplateSelector is used to apply different styles based on whether the OrderID is even or odd.
197165

198166
{% tabs %}
199167
{% highlight xaml tabtitle="MainPage.xaml" %}
@@ -257,6 +225,40 @@ public class CustomCellTemplateSelector : DataTemplateSelector
257225

258226
<img alt="CellTemplate" src="Images\column-types\maui-datagrid-column-CellTemplateSelector.png" width="404"/>
259227

228+
#### Reuse DataTemplate for multiple columns.
229+
To reuse a single `DataTemplate` across multiple columns, set the [DataGridColumn.SetCellBoundValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html#Syncfusion_Maui_DataGrid_DataGridColumn_SetCellBoundValue) property to `true`. This changes the BindingContext to a helper object with `Value` (column's mapped value) and `Record` (original data object) properties.
230+
231+
{% tabs %}
232+
{% highlight xaml tabtitle="MainPage.xaml" %}
233+
<ContentPage.Resources>
234+
<ResourceDictionary>
235+
<DataTemplate x:Key="cellTemplate">
236+
<Label Text="{Binding Path=Value}"
237+
HorizontalOptions="CenterAndExpand"
238+
VerticalOptions="CenterAndExpand"
239+
TextColor="#E65100"/>
240+
</DataTemplate>
241+
</ResourceDictionary>
242+
</ContentPage.Resources>
243+
244+
<syncfusion:SfDataGrid x:Name="dataGrid"
245+
ItemsSource="{Binding OrderInfoCollection}">
246+
<syncfusion:SfDataGrid.Columns>
247+
<syncfusion:DataGridNumericColumn HeaderText="Order ID"
248+
MappingName="OrderID"
249+
SetCellBoundValue="True"
250+
CellTemplate="{StaticResource cellTemplate}"/>
251+
<syncfusion:DataGridTextColumn HeaderText="Customer Name"
252+
MappingName="CustomerName"
253+
SetCellBoundValue="True"
254+
CellTemplate="{StaticResource cellTemplate}"/>
255+
</syncfusion:SfDataGrid.Columns>
256+
</syncfusion:SfDataGrid>
257+
{% endhighlight %}
258+
{% endtabs %}
259+
260+
<img alt="CellTemplate" src="Images\column-types\maui-datagrid-CellTemplate-Reusable.png" width="404"/>
261+
260262
N> `CellTemplate` is not supported by `DataGridCheckboxColumn`, `DataGridImageColumn` and `DataGridUnboundColumn` columns. When using complex templates, consider the impact on scrolling performance with large datasets.
261263

262264
### TextAlignment
@@ -576,7 +578,7 @@ The `DataGridCheckBoxColumn` inherits all the properties of the `DataGridColumn`
576578
![DataGrid with CheckBox column](Images\column-types\maui-datagrid-column-checkbox.png)
577579

578580
N>
579-
By default, `DataGridCheckBoxColumn` is read-only. To enable editing (allow users to toggle the checkbox), set the column’s AllowEditing property to true.
581+
By default, `DataGridCheckBoxColumn` is read-only. To enable editing and allow users to toggle the checkbox, set the AllowEditing property to true either at the column level or the grid level.
580582

581583
## DataGridImageColumn
582584

0 commit comments

Comments
 (0)