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

ComboBox inside TileView does not bind ItemSource

3 Answers 59 Views

TileView

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

3 Answers, 1 is accepted

answered on 25 Mar 2010, 08:50 AM

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

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.

answered on 25 Mar 2010, 10:04 PM

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.RowDefinitions>

</Grid.RowDefinitions>

<Grid.RowDefinitions>

</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>

</telerik:RadTileView.ItemTemplate>

<telerik:RadTileView.ContentTemplate>

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

<Controls:RadFluidContentControl.SmallContent>

</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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<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>

<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.

answered on 26 Mar 2010, 05:47 PM

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