EmptySelectionBoxTemplate binding EmptyText

[Andrea]

Hi I am using the RadComboBox and I need to customize teh EmptySelectionBox using the EmptySelectionBoxTemplate.
It works!
Except that I need to programmatically set the EmptyText dur to localization reason.
So I tried to do something like;

<DataTemplate x:Key="ComboBoxEmptyTemplate">

 

<TextBlock Opacity="0.5" Text="{Binding EmptyText}"/>

 

</DataTemplate>
and also

 

<DataTemplate x:Key="ComboBoxEmptyTemplate">

<TextBlock Opacity="0.5" Text="{TemplateBinding EmptyText}"/>

</DataTemplate>

But the text is never displayed.
Can you tell me how shall I bind the TExtBlock Text property to the ComboBox EmptyText property?

[Konstantina]

Hi Andrea,

You can go through this online demo in which the EmptyText property is bound. However, you cannot bind the TextBlock in the DataTemplate, because its DataContext of the EmptySelectionBoxTemplate is the one of the selected item, and since there is no selected item the DataContext is empty.

Hope this information helps.

Kind regards,
Konstantina
the Telerik team

[Michael]

Don't know why it works, but the following seems to do what you are looking for. 

<Grid x:Name="LayoutRoot" >
  <Grid.Resources>
    <DataTemplate x:Key="emptySelectionBoxTemplate">
       <TextBlock FontStyle="Italic" Foreground="Gray" Text="{Binding}" />
    </DataTemplate>
  </Grid.Resources>

  <telerik:RadComboBox VerticalAlignment="top" Width="300" EmptyText="Please select an agency" EmptySelectionBoxTemplate="{StaticResource emptySelectionBoxTemplate}" />
</Grid>

I suspect you could then bind the "EmptyText" property, too.

<telerik:RadComboBox VerticalAlignment="top" Width="300" EmptyText="{Binding FieldName}" EmptySelectionBoxTemplate="{StaticResource emptySelectionBoxTemplate}" />

[Francis]

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.  

[Konstantina]

Hello Francis,

The issue with the ComboBox is that the SelectedItem should be set after the ItemsSource is loaded fully, as it tries only once to select the item, which might not be the first one. Make sure that all items are loaded in the source and after that set the SelectedItem property. More on the issue you could find in this forum discussion: http://www.telerik.com/community/forums/silverlight/combobox/selecteditem-not-in-itemssource.aspx#1969879

Hope this helps.

Regards,
Konstantina
the Telerik team

[Francis]

Hi Konstantina,

That you for your response, it has provided me with much insight. However, the solution you provide in an MVVM scenario will end up breaking the MVVM. My combo box item list is populated in my viewmodel and when getting items from the database to the view, I set the selected item in the viewmodel. In view of this, I have found that implementing the IEquatable on my class solves the problem. below is the code sample for the benefit of any other person who might run into this problem.

THE CLASS
public class TestModel : INotifyPropertyChanged, IEquatable<TestModel>
    {


        #region Properties


        private string _item1;
        public string Item1
        {
            get { return _item1; }
            set
            {
                _item1 = value;
                OnPropertyChanged("Item1");
            }
        }


        private string _detail;
        public string Detail
        {
            get { return _detail; }
            set
            {
                _detail = value;
                OnPropertyChanged("Detail");
            }
        }


        #endregion


        #region NotifyPropertyChanged


        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }


        #endregion


        #region IEquatable


        public override string ToString()
        {
            return Item1;
        }


        public bool Equals(TestModel other)
        {
            if (ReferenceEquals(null, other)) return false;
            if (ReferenceEquals(this, other)) return true;
            return Equals(other.Item1, Item1) && Equals(other.Detail, Detail);
        }


        public override bool Equals(object obj)
        {
            if (ReferenceEquals(null, obj)) return false;
            if (ReferenceEquals(this, obj)) return true;
            if (obj.GetType() != typeof(TestModel)) return false;
            return Equals((TestModel)obj);
        }


        public override int GetHashCode()
        {
            int result = Item1.GetHashCode();
            result = (result*397) ^ (Detail != null ? Detail.GetHashCode() : 0);
            return result;
        }


        public static bool operator == (TestModel left, TestModel right)
        {
            if (ReferenceEquals(left, null)) return false;
            return left.Equals(right);
        }


        public static bool operator !=(TestModel left,TestModel right)
        {
            return !(left == right);
        }


        #endregion
    }

THE XAML for the ComboBox.

<telerik:RadComboBox ItemsSource="{Binding TestModelList}" SelectedItem="{Binding SelectedTestModel,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" MinWidth="200"
                                                 Text="{Binding SelectedTestModel.Item1, Mode=TwoWay}">
                                <telerik:RadComboBox.ItemTemplate>
                                    <DataTemplate>
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                </Grid.RowDefinitions>
                                                <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="3,0,0,0" HorizontalAlignment="Left">
                                                    <TextBlock HorizontalAlignment="Left" Text="{Binding Item1,Mode=TwoWay}" FontWeight="Bold"/>
                                                </StackPanel>
                                                <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="3,0,0,0" HorizontalAlignment="Left" >
                                                    <Border BorderThickness="2" CornerRadius="10" Background="Azure">
                                                        <TextBlock Text="{Binding Detail,Mode=TwoWay}" MinWidth="200" />
                                                    </Border>
                                                </StackPanel>
                                            </Grid>
                                    </DataTemplate>
                                </telerik:RadComboBox.ItemTemplate>
                                <telerik:RadComboBox.SelectionBoxTemplate>
                                    <DataTemplate>
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition />
                                                    <RowDefinition />
                                                </Grid.RowDefinitions>
                                                <StackPanel Grid.Row="0" Margin="3,0,0,0" HorizontalAlignment="Left">
                                                    <TextBlock Text="{Binding Item1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" FontWeight="Bold" />
                                                </StackPanel>
                                            </Grid>
                                    </DataTemplate>
                                </telerik:RadComboBox.SelectionBoxTemplate>
                            </telerik:RadComboBox>


The viewmodel is easy to setup for anyone with some MVVM knowledge. But that about solves the problem in an MVVM scenario.

Thanks,


Francis.

[Konstantina]

Hi Francis,

Thank you for sharing you solution.

Regards,
Konstantina
the Telerik team