Change color of text of column B based on if column A is selected

[Ujjwal Lahoti]

Lets say I have two columns in my data grid, Column A is a checkbox, and column B is text. I want to set the color of the text in Column B as Red, if the check box in the corresponding row is checked, and if not checked set the color to Black.

I want to do it through XAML. Can anyone provide me an example of how to do this?

[Rossen Hristov]

Hello Ujjwal Lahoti,

The thing that you want to do is called conditional formatting.

Please, take a look at this blog post. This should get you started.

I hope this helps.

Kind regards,
Ross
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ujjwal Lahoti]

Thanks for the reply. The blog post doesn't answer my question completely.

I understand this has to be done using Conditional Formatting/Binding Converters. What I am trying to do is, bind the look and feel of one column to contents of another Column in the grid (eg. if another cell is checked or not) instead of an absolute condition (eg. if a number is less than or greater than 15). Essentially I don't know how to reference Column A when creating a binding for Column B.

As I explain in my original question, I want to change color of the text in Column B, based on if the check box in Column A is checked or not.

[Rossen Hristov]

Hi Ujjwal Lahoti,

You should record the checked state in your data item. Create a boolean property on your business object. Associate this boolean property with the column that has the check-boxes. Now, you can read this boolean property and decide what to do. If it is true -- then the check-box is checked. If it is false -- then it is unchecked. Once you know whether is true or false -- you can decide about the color.

I hope this makes sense.

Regards,
Ross
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ujjwal Lahoti]

Thanks for the reply. I didn't completely understand the solution. Here is the XAML I am using:

        <telerik:RadGridView x:Name="RadGridView1"
              ItemsSource="{Binding Source={StaticResource DataSource}, Path=pdpEditorSource}" AutoGenerateColumns="False" MaxWidth="750" HorizontalAlignment="Center" CanUserFreezeColumns="False" ShowGroupPanel="False" IsFilteringAllowed="False" CanUserReorderColumns="False">

            <telerik:RadGridView.Columns>
                <!-- Path enable/disable colum-->
                <telerik:GridViewDataColumn Header="Path" DataMemberBinding="{Binding Name, Mode=TwoWay}" TextAlignment="Center">
                        <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <CheckBox IsChecked="{Binding Path}" IsEnabled="False" VerticalAlignment="Center"/>
                                <Label  Content="{Binding Name}"/>
                            </StackPanel>
                          </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                        <telerik:GridViewDataColumn.CellEditTemplate>
                            <DataTemplate>
                                <CheckBox Loaded="Editor_Loaded" Margin="5, 0, 0, 0" VerticalAlignment="Center" IsChecked="{Binding Path, Mode=TwoWay}" />
                        </DataTemplate>
                        </telerik:GridViewDataColumn.CellEditTemplate>
                    </telerik:GridViewDataColumn>

                <!-- Modulation selection column -->
                <telerik:GridViewDataColumn Header="Modulation" Width="150" DataMemberBinding="{Binding Modulation, Mode=TwoWay}" TextAlignment="Center">
                        <telerik:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Modulation}"/>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                        <telerik:GridViewDataColumn.CellEditTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <ComboBox Loaded="Editor_Loaded" Width="100" Margin="5, 0, 0, 0" Text="{Binding Modulation, Mode=TwoWay}">
                                        <ComboBoxItem>Static</ComboBoxItem>
                                        <ComboBoxItem>Rayleigh</ComboBoxItem>
                                        <ComboBoxItem>Rician</ComboBoxItem>
                                    </ComboBox>
                                    <Button Content="More..."/>
                                </StackPanel>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellEditTemplate>
                    </telerik:GridViewDataColumn>

            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

As you can see there are two columns in the DataGrid: Path and Modulation. The datagrid is bound to a dataset. I want to set the color of the text in all the columns as Blue if the Checkbox in 'Path' column is checked, and Red if unchecked.

Can you provide some sample code to do this? Thanks,

[Ujjwal Lahoti]

