How to load a different view within a DataTemplate based on a condition in a MAUI DataGrid?

This article demonstrates how to load different views within a CellTemplate using a DataTemplateSelector in a .NET MAUI DataGrid.

Step 1: Define two DataTemplate objects with the required controls, each assigned a unique key value in the corresponding ContentPage ResourceDictionary.

<ContentPage.Resources>
   <ResourceDictionary>
       <DataTemplate x:Key="trackButton">
           <Button Text="Track Order" 
                   WidthRequest="120"
                   TextColor="Black" 
                   BackgroundColor="GreenYellow" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   Clicked="Track_Order_Button_Clicked"/>
       </DataTemplate>
       <DataTemplate x:Key="detailsbutton">
           <Button Text="Check Details" 
                   WidthRequest="120"
                   TextColor="Black"  
                   BackgroundColor="PaleVioletRed"
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   Clicked="Check_Details_Button_Clicked"/>
       </DataTemplate>
   </ResourceDictionary>
</ContentPage.Resources>

Step 2: Implement a custom class that extends DataTemplateSelector. In this class, define the necessary DataTemplate properties to display in the CellTemplate. Based on a condition, return the corresponding DataTemplate.

public class DetailsTemplateSelector : DataTemplateSelector
{
   public DataTemplate? TrackOrderButton { get; set; }

   public DataTemplate? CheckDetailsButton { get; set; }

   protected override DataTemplate? OnSelectTemplate(object item, BindableObject container)
   {
       bool value = ((OrderInfo)item).IsShipped;

       return value ? TrackOrderButton : CheckDetailsButton;
   }
}

Step 3: Bind the DataTemplateSelector.DataTemplate properties with the respective DataTemplate key values in the DataGridTemplateColumn.CellTemplate.

        <dataGrid:SfDataGrid.Columns>
           <dataGrid:DataGridTextColumn MappingName="OrderID" 
                                        Width="100"
                                        HeaderText="Order ID"/>
           <dataGrid:DataGridTextColumn MappingName="CustomerID" 
                                        Width="110"
                                        HeaderText="Customer ID"/>
           <dataGrid:DataGridTextColumn MappingName="Customer" 
                                        Width="150"
                                        HeaderText="Customer Name"/>
           <dataGrid:DataGridTextColumn MappingName="ShipCity" 
                                        Width="100"
                                        HeaderText="Ship City"/>
           <dataGrid:DataGridTextColumn MappingName="ShipCountry"
                                        Width="120"
                                        HeaderText="Ship Country"/>
           <dataGrid:DataGridDateColumn MappingName="ShippedDate" 
                                        Width="120"
                                        CellTextAlignment="Start"
                                        HeaderText="Shipped Date"/>
           <dataGrid:DataGridTextColumn MappingName="Price" 
                                        Width="70"
                                        HeaderText="Price"/>
           <dataGrid:DataGridTemplateColumn HeaderText="Status"
                                            Width="150">
               <dataGrid:DataGridTemplateColumn.CellTemplate>
                   <local:DetailsTemplateSelector TrackOrderButton="{StaticResource trackButton}"
                                                  CheckDetailsButton="{StaticResource detailsbutton}"/>
               </dataGrid:DataGridTemplateColumn.CellTemplate>
           </dataGrid:DataGridTemplateColumn>
       </dataGrid:SfDataGrid.Columns>

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to load a different view within a DataTemplate based on a condition in a MAUI DataGrid.

You can refer to our .NET MAUI DataGrid feature tour page to learn about its other groundbreaking feature representations. Explore our 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. We are always happy to assist you!