1. Home
  2. Forum
  3. WPF
  4. Explorer Bar using Hierarchy Navigatror

Explorer Bar using Hierarchy Navigatror

1) I am following the documentation to create an Explorer Bar as a user control. The binding is not working as suggested in the documentation.

          <sf:HierarchyNavigator DockPanel.Dock="Top" Height="24" Margin="2" 
                                   ItemsSource="{Binding MyColl, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}">
                <sf:HierarchyNavigator.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Items}" DataType="{x:Type local:MyCollectionItems}">
                        <TextBlock Margin="2,0" Text="{Binding ContentString}"/>
                    </HierarchicalDataTemplate>
                </sf:HierarchyNavigator.ItemTemplate>
            </sf:HierarchyNavigator>


        Tried also <HierarchicalDataTemplate ItemsSource="{Binding Items}">

Code:

     public class HierarchyItem
    {
        public string ContentString { get; set; }
        public HierarchyItem(string content)
        {
            this.ContentString = content;
            itemsObservableCollection = new ObservableCollection<HierarchyItem>();

            if (!Directory.Exists(content)) return;
            
            string[] myItems = Directory.GetDirectories(content);

            foreach (string item in myItems)
            {
                itemsObservableCollection.Add(new HierarchyItem(item));
            }
            Items = itemsObservableCollection;
        }
        private ObservableCollection<HierarchyItem> itemsObservableCollection;
        public ObservableCollection<HierarchyItem> Items
        {
            get { return itemsObservableCollection; }
            set
            {
                if (itemsObservableCollection != value)
                {
                    itemsObservableCollection = value;
                }
            }
        }
    }

     public class MyCollectionItems : ObservableCollection<HierarchyItem>
    {
        public MyCollectionItems()
        {
            HierarchyItem root = new HierarchyItem("My Files");

            //Only show the initial folders in the root
            //Later implementation: Clicking on a folder creates sub-folder list as child items at runtime
            HierarchyItem item1 = new HierarchyItem("Item1");
            item1.ContentString = @"C:\Test";
            root.Items.Add(item);

            HierarchyItem item2 = new HierarchyItem("Item2");
            item2.ContentString = @"D:\Test;     
            root.Items.Add(item);

            this.Add(root);
        }
    }



2) Is there an example to create the Explorer Bar dynamically.

11 Replies
GS Gokul Sainarayanan Syncfusion Team February 10, 2020 02:08 PM UTC

Hi Mishra,

Thank you for contacting Syncfusion support.

We are currently checking your reported query in Hierarchy Navigator. We will provide you further details regarding this on or before February 12, 2020.

Regards,
Gokul S

GS Gokul Sainarayanan Syncfusion Team February 12, 2020 01:06 PM UTC

Hi Mishra,

Thanks for your patience.

Query 1: I am following the documentation to create an Explorer Bar as a user control. The binding is not working as suggested in the documentation.

We have checked your reported query in Hierarchy Navigator. We have prepared a sample where we have placed the Hierarchy Navigator inside the UserControl and bind the items as suggested in the documentation. We can notice that the items are loaded properly in the Hierarchy Navigator. Please find the sample in the following location.

Sample: https://www.syncfusion.com/downloads/support/forum/151336/ze/HierarchyNavigator_Sample1342762294  

Please check and let us know whether it resolves your reported query.

Query 2: Is there an example to create the Explorer Bar dynamically.

In the above attached sample, we have added the UserControl that contains the HierarchyNavigator in the run time. In case we have misunderstood your reported query then let us know whether your reported query is to add the UserControl in the run time or to add items to the already present HierarchyNavigator in the UserControl. It will help us to proceed further

Regards,
Gokul S

SS ssm February 15, 2020 06:09 PM UTC

Thanks for your help. 

Query1: It worked.

Query2: I was looking for adding subfolders at runtime in the navigator bar. I am able to add the subfolders at runtime but they do not refresh the navigator bar after property change. I am adding items using the HierarchyItemChanged event. I couldn't find a HierarchyItemChanging event.


ON Olety Nikhilesh Olety Nagendra Syncfusion Team February 17, 2020 01:01 PM UTC

