RadPanelBar dynamic data binding in MVVM

6 posts, 1 answers
  1. Suresh
    Suresh avatar
    14 posts
    Member since:
    Jun 2011

    Posted 20 Jul 2011 Link to this post

    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>
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 21 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for WPF is Visual Studio 2017 Ready
  4. Suresh
    Suresh avatar
    14 posts
    Member since:
    Jun 2011

    Posted 22 Jul 2011 Link to this post

    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>();
    }
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 27 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. Suresh
    Suresh avatar
    14 posts
    Member since:
    Jun 2011

    Posted 27 Jul 2011 Link to this post

    Updated my earlier post with the CollectionConverter.
  7. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 29 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top
UI for WPF is Visual Studio 2017 Ready