RadPanelBar dynamic data binding in MVVM

[Suresh]

I have the following code for configuring RadPanelBar for Silverlight.

I have created a resource in the UserControl.Resources and referred to it through ItemTemplate of RadPanelBar.
The data source for the RadPanelBar is BindingProperties.SelectedTemplate.Charts. I am unable to generate the content of the RadPanelBarItem. What ever I do I either get the content in the header of the item or will not get any content generated.

BindingProperties.SelectedTemplate is an entity and Charts is a list of objects.

Am I missing any bindings here.

<UserControl.Resources>

    <telerik:HierarchicalDataTemplate x:Key="ChartDetailView">

        <StackPanel Orientation="Horizontal" Grid.ColumnSpan="2" >

            <Button Width="25" Height="25" Margin="10,0,0,0">

                <Image Source="Resources/DeleteRed.png" HorizontalAlignment="Stretch" VerticalAlignment="Top" />

            </Button>

            <Views:ChartConfigView  VerticalAlignment="Top" Grid.ColumnSpan="2" />

        </StackPanel>

    </telerik:HierarchicalDataTemplate>

 

    <telerik:HierarchicalDataTemplate x:Key="ChartView" ItemsSource="{Binding}" ItemTemplate="{StaticResource ChartDetailView}">

        <TextBlock Text="{Binding Path=ChartTitle}" Margin="5 3" />

    </telerik:HierarchicalDataTemplate>

</UserControl.Resources>

<telerik:RadPanelBar telerik:StyleManager.Theme="Vista" ItemsSource="{Binding Path=BindingProperties.SelectedTemplate.Charts}" ItemTemplate="{ StaticResource ChartView}" ></telerik:RadPanelBar>

[Kiril Stanoev]

Hello Suresh,

From the code snippet I am unable to determine what exactly the issue is. Could you please send us a sample project which reproduces the problem. This way we will be better able to assist you.

All the best,
Kiril Stanoev
the Telerik team

[Suresh]

I have an object with two lists of child objects within. I want to show the content of object in the page and the two lists to be displayed in RadPanelBar controls so that I can see the content of the object and the lists to be collapsible sections and each item in the collapsible section should show relevant child objects' contents with probably the title of the child object as item header.

My object structure is as below.

//Parent Type
public class Chart

{

    public string ChartTitle { get; set; }

    public List<ChartSeries> Series { get; set; }

    public List<ChartZone> Zones { get; set; }

}

 
//Child Type 1

public class ChartSeries

{

    public string SeriesName { get; set; }

    public string SeriesColor { get; set; }

}

 
//Child Type 2

public class ChartZone

{

    public string ZoneName { get; set; }

    public string Color { get; set; }

}

My XAML has the below code.

<StackPanel Orientation="Vertical" Grid.Row="18" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,10,10,0">
    <!--Chart Series Configuratin Section Start-->
    <telerik:RadPanelBar ItemsSource="{Binding Path=Series}" DataContext="{Binding}" telerik:StyleManager.Theme="Vista">
        <telerik:RadPanelBar.Resources>
            <DataTemplate x:Key="seriesTemplate">
                <Views:SeriesView DataContext="{Binding}" VerticalAlignment="Top" Grid.ColumnSpan="2" />
            </DataTemplate>
        </telerik:RadPanelBar.Resources>
        <telerik:RadPanelBar.ItemTemplate>
            <telerik:HierarchicalDataTemplate ItemsSource="{Binding Converter={StaticResource collectionConverter}}" ItemTemplate="{StaticResource seriesTemplate}">
                <TextBlock Text="{Binding Path=SeriesName, Mode=TwoWay}" Margin="5 3"/>
            </telerik:HierarchicalDataTemplate>
        </telerik:RadPanelBar.ItemTemplate>
    </telerik:RadPanelBar>
    <!--Chart Series Configuration Section End-->
</StackPanel>

<StackPanel Orientation="Vertical" Grid.Row="19" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,10,10,0">
    <!--Chart Zone Configuratin Section Start-->
    <telerik:RadPanelBar ItemsSource="{Binding Path=Zones}" DataContext="{Binding}" telerik:StyleManager.Theme="Vista">
        <telerik:RadPanelBar.Resources>
            <DataTemplate x:Key="zoneTemplate">
                <Views:ZoneView DataContext="{Binding}" VerticalAlignment="Top" Grid.ColumnSpan="2" />
            </DataTemplate>
        </telerik:RadPanelBar.Resources>
        <telerik:RadPanelBar.ItemTemplate>
            <telerik:HierarchicalDataTemplate ItemsSource="{Binding Converter={StaticResource collectionConverter}}" ItemTemplate="{StaticResource zoneTemplate}">
                <TextBlock Text="{Binding Path=ZoneName, Mode=TwoWay}" Margin="5 3"/>
            </telerik:HierarchicalDataTemplate>
        </telerik:RadPanelBar.ItemTemplate>
    </telerik:RadPanelBar>
    <!--Chart Zone Configuration Section End-->
</StackPanel>

Without the collectionConverter, It would render the RadPanelBar section headers but would not generate the content of the RadPanelBarItem. Is there any other way to generate the desired output without using the converter. Is there any other control which would generate the similar output. My CollectionConverter is as shown below.

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    if (typeof(Chart) == value.GetType())
    {
        return new ObservableCollection<Chart> { (Chart)value };
    }

    if (typeof(ChartSeries) == value.GetType())
    {
        return new ObservableCollection<ChartSeries> { (ChartSeries)value };
    }

    if (typeof(ChartZone) == value.GetType())
    {
        return new ObservableCollection<ChartZone> { (ChartZone)value };
    }

    return new ObservableCollection<object>();
}

[Petar Mladenov]

Hello Suresh,

 Could you please show us how your Converter works and what returns? In WPF Databinding in XAML is very powerful technique and probably this could be achieved only in XAML. 

Regards,
Petar Mladenov
the Telerik team

[Suresh]

Updated my earlier post with the CollectionConverter.

[Zarko]

Hello Suresh,
I think that in your case the only way to achieve the desired functionality is to use this converter. This is because the PanelBarItem is HeaderedItemsControl which means that it can display information only in its header and the only content it can have are other PanelBarItems. You should use this converter because the ItemsSource property of the HierarchicalDataTemplate accepts only collections and when you convert your business item to a collection with one item the PanelBarItem generates a child PanelBarItem for this business object and you can show your data in it.
I looked through your code and created a sample application so could you examine it and if this is not your desired behavior please feel free to tell us what you don't like.

Best wishes,
Zarko
the Telerik team