Hi Mishra,

Thanks for your patience.

We are still working on your requirement with adding Items at runtime in Hierarchy Navigator, we will provide the further details on or before 19th Feb 2020.

We appreciate your patience until then.

Regards,
Nikhilesh O


ON Olety Nikhilesh Olety Nagendra Syncfusion Team February 17, 2020 01:20 PM UTC

Hi Mishra,

Thank you for your patience.

Your requirement can be achieved by using a separate property for ItemsSource instead of individual class, using this property we can able to add items to it at run time. We have modified the sample for further reference.

Please find the sample below.

Please let us know if this fulfills your requirement or if you have any further queries.

Regards,
Nikhilesh O


SS ssm February 18, 2020 05:29 PM UTC

I had already implemented the DP for ObservableCollection. I am trying to dynamically add child items when a hierarchutiem is selected. I am able to add the child items to the collection through the HierarchyNavigatorSelectedItemChanged event handler bu the navigator doesn't reflect the change. Somehow the CollectionChanged event is not firing.

Also tried to capture SelectedItem DP PropertyChangedCallback event but didn't work.

ON Olety Nikhilesh Olety Nagendra Syncfusion Team February 19, 2020 06:59 AM UTC

Hi Mishra,

Thank you for the update.

We can dynamically add a child item to the selected item using the event HierarchyNavigatorSelectedItemChanged, please find the code snippet below.

 
 private void HierarchyNavigator_HierarchyNavigatorSelectedItemChanged(object sender, Syncfusion.Windows.Tools.Controls.HierarchyNavigatorSelectedItemChangedEventArgs e)
        {
            if ((sender as HierarchyItem).ContentString == @"C:\Test")
                (sender as HierarchyItem).HierarchyItems.Add(new HierarchyItem("Item3") { ContentString = @"Test Folders" });
        }


Please find the modified sample below.

In the sample when clicking the item with text 'C:\Test', we have added a new item 'Test Folders' as a child and the collection changed event in the HierarchyItem class has been invoked.

Please refer the sample and let us know if you have any concern or if you are following a different approach please provide us the code sample you are using as it would be helpful in finding solution to your query at earliest.

Regards,
Nikhilesh O


SS ssm February 23, 2020 07:48 AM UTC

Hi,

I am attaching my sample code. The root (My Files) has 2 elements C:\ and D:\. When you select C:\ it gets the subfolder in the collection but doesn't show up in the navigator. If you select C;\ again the subitems populate.

May be there is a smarte way to implement the collection change here.

Thanks in advance for your help

Attachment: Syncfusion_Hierarchy_Navigator_cec2ae45.rar

ON Olety Nikhilesh Olety Nagendra Syncfusion Team February 24, 2020 09:06 AM UTC

Hi Mishra,

Thank you for the update.

We referred your sample and found that you were assigning the newly added items by using a new child collection for the selected item. Please find the changed code snippet, you can just add the items in the already available child collection.

 private void HierarchyNavigator2_HierarchyNavigatorSelectedItemChanged(object sender, Syncfusion.Windows.Tools.Controls.HierarchyNavigatorSelectedItemChangedEventArgs e)
        {
            if (hierarchyNavigator2.SelectedItem == null) return;

            HierarchyItem selItm = hierarchyNavigator2.SelectedItem as HierarchyItem;
            string[] dirs = Directory.GetDirectories(selItm.ContentString, "*", SearchOption.TopDirectoryOnly);

            foreach (string dir in dirs)
            {
                selItm.HierarchyItems.Add(new HierarchyItem(dir));
            }
        }


Please refer the above sample and let us if this fulfills your requirement.

Regards,
Nikhilesh O


SS ssm February 24, 2020 03:59 PM UTC

Thanks for your help. It works perfectly now. You can close the issue. Thanks

ON Olety Nikhilesh Olety Nagendra Syncfusion Team February 25, 2020 05:27 AM UTC

Hi Mishra,

Thank you for the update.

We are glad to hear that the reported query has been resolved at your end. If you have any further queries please let us know as always we are happy to assist you.

Regards,
Nikhilesh O


Loader.
Up arrow icon