How do I bind a hierarchical collection to an SfNavigationDrawer

[alvin chen]

Hi,

just like SfTreeNavigator,i can bind a hierarchical collection to it`s datasource by HierarchicalDataTemplate.

but When i bind  a hierarchical collection to SfNavigationDrawer,No content is displayed on the first level, and the content is displayed on the second level. When the default level is collapsed, the system will be abnormal if the mouse clicks the level to expand it. Is there any way to get it? thanks

<syncfusion:SfNavigationDrawer x:Name="navigationDrawer"

                                                   Grid.Column="0"

                                                   DisplayMemberPath="Desc"

                                                   DisplayMode="Expanded"

                                                   IconMemberPath="ModelIcon"

                                                   ItemsSource="{Binding Models}"

                                                   >

                        <syncfusion:SfNavigationDrawer.ItemTemplate>

                            <HierarchicalDataTemplate ItemsSource="{Binding Models}">

                                <StackPanel Cursor="Hand" Orientation="Horizontal" HorizontalAlignment="Left">

                                    <!--<i:Interaction.Triggers>

                                        <i:EventTrigger EventName="MouseLeftButtonDown">

                                            <i:InvokeCommandAction Command="{Binding DataContext.NavigateCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}" CommandParameter="{Binding}" />

                                        </i:EventTrigger>

                                    </i:Interaction.Triggers>-->

                                    <TextBlock Margin="18,0,0,0"

                                               VerticalAlignment="Center"

                                               FontFamily="宋体"

                                               FontSize="12"

                                               Text="{Binding Desc}"

                                               />

                                </StackPanel>

                            </HierarchicalDataTemplate>

                        </syncfusion:SfNavigationDrawer.ItemTemplate>

                    </syncfusion:SfNavigationDrawer>

[Shivani Ramakrishnan]

Hi Alvin,

Query: Bind a hierarchical collection to a SfNavigationDrawer

We have looked into your query.  SfNavigationDrawer does not support HierarchicalDataTemplate. We can load the Items and SubItems by following the code snippet:

<Window.Resources>
        <Style x:Key="ItemStyle" TargetType="syncfusion:NavigationItem">
            <Setter Property="Icon" Value="{Binding Icon}" />
            <Setter Property="DisplayMemberPath" Value="Item" />
            <Setter Property="ItemsSource" Value="{Binding SubItems}" />
        </Style>
</Window.Resources>
    
<syncfusion:SfNavigationDrawer x:Name="navigationDrawer"
                                    Grid.Column="0"
                                    DisplayMemberPath="Item"
                                    DisplayMode="Expanded"
                                    IconMemberPath="Icon"                                  
                                    ItemContainerStyle="{StaticResource ItemStyle}"
                                    ItemsSource="{Binding Items}">

We have prepared a new sample for your reference and please get it from the attachments.

Please let us know if you need any other details.

Thanks,
Shivani

Attachment: NavDrawerApp_53631214.zip

[alvin chen]

Hi, Shivani

Thank you very much for your reply, my application can work by your code. Another requirement,How can navigationDrawer display a vectorgraph in navigationItem? How do i set the click command only for the child item, not the parent item`s click.

Regard

Alvin

[Shivani Ramakrishnan]

Hi Alvin,

Currently, we are validating the reported issue and we will let you know the details on September 28th, 2022. We appreciate your patience until then.

Regards

Shivani

[Shivani Ramakrishnan]

Hi Alvin,

Query 1: NavigationDrawer display Vectorgraph in NavigationItem

The vector graph icons can be set to the Icon property in the NavigationItem. Please check and let us know if you need any other details.

Query 2: Set the click command only for the child item, not the parent item

We can't set the click command only for the child items. It works for the parent item itself.

We have prepared a sample for the icon path and please get it from the attachments. Please let us know if the problem was resolved on your side.

Regards,
Shivani

Attachment: NavDrawerApp_9ca50662.zip