How to Style DataGridPickerColumn in .NET MAUI DataGrid?

Overview
Starting from Syncfusion .NET MAUI DataGrid version 31.x, the DataGridPickerColumn was introduced in the SfDataGrid control. By default, this column uses the standard picker styling, which may not match your application’s theme. If you want to customize its appearance such as background color, corner radius, or text color you need to override the default cell renderer.

This article explains how to style the DataGridPickerColumn and customize its PickerSelectionView and text appearance.

Steps to Customize DataGridPickerColumn

Step 1: Replace the Default Picker Cell Renderer
Remove the default renderer and add a custom renderer for the Picker type.

Code:

public partial class MainPage : ContentPage
{
   public MainPage()
   {
       InitializeComponent();

       // Replace the default Picker cell renderer with your custom renderer
       dataGrid.CellRenderers.Remove(nameof(Picker));
       dataGrid.CellRenderers.Add(nameof(Picker), new CustomDataGridPickerCellRenderer());
   }
} 

Step 2: Create a Custom Renderer
Override the OnInitializeEditView method to access the SfPicker instance and apply your desired styles.

Code:

public class CustomDataGridPickerCellRenderer : DataGridPickerCellRenderer
{
   public override void OnInitializeEditView(DataColumnBase dataColumn, SfPicker picker)
   {
       base.OnInitializeEditView(dataColumn, picker);

       // Apply custom styles to the PickerSelectionView
       picker.SelectionView = new PickerSelectionView()
       {
           // Set corner radius for rounded appearance
           CornerRadius = 10,
           
           // Custom stroke color
           Stroke = Colors.Black,
           
           // Padding around the selection area
           Padding = new Thickness(10, 5, 10, 5),
           
           // Background color of the selection view
           Background = Color.FromArgb("#FF54A3EE")
       };

       // Customize the selected text appearance
       picker.SelectedTextStyle = new PickerTextStyle()
       {
           // Set the selected text color
           TextColor = Colors.White,
           
           // Customize font size
           FontSize = 11,
           
           // Optionally add font attributes
           FontAttributes = FontAttributes.Bold
       };

       // Customize unselected text appearance (optional)
       picker.TextStyle = new PickerTextStyle()
       {
           TextColor = Colors.Gray,
           FontSize = 11
       };

       // Additional picker customization options
       picker.FooterView = new PickerFooterView()
       {
           Height = 50,
           Background = Color.FromArgb("#F5F7FA")
       };

       picker.HeaderView = new PickerHeaderView()
       {
           Height = 50,
           Text = "Select Department",
           Background = Color.FromArgb("#E3F2FD"),
           TextStyle = new PickerTextStyle()
           {
               TextColor = Color.FromArgb("#2C3E50"),
               FontSize = 16,
               FontAttributes = FontAttributes.Bold
           }
       };
   }
} 

Step 3: Change Selected Text Color
To change the selected text color inside the picker, use the SelectedTextStyle property of SfPicker.

Code:

picker.SelectedTextStyle = new PickerTextStyle()
{
   TextColor = Colors.Red, // Set your desired color
   FontSize = 18           // customize font size
}; 

Output
After applying these changes, the DataGridPickerColumn will reflect your custom styles for both the picker view and selected text.

Download the complete sample from GitHub

Conclusion
By creating a custom DataGridPickerCellRenderer and overriding OnInitializeEditView, you can fully control the appearance of the picker inside DataGridPickerColumn. This approach allows you to match the picker styling with your application’s theme.

You can refer to our .NET MAUI DataGrid’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components.

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, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!