Hi,

I got it to work. I used Binding Converters on the Foreground color.

Foreground="{Binding Path, Converter={StaticResource colorConverter}}"

And used the colorConverter class to convert checkBox to Red/Blue color based on if it is checked or not.

Now my question is, how can I apply this to the whole grid instead on one column at a time. In the XAML below, I have to apply the Foreground property twice, one for CellTemplate and one for CellEditTemplate, and for each column. I wanted to set this for the whole DataGrid at the top, so that I don't have to repeat this code everywhere (for each column).

            <telerik:RadGridView.Columns>
                <!-- Path enable/disable colum-->
                <telerik:GridViewDataColumn Header="Path" DataMemberBinding="{Binding Name, Mode=TwoWay}" TextAlignment="Center">
                        <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <CheckBox IsChecked="{Binding Path}" IsEnabled="False" VerticalAlignment="Center"/>
                                <Label  Content="{Binding Name}" Foreground="{Binding Path, Converter={StaticResource colorConverter}}"/>
                            </StackPanel>
                          </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                        <telerik:GridViewDataColumn.CellEditTemplate>
                            <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <CheckBox Loaded="Editor_Loaded" Margin="5, 0, 0, 0" VerticalAlignment="Center" IsChecked="{Binding Path, Mode=TwoWay}" />
                                <Label  Content="{Binding Name}" Foreground="{Binding Path, Converter={StaticResource colorConverter}}"/>
                            </StackPanel>
                        </DataTemplate>
                        </telerik:GridViewDataColumn.CellEditTemplate>
                    </telerik:GridViewDataColumn>

                <!-- Modulation selection column -->
                <telerik:GridViewDataColumn Header="Modulation" Width="150" DataMemberBinding="{Binding Modulation, Mode=TwoWay}" TextAlignment="Center">
                        <telerik:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Modulation}"/>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                        <telerik:GridViewDataColumn.CellEditTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <ComboBox Loaded="Editor_Loaded" Width="100" Margin="5, 0, 0, 0" Text="{Binding Modulation, Mode=TwoWay}">
                                        <ComboBoxItem>Static</ComboBoxItem>
                                        <ComboBoxItem>Rayleigh</ComboBoxItem>
                                        <ComboBoxItem>Rician</ComboBoxItem>
                                    </ComboBox>
                                    <Button Content="More..."/>
                                </StackPanel>
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellEditTemplate>
                    </telerik:GridViewDataColumn>

            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

[Rossen Hristov]

Hello Ujjwal Lahoti,

You can't apply this to the whole grid. CellTemplate and CellEditTemplate are defined on a per column basis, so the way you have done it is correct.

All the best,
Ross
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Apoorva]

Hi

Is it possible to use Multi binding here?
Ie change the appearance of the column based on 2 other columns and use a MultiValueConverter?

Regards
Apoorva

[Rossen Hristov]

Hello Apoorva,

It should be.

Why don't you try it?

Kind regards,
Ross
the Telerik team

[Apoorva]

Hello Ross
Thanks for the response but I am not sure how to specify the Value for the other fields here.
Specifically:

<telerik:GridViewDataColumn.CellStyle>
    <Style TargetType="telerik:GridViewCell">
        <Setter Property="Foreground" Value="{Binding Price, Converter={StaticResource MyConverter}}" />
    </Style>
</telerik:GridViewDataColumn.CellStyle>

In the above, the Value comes from the field called Price.
How would I use the MultiBinding here?

Thanks.

[Apoorva]

Ok, I think I have got it.
Here is what I did in case anyone else needs it:
I have put a tooltip which is based on the value of both the values of the object and written a IMultiValueConverter class for this.

<Setter Property="ToolTip">
    <Setter.Value>
        <MultiBinding Converter="{StaticResource MyMultiConverter}">
            <Binding Path="Price"></Binding>
            <Binding Path="ProductName"></Binding>
        </MultiBinding>
    </Setter.Value>
</Setter>