Hi,

I have a RadComboBox inside the TileView.

The TileView's ItemSource is bound to a collection of Objects set in code.

The ItemSource of the TileView is also bound to different collection of objects. However the RadComboBox does not access the collection or display the items.

If the same ComboBox tag is moved outside the TileView, it works fine.

Can you provide some guidance as to how this can be resolved?

I am using the 2010 Q1 release controls.



- Ivan.

Hello Ivan,

I am not sure I understand this part: "The ItemSource of the TileView is also bound to different collection of objects". I will be glad to help, but I will need you to either send me a sample project that demonstrates the problem or at least provide some code snippets that illustrate the ItemsSource collection, the types of the business objects you use, and the way you data bind the TileView and combobox.

All the best,
Tihomir Petkov
the Telerik team

Hi Tihomir,

Here is the code snippet
//////////////////////////////// MainPage.xaml

<

 

UserControl x:Class="TestTileView.MainPage"

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

 

 

xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

 

 

xmlns:telerikComboBox="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"

 

 

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 

 

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

 

 

 

<Grid x:Name="LayoutRoot" Background="White" ScrollViewer.VerticalScrollBarVisibility="Visible">

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

</Grid.RowDefinitions>

 

 

 

<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1">

 

 

 

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" Padding="0" BorderThickness="0" >

 

 

 

<Border Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center">

 

 

 

<Grid Background="White" ScrollViewer.VerticalScrollBarVisibility="Visible">

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

</Grid.RowDefinitions>

 

 

 

<telerik:RadTileView x:Name="ProductTileView" Width="600" Height="500" Grid.Row="1" Grid.Column="1" MinimizedColumnWidth="197" ItemsSource="{Binding ProductList}" >

 

 

 

<telerik:RadTileView.ItemTemplate>

 

 

 

<DataTemplate>

 

 

 

<TextBlock Text="{Binding Name}" Grid.Row="1" Grid.Column="1" />

 

 

 

</DataTemplate>

 

 

 

</telerik:RadTileView.ItemTemplate>

 

 

 

<telerik:RadTileView.ContentTemplate>

 

 

 

<DataTemplate>

 

 

 

<Controls:RadFluidContentControl SmallToNormalThreshold="100, 100" NormalToSmallThreshold="99, 99" NormalToLargeThreshold="300, 300" LargeToNormalThreshold="299, 299">

 

 

 

<Controls:RadFluidContentControl.SmallContent>

 

 

 

<Border Width="100" Height="30">

 

 

 

<TextBlock Text="{Binding Name}" />

 

 

 

</Border>

 

 

 

</Controls:RadFluidContentControl.SmallContent>

 

 

 

<Controls:RadFluidContentControl.Content>

 

 

 

<Image Source="{Binding Name}"

 

 

HorizontalAlignment="Left" Margin="13 13 0 0" Height="130"

 

 

Width="279" VerticalAlignment="Top" />

 

 

 

</Controls:RadFluidContentControl.Content>

 

 

 

<Controls:RadFluidContentControl.LargeContent>

 

 

 

<Grid Width="400" Height="400" >

 

 

 

<Grid.ColumnDefinitions>

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

<ColumnDefinition Width="200" />

 

 

 

<ColumnDefinition Width="200" />

 

 

 

<ColumnDefinition Width="200" />

 

 

 

</Grid.ColumnDefinitions>

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

<RowDefinition Height="Auto" />

 

 

 

</Grid.RowDefinitions>

 

 

 

<TextBlock Text="Does Not Work Here" Grid.Row="1" Grid.Column="1" />

 

 

 

<telerikComboBox:RadComboBox Grid.Row="2" Grid.Column="1" SelectedItem="{Binding Path=ProductType, Mode=TwoWay, ValidatesOnExceptions=True}" DisplayMemberPath="Name" ItemsSource="{Binding Path=ProductTypes}" Margin="5 5 5 5"></telerikComboBox:RadComboBox>

 

 

 

</Grid>

 

 

 

</Controls:RadFluidContentControl.LargeContent>

 

 

 

</Controls:RadFluidContentControl>

 

 

 

</DataTemplate>

 

 

 

</telerik:RadTileView.ContentTemplate>

 

 

 

</telerik:RadTileView>

 

 

 

</Grid>

 

 

 

</Border>

 

 

 

</ScrollViewer>

 

 

 

</StackPanel>

 

 

 

<TextBlock HorizontalAlignment="Left" Text="Works Here" Width="100" Grid.Row="2" Grid.Column="1" />

 

 

 

<telerikComboBox:RadComboBox HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" Width="100" DisplayMemberPath="Name" ItemsSource="{Binding Path=ProductTypes}" Margin="5 5 5 5"></telerikComboBox:RadComboBox>

 

 

 

</Grid>

 

</

 

UserControl>

 

////////////////////////// MainPage.xaml.cs

using

 

System.Windows.Controls;

 

namespace

 

TestTileView

 

{

 

public partial class MainPage : UserControl

 

{

 

public DataGenerator dataGenerator = new DataGenerator();

 

 

public MainPage()

 

{

DataContext = dataGenerator;

InitializeComponent();

}

}

}

//////////////////////////////////// DataGenerator

using

 

System.Collections.ObjectModel;

 

using

 

System.Collections.Generic;

 

namespace

 

TestTileView

 

{

 

public class DataGenerator

 

{

 

public List<ProductType> ProductTypes{ get; set; }

 

 

public DataGenerator()

 

{

ProductTypes =

new List<ProductType>();

 

ProductTypes.Add(

new ProductType { Name = "Product Type 1" });

 

ProductTypes.Add(

new ProductType { Name = "Product Type 2" });

 

ProductTypes.Add(

new ProductType { Name = "Product Type 3" });

 

ProductList = GetData();

}

 

private ObservableCollection<Product> GetData()

 

{

 

var products = new ObservableCollection<Product>();

 

products.Add(

new Product { Name = "Test Product 1", ProductType = ProductTypes[0] });

 

products.Add(

new Product { Name = "Test Product 2", ProductType = ProductTypes[1] });

 

products.Add(

new Product { Name = "Test Product 3", ProductType = ProductTypes[2] });

 

 

return products;

 

}

 

public ObservableCollection<Product> ProductList { get; set; }

 

}

 

public class Product

 

{

 

public string Name { get; set; }

 

 

public ProductType ProductType { get; set; }

 

}

 

public class ProductType

 

{

 

public string Name { get; set; }

 

}

}

Regards,

Ivan.

Hello Ivan,

Thank you for the code you pasted - it made things clearer. Judging from the code, the problem is not in the TileView or ComboBox controls, but rather in the data binding you've specified. The DataConext within the DataTemplate you've created for the content of TileViewItems is an instance of the Product class, because you have set the ItemsSource of the TileView to the ProductList collection. Because of this, you cannot bind the ComboBox.ItemsSource property to the ProductTypes collection, because it is not part of any given Product instance. So the problem is one of scopes. What you can do in your case is either add the ProductTypes collection to each Product object, or use a converter that will return the ProductTypes collection (getting it from somewhere outside your Product object).

I hope my suggestion will help make things clearer. Let me know if you have further questions.

Best wishes,
Tihomir Petkov
the Telerik team