This is a migrated thread and some comments may be shown as answers.

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

10 Answers 239 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Ujjwal Lahoti
Top achievements
Rank 1
Ujjwal Lahoti asked on 04 Apr 2010, 05:06 AM
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?

10 Answers, 1 is accepted

Sort by
0
Rossen Hristov
Telerik team
answered on 05 Apr 2010, 01:20 PM
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.
0
Ujjwal Lahoti
Top achievements
Rank 1
answered on 05 Apr 2010, 02:51 PM
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.
0
Rossen Hristov
Telerik team
answered on 05 Apr 2010, 02:54 PM
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.
0
Ujjwal Lahoti
Top achievements
Rank 1
answered on 08 Apr 2010, 03:38 PM
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,

0
Ujjwal Lahoti
Top achievements
Rank 1
answered on 08 Apr 2010, 04:22 PM
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> 
 




0
Rossen Hristov
Telerik team
answered on 13 Apr 2010, 08:42 AM
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.
0
Apoorva
Top achievements
Rank 1
answered on 08 Jun 2011, 11:18 AM
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
0
Rossen Hristov
Telerik team
answered on 08 Jun 2011, 12:11 PM
Hello Apoorva,

It should be.

Why don't you try it?

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
0
Apoorva
Top achievements
Rank 1
answered on 08 Jun 2011, 12:34 PM
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.
0
Apoorva
Top achievements
Rank 1
answered on 08 Jun 2011, 01:00 PM
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>

Tags
GridView
Asked by
Ujjwal Lahoti
Top achievements
Rank 1
Answers by
Rossen Hristov
Telerik team
Ujjwal Lahoti
Top achievements
Rank 1
Apoorva
Top achievements
Rank 1
Share this question
or