Skip to content

Commit b23678f

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #3559 from syncfusion-content/Maui-CellTemplate
Maui-[975367]-Added UG Documentation for CellTemplate, CheckboxEditing, and SelectionControllerKey Features.
2 parents c2488e1 + 3d0d3e5 commit b23678f

File tree

4 files changed

+137
-0
lines changed

4 files changed

+137
-0
lines changed

‎MAUI/DataGrid/Column-types.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,139 @@ public class DisplayBindingConverter : IValueConverter
129129
{% endhighlight %}
130130
{% endtabs %}
131131

132+
### Load DataTemplate for Cells
133+
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.
135+
136+
{% tabs %}
137+
{% highlight xaml tabtitle="MainPage.xaml" %}
138+
<syncfusion:SfDataGrid x:Name="dataGrid"
139+
ColumnWidthMode="Fill"
140+
ItemsSource="{Binding Orders}">
141+
<syncfusion:SfDataGrid.Columns>
142+
<syncfusion:DataGridNumericColumn HeaderText="Quantity" MappingName="Quantity" Width="150">
143+
<syncfusion:DataGridNumericColumn.CellTemplate>
144+
<DataTemplate>
145+
<Grid Padding="5" ColumnDefinitions="*,*" ColumnSpacing="5">
146+
<Stepper Value="{Binding Quantity, Mode=TwoWay}" Minimum="1"
147+
Maximum="20" Increment="1" HorizontalOptions="Center"/>
148+
<Label Text="{Binding Quantity, StringFormat='Qty: {0}'}"
149+
HorizontalOptions="Center" VerticalOptions="Center" FontSize="14"
150+
TextColor="#333333" Grid.Column="1" Margin="0,5,0,0" />
151+
</Grid>
152+
</DataTemplate>
153+
</syncfusion:DataGridNumericColumn.CellTemplate>
154+
</syncfusion:DataGridNumericColumn>
155+
</syncfusion:SfDataGrid.Columns>
156+
</syncfusion:SfDataGrid>
157+
{% endhighlight %}
158+
{% endtabs %}
159+
160+
<img alt="CellTemplate" src="Images\column-types\maui-datagrid-CellTemplate.png" width="404"/>
161+
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.
163+
164+
In the following example, a custom DataTemplateSelector is used to apply different styles based on whether the OrderID is even or odd.
165+
166+
{% tabs %}
167+
{% highlight xaml tabtitle="MainPage.xaml" %}
168+
<ContentPage.Resources>
169+
<ResourceDictionary>
170+
<DataTemplate x:Key="DefaultTemplate">
171+
<StackLayout Background="#FFF3E0" Padding="5">
172+
<Label Text="{Binding OrderID}"
173+
TextColor="#E65100"
174+
FontAttributes="Bold"
175+
HorizontalTextAlignment="Center"
176+
VerticalTextAlignment="Center"/>
177+
</StackLayout>
178+
</DataTemplate>
179+
<DataTemplate x:Key="AlternateTemplate">
180+
<StackLayout Background="#E3F2FD" Padding="5">
181+
<Label Text="{Binding OrderID}"
182+
TextColor="#0D47A1"
183+
FontAttributes="Bold"
184+
HorizontalTextAlignment="Center"
185+
VerticalTextAlignment="Center" />
186+
</StackLayout>
187+
</DataTemplate>
188+
<selector:CustomCellTemplateSelector x:Key="OrderTemplateSelector"
189+
DefaultTemplate="{StaticResource DefaultTemplate}"
190+
AlternateTemplate="{StaticResource AlternateTemplate}" />
191+
</ResourceDictionary>
192+
</ContentPage.Resources>
193+
194+
<syncfusion:SfDataGrid x:Name="dataGrid"
195+
ItemsSource="{Binding Orders}"
196+
AutoGenerateColumnsMode="None">
197+
<syncfusion:SfDataGrid.Columns>
198+
<syncfusion:DataGridNumericColumn HeaderText="Order ID"
199+
MappingName="OrderID"
200+
CellTemplate="{StaticResource OrderTemplateSelector}"/>
201+
</syncfusion:SfDataGrid.Columns>
202+
</syncfusion:SfDataGrid>
203+
{% endhighlight %}
204+
{% endtabs %}
205+
206+
{% tabs %}
207+
{% highlight c# tabtitle="TemplateSelector.cs" %}
208+
public class CustomCellTemplateSelector : DataTemplateSelector
209+
{
210+
public DataTemplate DefaultTemplate { get; set; }
211+
public DataTemplate AlternateTemplate { get; set; }
212+
213+
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
214+
{
215+
var order = item as OrderModel;
216+
if (order != null)
217+
{
218+
return order.OrderID % 2 == 0 ? AlternateTemplate : DefaultTemplate;
219+
}
220+
return DefaultTemplate;
221+
}
222+
}
223+
{% endhighlight %}
224+
{% endtabs %}
225+
226+
<img alt="CellTemplate" src="Images\column-types\maui-datagrid-column-CellTemplateSelector.png" width="404"/>
227+
228+
#### Reuse DataTemplate for multiple columns
229+
230+
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.
231+
232+
{% tabs %}
233+
{% highlight xaml tabtitle="MainPage.xaml" %}
234+
<ContentPage.Resources>
235+
<ResourceDictionary>
236+
<DataTemplate x:Key="cellTemplate">
237+
<Label Text="{Binding Path=Value}"
238+
HorizontalOptions="CenterAndExpand"
239+
VerticalOptions="CenterAndExpand"
240+
TextColor="#E65100"/>
241+
</DataTemplate>
242+
</ResourceDictionary>
243+
</ContentPage.Resources>
244+
245+
<syncfusion:SfDataGrid x:Name="dataGrid"
246+
ItemsSource="{Binding OrderInfoCollection}">
247+
<syncfusion:SfDataGrid.Columns>
248+
<syncfusion:DataGridNumericColumn HeaderText="Order ID"
249+
MappingName="OrderID"
250+
SetCellBoundValue="True"
251+
CellTemplate="{StaticResource cellTemplate}"/>
252+
<syncfusion:DataGridTextColumn HeaderText="Customer Name"
253+
MappingName="CustomerName"
254+
SetCellBoundValue="True"
255+
CellTemplate="{StaticResource cellTemplate}"/>
256+
</syncfusion:SfDataGrid.Columns>
257+
</syncfusion:SfDataGrid>
258+
{% endhighlight %}
259+
{% endtabs %}
260+
261+
<img alt="CellTemplate" src="Images\column-types\maui-datagrid-CellTemplate-Reusable.png" width="404"/>
262+
263+
N> `CellTemplate` is not supported by `DataGridCheckboxColumn`, `DataGridImageColumn` and `DataGridUnboundColumn` columns. When using complex templates, consider the impact on scrolling performance with large datasets.
264+
132265
### TextAlignment
133266

134267
In order to set the TextAlignment of the header cell and data row cell , use the [DataGridColumn.HeaderTextAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html#Syncfusion_Maui_DataGrid_DataGridColumn_HeaderTextAlignment) and [DataGridColumn.CellTextAlignment](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html#Syncfusion_Maui_DataGrid_DataGridColumn_CellTextAlignment) property. The default text alignment is based on the type of the columns. The header and data rows are right aligned for numeric, date columns and left aligned for text column.
@@ -445,6 +578,9 @@ The `DataGridCheckBoxColumn` inherits all the properties of the `DataGridColumn`
445578

446579
![DataGrid with CheckBox column](Images\column-types\maui-datagrid-column-checkbox.png)
447580

581+
N>
582+
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.
583+
448584
## DataGridImageColumn
449585

450586
The `DataGridImageColumn` is derived from the `DataGridColumn`. Hence, it inherits all the properties of the `DataGridColumn`. It displays an image as the cell content of a column. To create a `DataGridImageColumn`, the property corresponding to the column in the underlying collection must be `ImageSource` type.
@@ -1347,3 +1483,4 @@ The SfDataGrid allows binding the view model property to the `HeaderTemplate` by
13471483
{% endtabs %}
13481484

13491485
![DataGrid with header template bind to view model](Images\column-types\maui-datagrid-header-template-view-model.png)
1486+

‎MAUI/DataGrid/Images/column-types/maui-datagrid-CellTemplate-Reusable.png‎

10.2 KB
Loading

‎MAUI/DataGrid/Images/column-types/maui-datagrid-CellTemplate.png‎

13.2 KB
Loading

‎MAUI/DataGrid/Images/column-types/maui-datagrid-column-CellTemplateSelector.png‎

10.4 KB
Loading

0 commit comments

Comments
 (0)