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

Change selected foreground text

10 Answers 177 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 20 Aug 2010, 07:08 AM
when I set the foreground color for a RadComboBox it only seems to change the forground color for the items in the drop down list. I would also like to change the color of the selected text in the text area of the combobox when the drop down is not selected.

For example, this code changes all items in the drop down to red but not the selected item, it is still black
<telerik:RadComboBox Foreground="Red" Grid.Row="3" Grid.Column="0" Margin="6,4">
    <telerik:RadComboBoxItem IsSelected="True">Item 1</telerik:RadComboBoxItem>
    <telerik:RadComboBoxItem>Item 2</telerik:RadComboBoxItem>
</telerik:RadComboBox>

I edited a copy of the style and I'm fiarly sure the line that shows the text is
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="8,0,4,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
but there is no forground option on this since ContentPresenter can display any type.

Any ideas?

10 Answers, 1 is accepted

Sort by
0
Accepted
Dani
Telerik team
answered on 20 Aug 2010, 08:45 AM
Hi Scott,

If you are using the NonEditable template (which is the default one), the code snippet you referred to is exactly what you need. Change it from ContentPresenter to ContentControl and add a Foreground property.

If you are using the ComboBox with IsEditable="True", then defining a SelectionBoxTemplate can do the job for you:

<UserControl.Resources>
  <DataTemplate x:Key="SelectedCombo">
            <TextBlock Text="{Binding}" Foreground="Red" />
  </DataTemplate>
</UserControl.Resources
  
<Grid x:Name="LayourRoot">
  <telerik:RadComboBox Width="200" 
                             Foreground="Red"
                             VerticalAlignment="Center"   HorizontalAlignment="Center" 
                             telerik:StyleManager.Theme="{StaticResource Theme}"
                             SelectionBoxTemplate="{StaticResource SelectedCombo}"
                             IsEditable="True">
            <telerik:RadComboBoxItem Content="Item 1" />
            <telerik:RadComboBoxItem Content="Item 2" />
            <telerik:RadComboBoxItem Content="Item 3" />
            <telerik:RadComboBoxItem Content="Item 4" />
            <telerik:RadComboBoxItem Content="Item 5" />
              
        </telerik:RadComboBox>
</Grid>


I hope this helps.

Sincerely yours,
Dani
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
Scott
Top achievements
Rank 1
answered on 20 Aug 2010, 06:45 PM
That did the trick. Thanks you very much for the very quick answer.
0
Phil
Top achievements
Rank 1
answered on 05 May 2011, 12:37 PM
Your example shows how to change the foreground text color of a selected radcombobox item.  I want to be able to do the same thing but dynamically at run time depending on other characteristics.  In other words,  depending on which item is selected will determine if the selected items text forecolor should be changed.  I'd also like to be able to dynamically add a tool tip to the selected item as well.

Thank you.
Phil
0
Dani
Telerik team
answered on 09 May 2011, 10:43 AM
Hello Phil,

You can use the same approach with some extra effort. To use a different foreground color of the text depending on the selected item, you can bind the Foreground property of the TextBlock to the SelectedIndex or the SelectedItem property of its parent with a Converter. The Converter will supply conditionally different foreground colors.

And if you wish to add a tooltip to the selected item, I would suggest that you add it to the RadComboBox itself in the standard way. In visual terms it is basically the same, but adding a tooltip to the RadComboBox is more natural.


All the best,
Dani
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
Francis
Top achievements
Rank 1
answered on 24 Jun 2012, 07:08 PM

Hi,


I have a RadComboBox that is as follows;

<telerik:RadComboBox ItemsSource="{Binding LevelOfActivityList}" SelectedItem="{Binding SelectedLevelOfActivity,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" MinWidth="200">
                                <telerik:RadComboBox.ItemTemplate>
                                    <DataTemplate>
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                </Grid.RowDefinitions>
                                                <TextBlock Grid.Row="0" Margin="3,0,0,0" HorizontalAlignment="Left" Text="{Binding Level,Mode=TwoWay}" FontWeight="Bold" />
                                                <TextBlock Grid.Row="1" Margin="3,0,0,0" HorizontalAlignment="Left" Text="{Binding Detail,Mode=TwoWay}" />
                                            </Grid>
                                    </DataTemplate>
                                </telerik:RadComboBox.ItemTemplate>
                                <telerik:RadComboBox.SelectionBoxTemplate>
                                    <DataTemplate>
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition />
                                                    <RowDefinition />
                                                </Grid.RowDefinitions>
                                                <TextBlock Grid.Row="0" Margin="3,0,0,0" HorizontalAlignment="Left" Text="{Binding Level, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" FontWeight="Bold" />
                                            </Grid>
                                    </DataTemplate>
                                </telerik:RadComboBox.SelectionBoxTemplate>
                            </telerik:RadComboBox>

