Using AlternationCount with RadComboBox?

[Richard]

I'm using a RadComboBox with a data template which is bound to ItemTemplate:

        <telerik:RadComboBox 
            AlternationCount="1"
            Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
            ItemTemplate="{StaticResource ComboBoxCustomTemplate}"
            ItemsSource="{Binding Rates}"
            SelectedItem="{Binding SelectedRate}"
            TextSearch.TextPath="FormattedDescription"
            IsEditable="True" 
            EmptyText="Select a Rate"></telerik:RadComboBox>

 

 

            <DataTemplate x:Key="ComboBoxCustomTemplate">
                <Grid Margin="5,5,5,5" Width="300">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0" FontWeight="Bold" Text="{Binding Code}" />
                    <TextBlock Grid.Column="1" HorizontalAlignment="Right"><Run Text="{Binding Rate}"></Run>%</TextBlock>
                    <TextBlock Grid.Column="2" Text="{Binding Description}" Margin="10, 0" />
                </Grid>
            </DataTemplate>

 

 

Can you tell me how to get the rows in the drop down to use an alternating background colour?

Using MVVM so prefer to do this in XAML not code behind if possible.

 

[Dinko | Tech Support Engineer]

Hi Richard,

Thank you for the provided code snippet.

You can consider using DataTemplateSelector and applied it to the ItemTemplateSelector property of the RadComboBox. In the override SelectTemplate method, you can get the parent RadComboBox and then index the current loading item. From here, you can return a similar template with a gray background (for example) as an alternate item. Check the following code snippet.

public class MyTemplateSelector : DataTemplateSelector
{
    public DataTemplate ItemTemplate { get; set; }
    public DataTemplate AlternateItemTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var comboBox = container.ParentOfType<Telerik.Windows.Controls.RadComboBox>();

        var index= comboBox.Items.IndexOf(item);
        if(index % 2==0)
        {
            return AlternateItemTemplate;
        }
        return ItemTemplate;
    }
}

I hope this approach will work for you.

Regards,
Dinko
Progress Telerik

[Richard]

Thanks Dinko, I'll check it out.

[Dinko | Tech Support Engineer]

Hello Richart,

As a follow-up to my previous reply. 

You can also consider using the native build-in AlternationCount property of the ItemsControl. As the RadComboBox derives from ItemsControl, you can take advantage of this property. You can check the following code snippet.

<telerik:RadComboBox AlternationCount="2" ItemsSource="{Binding Data}"
                        DisplayMemberPath="Name">
    <telerik:RadComboBox.ItemContainerStyle>
        <Style TargetType="telerik:RadComboBoxItem">
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                    <Setter Property="Background" Value="Bisque"/>
                    <Setter Property="Foreground" Value="Purple"/>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="LightBlue"/>
                    <Setter Property="Foreground" Value="Navy"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </telerik:RadComboBox.ItemContainerStyle>
</telerik:RadComboBox>

Regards,
Dinko
Progress Telerik

[Richard]

You're the man Dinko 👍

The second approach is perfect, very clean, no extra classes and all in the XAML.

I had to make the following change (style BasedOn=) otherwise the drop down list wouldn't appear:

 

<Style TargetType="telerik:RadComboBoxItem" BasedOn="{StaticResource RadComboBoxItemStyle}">

 

But this might be down to the way I'm merging resource dictionaries.

Thanks

[Dinko | Tech Support Engineer]

Hi Richard,

I will assume that you are using our NoXAML binaries. You have to keep in mind that in the NoXAML scenario, implicit style targeting our controls needs to be based on our controls' default style. Otherwise, the implicit style will override the default one. You can read more about this in the Styling the Controls help article.

Regards,
Dinko
Progress Telerik