Binding in RadOutlookBar

2 posts, 0 answers
  1. Seb
    Seb avatar
    1 posts
    Member since:
    Jul 2014

    Posted 28 Oct 2014 Link to this post

     I am creating a lightswitch silverlight shell, and its coming on well.I managed to use your radRibbon control and its perfect!However, I cannot get the outlookbar working as required.
    ​As you can see, am using radribbon on top and radoutlookbar on the left. My problem is binding the radoutlookbar to the viewmodel. My code (xaml) is here for the outlook bar portion:

            <telerik:RadOutlookBar x:Name="ScreenTree" Grid.Column="0" Grid.Row="1" Grid.RowSpan="2"
                                   ShellHelpers:ComponentViewModelService.ViewModelName="Default.NavigationViewModel"
                                   ItemsSource="{Binding NavigationItems}">
                <telerik:RadOutlookBar.ContentTemplate>
                    <DataTemplate>
                        <telerik:RadTreeView ItemsSource="{Binding ElementName=ScreenTree, Path=ItemsSource}">
                            <telerik:RadTreeView.ItemTemplate>
                                <windows:HierarchicalDataTemplate ItemsSource="{Binding Children}">
                                    <TextBlock Style="{StaticResource TextBlockFontsStyle}"
                                               Text="{Binding DisplayName}"
                                               Foreground="{StaticResource NormalFontBrush}" 
                                               MouseLeftButtonDown="NavigationItemLeftButtonDown" />
                                </windows:HierarchicalDataTemplate>
                            </telerik:RadTreeView.ItemTemplate>
                        </telerik:RadTreeView>
                    </DataTemplate>
                </telerik:RadOutlookBar.ContentTemplate>
                <telerik:RadOutlookBar.TitleTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding DisplayName}"/>
                    </DataTemplate>
                </telerik:RadOutlookBar.TitleTemplate>
                <telerik:RadOutlookBar.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding DisplayName}"/>
                    </DataTemplate>
                </telerik:RadOutlookBar.ItemTemplate>
            </telerik:RadOutlookBar>

    The radoutlook bar is displaying the items, but the sub menus cannot appear. Am using the shell in a lightswitch app that has cascaded menus that i want them appear inside the tree view.



  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 29 Oct 2014 Link to this post

    Hello Seb,

    I tested the described scenario and the binding works as expected. 

    My NavigationViewModel contains NavigationItems property which holds the view models for the outlook bar items. Each of those view models contains a Children property that holds the view models for the tree view items. And each tree view item model contains a Children collection.

    I noticed that you were using the HierarchicalDataTemplate from the System.Windows.Controls namespace and there is no ItemTemplate defined for it. When you use RadTreeView you will need to use the Telerik.Windows.Controls.HierarchicalDataTemplate class instead. Otherwise when you don't define ItemTemplate for the HierarchicalDataTemplate only the first level of the tree will be displayed. If there is no ItemTemplate defined our hierarchical template uses itself as its ItemTemplate.

    Can you please try to replace the <windows:HierarchicalDataTemplate> in the RadTreeView.ItemTemplate with <telerik:HierarchicalDataTemplate> and see if it works as expected.

    You can also take a look at the Data Binding SDK example which demonstrates data bound outlook bar with a TreeView inside it. 

    If this doesn't help, can you please prepare an isolated project with your implementation and steps to reproduce the issue. This will allow us to test it locally and investigate what is missing from the project.

    Regards,
    Martin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
Back to Top