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

11 posts, 0 answers
  1. Ujjwal Lahoti
    Ujjwal Lahoti avatar
    67 posts
    Member since:
    Jan 2010

    Posted 04 Apr 2010 Link to this post

    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?

  2. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2460 posts
    Member since:
    Oct 2012

    Posted 05 Apr 2010 Link to this post

    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.

  3. Download a free trial of UI for WPF
  4. Ujjwal Lahoti
    Ujjwal Lahoti avatar
    67 posts
    Member since:
    Jan 2010

    Posted 05 Apr 2010 Link to this post

    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.

  5. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2460 posts
    Member since:
    Oct 2012

    Posted 05 Apr 2010 Link to this post

    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.

  6. Ujjwal Lahoti
    Ujjwal Lahoti avatar
    67 posts
    Member since:
    Jan 2010

    Posted 08 Apr 2010 Link to this post

    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,

  7. Ujjwal Lahoti
    Ujjwal Lahoti avatar
    67 posts
    Member since:
    Jan 2010

    Posted 08 Apr 2010 Link to this post

    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> 
     




  8. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2460 posts
    Member since:
    Oct 2012

    Posted 13 Apr 2010 Link to this post

    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.

  9. Apoorva
    Apoorva avatar
    7 posts
    Member since:
    Aug 2010

    Posted 08 Jun 2011 Link to this post

    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

  10. Rossen Hristov
    Admin
    Rossen Hristov avatar
    2460 posts
    Member since:
    Oct 2012

    Posted 08 Jun 2011 Link to this post

    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

  11. Apoorva
    Apoorva avatar
    7 posts
    Member since:
    Aug 2010

    Posted 08 Jun 2011 Link to this post

    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.

  12. Apoorva
    Apoorva avatar
    7 posts
    Member since:
    Aug 2010

    Posted 08 Jun 2011 Link to this post

    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>

Back to Top
Download a free trial of UI for WPF