How to add SfBadgeView in a DataGridTemplateColumn in MAUI DataGrid (SfDataGrid)?

This article illustrates the process of integrating badges into a .NET MAUI DataGrid using .NET MAUI BadgeView application.

Step 1: Initialize the DataGrid with ItemsSource Property

In the .NET MAUI application, initialize the DataGrid and bind the ItemsSource property of the DataGrid to a respective collection in the ViewModel. This collection serves as the data source for the DataGrid.

Step 2: Initialize Badge View within DataTemplate

Set the DataGridTemplateColumn for the respective column. Within the DataTemplate of the DataGrid, initialize the Badge View control and configure its BadgeText property.

Step 3: Customize Badge Appearance

The BadgeView showcases a badge displaying the count of pending tasks. You can customize the badge appearance using the BadgeSettings property.

XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MauiApp1"
            xmlns:datagrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
            xmlns:badge="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
            x:Class="MauiApp1.MainPage">

   <ContentPage.BindingContext>
       <local:EmployeeInfoRepository />
   </ContentPage.BindingContext>

   <datagrid:SfDataGrid x:Name="dataGrid"
                        ItemsSource="{Binding OrderInfoCollection}"
                        ColumnWidthMode="Auto">
       <datagrid:SfDataGrid.Columns>
           <datagrid:DataGridTemplateColumn MappingName="TaskAssigned" HeaderText="Task Assigned">
               <datagrid:DataGridTemplateColumn.CellTemplate>
                   <DataTemplate>
                       <Grid Margin="50,0,0,0">
                           <Grid.RowDefinitions>
                               <RowDefinition Height="*" />
                           </Grid.RowDefinitions>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="50" />
                               <ColumnDefinition Width="50" />
                           </Grid.ColumnDefinitions>
                           <Label Text="{Binding TaskAssigned}"
                                  HorizontalOptions="Center"
                                  VerticalOptions="Center"
                                  Grid.Column="0"
                                  Grid.Row="0">
                               <badge:SfBadgeView BadgeText="{Binding TaskPending}"
                                                  HorizontalOptions="Start"
                                                  VerticalOptions="Start"
                                                  Grid.Column="1"
                                                  Grid.Row="0">
                                   <badge:SfBadgeView.BadgeSettings>
                                       <badge:BadgeSettings Type="None"
                                                            TextColor="Red"
                                                            FontSize="12"
                                                            FontAttributes="Bold"
                                                            CornerRadius="10"
                                                            Position="TopRight" />
                                   </badge:SfBadgeView.BadgeSettings>
                               </badge:SfBadgeView>
                           </Label>
                       </Grid>
                   </DataTemplate>
               </datagrid:DataGridTemplateColumn.CellTemplate>
           </datagrid:DataGridTemplateColumn>
       </datagrid:SfDataGrid.Columns>
   </datagrid:SfDataGrid>
</ContentPage>

Output:

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to add SfBadgeView in a DataGridTemplateColumn in MAUI DataGrid.

You can refer to our .NET MAUI DataGrid feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!