The LevelOfActivity object is a list that has two properties Level and detail. When I run the application I can select the level of activity okay and its just the level that is displayed on the combobox once I select, that is how I want it to work. My problem is when I set the level of activity from the viewmodel (am using MVVM), i.e SelectedLevelOfActivity.Level, the combobox remains blank, nothing is displayed. I am using RadControls for Silverlight Q1 2012. What am I doing wrong? How do I get the combobox to display what I set in the viewmodel? I have tried setting the IsEditable property to true, setting the TextSearch.TextPath and all but still have not got it to work. Please provide any and all the help you can I need to solve this.

Francis. 
0
Dani
Telerik team
answered on 28 Jun 2012, 08:48 AM
Hi,

I am posting here a link to another forum thread of yours on the same topic.

All the best,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Sri
Top achievements
Rank 1
answered on 15 Feb 2018, 04:56 PM

Hi,

How to achieve conditional formatting in a RadCombobox (for a particular RadComboboxItem)?

See this example:

<telerik:RadComboBox
                    x:Name="cmbRecordset"
                    DisplayMemberPath="RecordsetName"
                    IsEnabled="{Binding IsVersionInfoControlsEnabled}"
                    ItemsSource="{Binding RecordsetList}"
                    SelectedItem="{Binding Path=SelectedRecordset, NotifyOnValidationError=True, ValidatesOnNotifyDataErrors=True, Mode=TwoWay}"
                    SelectedValuePath="RecordsetId">
                    <telerik:RadComboBox.Width>
                        <MultiBinding Converter="{converters:ComboBoxConverter}">
                            <Binding RelativeSource="{RelativeSource Self}" />
                            <Binding Path="RecordsetList" />
                        </MultiBinding>
                    </telerik:RadComboBox.Width>
                </telerik:RadComboBox>

So based one of the property value in the "RecordsetList" I would need to format the foreground color of an item in RadCombobox .

 

For RadGridView I was able to achieve that using this below code but not finding it easy for RadCombobox. Any help?

<telerik:ConditionalStyleSelector>
    <telerik:StyleRule Condition="ErrorCode=0">
         <Style BasedOn="{StaticResource GridViewRowStyle}" TargetType="telerik:GridViewRow">
               <Setter Property="Foreground" Value="Red" />
         </Style>
    </telerik:StyleRule>
</telerik:ConditionalStyleSelector>

ErrorCode=0 is the property value in RecordsetList that drives this conditional formatting.

 

Thanks

0
Sri
Top achievements
Rank 1
answered on 16 Feb 2018, 09:42 PM
This is the code.. the conditional formatting <telerik:ConditionalStyleSelector> is not applying any format to the item. Can you pls tell what am I missing? Thanks

<telerik:RadComboBox
                    x:Name="cmbRecordset"
                    DisplayMemberPath="RecordsetName"
                    IsEnabled="{Binding IsVersionInfoControlsEnabled}"
                    ItemsSource="{Binding RecordsetList}"
                    SelectedItem="{Binding Path=SelectedRecordset, NotifyOnValidationError=True, ValidatesOnNotifyDataErrors=True, Mode=TwoWay}"
                    SelectedValuePath="RecordsetId">
                    <telerik:RadComboBox.Width>
                        <MultiBinding Converter="{converters:ComboBoxConverter}">
                            <Binding RelativeSource="{RelativeSource Self}" />
                            <Binding Path="RecordsetList" />
                        </MultiBinding>
                    </telerik:RadComboBox.Width>

                    <telerik:RadComboBox.ItemContainerStyleSelector>
                        <telerik:ConditionalStyleSelector>
                            <telerik:StyleRule Condition="MetricTypeId=1">
                                <Style TargetType="telerik:RadComboBoxItem">
                                    <Setter Property="Foreground" Value="Red" />
                                </Style>
                            </telerik:StyleRule>
                        </telerik:ConditionalStyleSelector>
                    </telerik:RadComboBox.ItemContainerStyleSelector>
                </telerik:RadComboBox>
0
Sia
Telerik team
answered on 20 Feb 2018, 02:44 PM
Hello,

You need to use ItemContainerStyleSelector as shown in our help. In your case you will apply two different styles depending on the MetricTypeId property. Also it is very important to base the style on RadComboBoxItemStyle if you use implicit styles, as you did with the GridViewRowStyle:
<Style x:Key="EnableStyle" TargetType="telerik:RadComboBoxItem" BasedOn="{StaticResource RadComboBoxItemStyle}">
    <Setter Property="Foreground" Value="Black"/>
</Style>
 
<Style x:Key="DisableStyle" TargetType="telerik:RadComboBoxItem" BasedOn="{StaticResource RadComboBoxItemStyle}">
    <Setter Property="Foreground" Value="Gray"/>
</Style>

If this does not help, can you please send us a small project showing the specific scenario in your application.

Regards,
Sia
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sri
Top achievements
Rank 1
answered on 20 Feb 2018, 04:26 PM
That worked. Thanks
Tags
ComboBox
Asked by
Scott
Top achievements
Rank 1
Answers by
Dani
Telerik team
Scott
Top achievements
Rank 1
Phil
Top achievements
Rank 1
Francis
Top achievements
Rank 1
Sri
Top achievements
Rank 1
Sia
Telerik team
Share this question
or