How can you style a DataGridPickerColumn

[Todd Banister]

One of the new features of version 31.x is the DataGridPickerColumn being added to the DataGrid. I have it working in my code without issue but I am wondering how I can style this new Picker? 

I have tried a variety of ways but nothing so far has worked (and the Picker still uses the default purple color for highlighting a selected row). I am sure I am just missing something obvious. Can you provide an example of how to style the DataGridPickerColumn like you can a standard Picker control?

Thanks,

TB

[Muthukumar Madasamy]

Hi Todd Banister,

Thank you for reaching out! You’re absolutely correct, styling the new DataGridPickerColumn works a bit differently than a standard Picker because the column uses a custom cell renderer internally. To apply custom styles, you need to create a custom DataGridPickerCellRenderer and override the OnInitializeEditView method, where you can access the SfPicker instance and apply your desired styling.

Here’s an example:

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());

    }

}

public class CustomDataGridPickerCellRenderer : DataGridPickerCellRenderer

{

    public override void OnInitializeEditView(DataColumnBase dataColumn, SfPicker picker)

    {

        base.OnInitializeEditView(dataColumn, picker);

        // Apply custom styles to the Picker

        picker.SelectionView = new PickerSelectionView()

        {

            CornerRadius = 10,

            Stroke = Color.FromArgb("#36454F"),

            Padding = new Thickness(10, 5, 10, 5),

            Background = Colors.DodgerBlue

        };

        // You can also customize text color, font, etc.

        picker.HeaderText = "Select an option";

        picker.BackgroundColor = Colors.LightGray;

    }

Key Steps:

• Use dataGrid.CellRenderers.Remove and Add to replace the default renderer.
• Override OnInitializeEditView to access the SfPicker and apply styles.
• You can customize properties like Background, CornerRadius, Stroke, Padding, and even header text or font styles.

We have prepared a simple sample demonstrating this approach. Please check it and let us know if this helps.

If you need any further assistance, please feel free to reach out. We’ll be happy to help!

Best Regards,

Muthu Kumar Madasamy.

Attachment: DataGridPickerColumnSample_4341727f.zip

[Todd Banister]

Thank you SO very much for the code example as I was able to style the DataGridPickerColumn with ease. 

The only thing that I haven't been able to figure out is how can you change/specify the text color within the PickerSelectionView? I can change the row's background color but I can't seem to find out how to change the selected text option. I am sure it's something simple that I have just overlooked along the way. 

Thanks again for all of the assistance.

Take care,

TB

[Muthukumar Madasamy]

Hi Todd Banister,

We’re glad to hear that the previous solution helped you style the DataGridPickerColumn successfully!

Regarding your follow-up question on changing the selected text color inside the PickerSelectionView, you can achieve this by setting the SelectedTextStyle property of the SfPicker.

 picker.SelectedTextStyle = new PickerTextStyle()

    {

        TextColor = Colors.Red, // Set your desired color here

        FontSize = 18           // Optional: customize font size

    };

Please give this a try and let us know if it works as expected.

If you need any further assistance, please feel free to reach out. We’ll be happy to help!

Best Regards,

Muthu Kumar Madasamy.