How to make background colour and foreground the same colour of cells

[Alessandro Cirignaco]

Hi,

I have had this problem for a while and cant seem to figure out a solution. 

I have a datagrid with data passing through, i have a column in this cell that shows a colour depending on data elsewhere in my project. What i want is to either have no text displaying and just showing the background colour or to have the foreground colour match the background to make it look like a solid colour cell.

<syncfusion:GridTextColumn MappingName="OnTime" HeaderText="On Time" ColumnSizer="SizeToHeader" AllowSorting="False">

                    <syncfusion:GridTextColumn.CellStyle>

                        <Style TargetType="syncfusion:GridCell">

                            <Style.Triggers>

                                <DataTrigger Binding="{Binding Path=OnTime}" Value="false">

                                    <Setter Property="Background" Value="Red"/>

                                    <Setter Property="IsEnabled" Value="False" />

                                    <Setter Property="Foreground" Value="Transparent"/>

                                </DataTrigger>

                                <DataTrigger Binding="{Binding Path=OnTime}" Value="true">

                                    <Setter Property="Background" Value="Green"/>

                                    <Setter Property="IsEnabled" Value="False"/>

                                    <Setter Property="Foreground" Value="Transparent"/>

                                </DataTrigger>

                            </Style.Triggers>

                        </Style>

                    </syncfusion:GridTextColumn.CellStyle>

                </syncfusion:GridTextColumn>

Here is the xaml code for this cell.

Thanks 

[Vijayarasan Sivanandham]

Hi Alessandro Cirignaco,

Based on the provided information, your requirement is to set the background color and foreground color as the same for GridCell based on the cell value in SfDataGrid.

We have checked the provided code snippet style and applied it properly as per your scenario. Please find the sample in the attachment.

If we misunderstood, please share more information on your requirements. This would help us proceed further.

Regards,
Vijayarasan S

Attachment: Sample_4af1d9d2.zip

[Alessandro Cirignaco]

Hi,

Thank you for the response.

I cant seem to find the difference between my xaml code and your xaml.

<Grid>

        <syncfusion:SfDataGrid x:Name="jobListView" Margin="-1,0,1,0" AutoGenerateColumnsMode="None" RowSelectionBrush="#FFF35B02" SelectionChanged="jobListView_SelectionChanged" AllowDraggingRows="True" AllowDrop="True" RowStyle="{DynamicResource rowStyle}" AlternatingRowStyle="{DynamicResource alternatingRowStyle}" CellStyle="{DynamicResource HoverTextColour}" Drop="jobListView_Drop">

            <syncfusion:SfDataGrid.Columns>

                <syncfusion:GridTextColumn MappingName="Priority" HeaderText="Priority" ColumnSizer="Auto" TextAlignment="Center" AllowSorting="False" />

                <syncfusion:GridTextColumn MappingName="OnTime" HeaderText="On Time" ColumnSizer="SizeToHeader" AllowSorting="False">

                    <syncfusion:GridTextColumn.CellStyle>

                        <Style TargetType="syncfusion:GridCell">

                            <Style.Triggers>

                                <DataTrigger Binding="{Binding Path=OnTime}" Value="false">

                                    <Setter Property="Background" Value="Red"/>

                                    <Setter Property="IsEnabled" Value="False"/>

                                    <Setter Property="Foreground" Value="Transparent"/>

                                </DataTrigger>

                                <DataTrigger Binding="{Binding Path=OnTime}" Value="true">

                                    <Setter Property="Background" Value="Green"/>

                                    <Setter Property="IsEnabled" Value="False"/>

                                    <Setter Property="Foreground" Value="Transparent"/>

                                </DataTrigger>

                            </Style.Triggers>

                        </Style>

                    </syncfusion:GridTextColumn.CellStyle>

                </syncfusion:GridTextColumn>

                <syncfusion:GridTextColumn MappingName="JobNo" HeaderText="Job No" ColumnSizer="Auto" TextAlignment="Center" AllowSorting="False"/>

                <syncfusion:GridTextColumn MappingName="PartNo" HeaderText="Part No" ColumnSizer="Auto" TextAlignment="Center" AllowSorting="False"/>

                <syncfusion:GridTextColumn MappingName="PartDescription" HeaderText="Part Description" ColumnSizer="star" TextAlignment="Left" AllowSorting="False"/>

                <syncfusion:GridDateTimeColumn MappingName="DateRequired" HeaderText="Date Required" ColumnSizer="Auto" TextAlignment="Center" AllowSorting="False"/>

                <syncfusion:GridTextColumn MappingName="SalesNo" HeaderText="Sales No" ColumnSizer="Auto" TextAlignment="Center" AllowSorting="False"/>

                <syncfusion:GridTextColumn MappingName="Customer" HeaderText="Customer" ColumnSizer="Auto" TextAlignment="Center" AllowSorting="False"/>

                <syncfusion:GridTextColumn MappingName="Qty" HeaderText="Quantity" ColumnSizer="Auto" TextAlignment="Center" AllowSorting="False"/>

                <syncfusion:GridCurrencyColumn MappingName="SaleValue" HeaderText="Sale Value" ColumnSizer="SizeToHeader" TextAlignment="Right" AllowSorting="False" />

                <syncfusion:GridDateTimeColumn CustomPattern="dd-MM-yyyy HH:mm" MappingName="ScheduledStartDate" HeaderText="Scheduled Start Date" ColumnSizer="Auto" TextAlignment="Center" Pattern="CustomPattern" AllowSorting="False"/>

                <syncfusion:GridDateTimeColumn CustomPattern="dd-MM-yyyy HH:mm" MappingName="ScheduleCompleteDate" HeaderText="Scheduled Complete Date" ColumnSizer="Auto" TextAlignment="Center" Pattern="CustomPattern" AllowSorting="False"/>

            </syncfusion:SfDataGrid.Columns>

            <syncfusion:SfDataGrid.SortColumnDescriptions>

                <syncfusion:SortColumnDescription ColumnName="Priority" SortDirection="Ascending" />

            </syncfusion:SfDataGrid.SortColumnDescriptions>

        </syncfusion:SfDataGrid>

    </Grid>

