Articles in this section
Category / Section

How to change the Cell background based on bool value in .NET MAUI DataGrid?

3 mins read

The .NET MAUI DataGrid provides support to customize the background of a DataGridCell based on a bool value.

XAML
Create a custom style targeting the DataGridCell in the Resource Dictionary.

<ContentPage.Resources>
    <local:ColorConverter x:Key="converter"/>
    <Style TargetType="syncfusion:DataGridCell" x:Key="customCellStyle">
        <Setter Property="Background" Value="{Binding EmployeeStatus, Converter={StaticResource Key=converter}}"/>
    </Style>
</ContentPage.Resources>

Set the key value to the CellStyle property of the column you want to customize.

<syncfusion:SfDataGrid ItemsSource="{Binding Employees}" CellTapped="SfDataGrid_CellTapped">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:DataGridNumericColumn MappingName="EmployeeID" 
                                          HeaderText="Employee ID" 
                                          Format="d"
                                          ColumnWidthMode="Auto"
                                          CellStyle="{StaticResource customCellStyle}"/>        
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

C#

In the cell tapped event, we will modify the bool value, which will trigger the converter.

private void SfDataGrid_CellTapped(object sender, DataGridCellTappedEventArgs e)
{
    if (e.RowData != null && viewModel.Employees.Contains(e!.RowData))
    {
        int index = viewModel.Employees.IndexOf((e.RowData as Employee)!);
        viewModel.Employees[index].EmployeeStatus = !viewModel.Employees[index].EmployeeStatus;
    }
}

In the converter we set the background based on the bool value.

public class ColorConverter : IValueConverter
{
    object IValueConverter.Convert(object? value, Type targetType, object? parameter, CultureInfo info)
    {
        if ((bool)value!)
            return Color.FromArgb("bde0fe"); 
        else
            return Colors.Transparent;
    }
    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The following GIF demonstrates the customization of the datagrid cell background based on a Boolean value.

SfDataGrid_sample.gif

Download the complete sample from GitHub.

Conclusion
I hope you enjoyed learning how to change the datagrid cell background based on a bool value in .NET 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, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out 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!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied