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

Binding fails in RadTileView's ListBox

2 Answers 85 Views
TileView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Nemo
Top achievements
Rank 1
Nemo asked on 15 Jun 2012, 07:44 PM

I have a RadTileView(Bind to an Observablecollection in ViewModel) , TileView has a ListBox (binded to a Dictionary). I am not able to capture SelectedItem from the ListBox in the ViewModel. Could you please check what went wrong in this code?

Home.xaml
  
<UserControl.Resources>
<!--DictionaryTemplate-->
        <DataTemplate x:Key="DictionaryTemplate">
            <StackPanel Orientation="Horizontal" >
                <TextBlock  Text="{Binding Key}" FontSize="14" />
                <TextBlock  Text=" - " FontSize="14" />
                <TextBlock Text="{Binding Value}" FontSize="14"/>
            </StackPanel>
        </DataTemplate>
<!-- End of DictionaryTemplate-->
</UserControl.Resources>
  
<StackPanel>
<telerik:RadTileView Name="ResultTileView"       
                     ItemsSource="{Binding ResultCollection}"    
                     MaxColumns="4"
ColumnWidth="290"        
RowHeight="180"        
HorizontalAlignment="Center"
MinimizedColumnWidth="350"
MinimizedRowHeight="350"
Width="1160" Height="Auto"
MaximizeMode="Zero" >
<!--Item Template-->
<telerik:RadTileView.ItemTemplate>
         <DataTemplate>
              <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Name}"/>                                                  
              </StackPanel>
         </DataTemplate>
</telerik:RadTileView.ItemTemplate>
<!—End of Item Template-->
  
<!--Content Template-->
     <telerik:RadTileView.ContentTemplate  >
          <DataTemplate>
              <StackPanel>
                 <ListBox Name="ResultLBox"
ItemsSource="{Binding KeyDictionary }"
ItemTemplate="{StaticResource DictionaryTemplate}" 
                     SelectedItem="{Binding SelectedKeyDictionary}"
                     Height="100"                                                     
Width="200"/>
                 </ListBox>                                 
        </StackPanel>
           </DataTemplate>
        </telerik:RadTileView.ContentTemplate>
</telerik:RadTileView>
</StackPanel>
  
Model:
public class Result
    {
 string name;
        public string Name
        {
            get { return name; }
            set { name = value; }
        }
  
        private Dictionary<string, string> keyDictionary;
        public Dictionary<string, string> KeyDictionary
        {
            get { return keyDictionary; }
            set { keyDictionary = value; }
        }
    }
  
ViewModel:
public class HomeViewModel : INotifyPropertyChanged
    {
  
#region Constructor
      public HomeViewModel()
        {
            AddData();
        }
       #endregion
  
  
       //Bind to RadTileView
       ObservableCollection<Result> resultCollection;
       public ObservableCollection<Result> ResultCollection
        {
            get { return resultCollection; }
            set
            {
                resultCollection = value;
                NotifyPropertyChanged("ResultCollection");
            }
        }
  
//Bind to SelectedItem of RadListBox
private Dictionary<string, string> selectedKeyDictionary;
public Dictionary<string, string> SelectedKeyDictionary
        {
            get { return selectedKeyDictionary; }
            set { selectedKeyDictionary = value;
                  NotifyPropertyChanged("SelectedKeyDictionary");
                }
        }
//Fill the ObservableCollection
void AddData()
        {
            Dictionary<string, string> resultDictionary1 = new Dictionary<string, string>();
            resultDictionary1.Add("Key1", "Value1");
            Dictionary<string, string> resultDictionary2 = new Dictionary<string, string>();
            resultDictionary2.Add("Key2", "Value2");
            Dictionary<string, string> resultDictionary3 = new Dictionary<string, string>();
            resultDictionary3.Add("Key3", "Value3");
            Dictionary<string, string> resultDictionary4 = new Dictionary<string, string>();
            resultDictionary4.Add("Key4", "Value4");
            Dictionary<string, string> resultDictionary5 = new Dictionary<string, string>();
            resultDictionary5.Add("Key5", "Value5");
  
            Result rel1 = new Result() { Name = "Result1", KeyDictionary = resultDictionary1 };
            Result rel2 = new Result() { Name = "Result2", KeyDictionary = resultDictionary2 };
            Result rel3 = new Result() { Name = "Result3", KeyDictionary = resultDictionary3 };
            Result rel4 = new Result() { Name = "Result4", KeyDictionary = resultDictionary4 };
            Result rel5 = new Result() { Name = "Result5", KeyDictionary = resultDictionary5 };
  
            ResultCollection = new ObservableCollection<Result>();
            ResultCollection.Add(rel1);
            ResultCollection.Add(rel2);
            ResultCollection.Add(rel3);
            ResultCollection.Add(rel4);
            ResultCollection.Add(rel5);
  
  
#region INotifyPropertyChanged
       public event PropertyChangedEventHandler PropertyChanged;
  
       protected virtual void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
#endregion
  
       }

2 Answers, 1 is accepted

Sort by
0
Accepted
Zarko
Telerik team
answered on 20 Jun 2012, 11:32 AM
Hello Pratihbha,
The problem is that the DataContext of your RadTileViewItems are Result but you try to bind the SelectedItem to a property that is in your HomeViewModel (SelectedKeyDictionary). You'll have to add a SelectedKey property to your Result business object and maybe handle the propertyChanged event in the HomeViewModel so that you could populate the SelectedKeyDictionary.
I've attached a sample project so could you please examine it and if you have further questions feel free to ask.

All the best,
Zarko
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Nemo
Top achievements
Rank 1
answered on 21 Jun 2012, 09:21 PM
Thank you Zarko!
Tags
TileView
Asked by
Nemo
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Nemo
Top achievements
Rank 1
Share this question
or