I Have attached my full xaml code for the grid incase i am going wrong somewhere else but im still having the text appear in the gridcells

Thanks

[Vijayarasan Sivanandham]

Hi Alessandro Cirignaco,

We suspect that the reported problem occurs due to mismatched underline data and DataTrigger value. Please refer to the below screenshot.

Note: The cell style does not apply when the condition is failed in DataTrigger.

Another way you can achieve this is by using the CellStyleSelector in GridColumn. Please refer to the below code snippet.

XAML Code Snippet:

<Window.Resources>      

    <!--here create the style for false value-->

        <Style x:Key="falseCellStyle" TargetType="syncfusion:GridCell">

            <Setter Property="Background" Value="Red"/>

            <Setter Property="IsEnabled" Value="False"/>

            <Setter Property="Foreground" Value="Transparent"/>

        </Style>

    <!--here create the style for true value-->

        <Style x:Key="trueCellStyle" TargetType="syncfusion:GridCell">

            <Setter Property="Background" Value="Green"/>

            <Setter Property="IsEnabled" Value="False"/>

            <Setter Property="Foreground" Value="Transparent"/>

        </Style>

        <local:SelectorClass x:Key="styleSelector"/>

</Window.Resources>

 

 

<!--here assign the styleselector in GridColumn-->

<syncfusion:GridTextColumn MappingName="OnTime" HeaderText="On Time" CellStyleSelector="{StaticResource styleSelector}"  ColumnSizer="SizeToHeader" AllowSorting="False"/>

C# Code Snippet of CellStyleSelector:

public class SelectorClass : StyleSelector

{

        public override Style SelectStyle(object item, DependencyObject container)

        {

            //here Type cast into bound underline model type

            var data = item as OrderInfo;

 

            if (data != null)

            {

                //here custom condition for boolean type data

                if (data.OnTime)

                    return App.Current.MainWindow.Resources["trueCellStyle"] as Style;

                if (!data.OnTime)

                    return App.Current.MainWindow.Resources["falseCellStyle"] as Style;

 

                //custom condition is checked based on data.

                //here custom condition for string type data              

                if (data.Country.ToLower() == "true")

                    return App.Current.MainWindow.Resources["trueCellStyle"] as Style;

                if (data.Country.ToLower() == "false")

                    return App.Current.MainWindow.Resources["falseCellStyle"] as Style;               

 

            }

            return base.SelectStyle(item, container);

        }

}

UG Link: https://help.syncfusion.com/wpf/datagrid/conditional-styling#conditional-styling-of-cells-using-style-selector

Please find the sample in the attachment and let us know if you have any concerns in this.

Regards,
Vijayarasan S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: Sample_e9fb4474.zip