Sidebar-item (enableDock=true) custom icons and routes on item select/click

I now wish to dynamically load the side-bar items from a web-api back end service. This is simple enough and again I can get the information to create a sidebar-item and recreate the demonstration menu from the 'dock' example on your website.

I now need to pull some information through the service to configure the sidebar item.  FYI it info the extracted from the service is in the format of:

MenuItem consists of: 

     text to display,     

     icon name or image path,

     true => previous field is an image rather than material-icon

But how do I specify a sidebar item with:

Thanks in advance - I know there are a number of questions but they are related!

Regards

Hi Tim, 

 

We checked your reported query and based on that understood that your requirement is to render a Sidebar with hierarchical list items which has custom icons. And when the Sidebar is in docked state only the custom icon must be displayed and the list item/icon must have navigation on selecting them. 

 

For rendering hierarchial list items with custom icons you can utilize our Treeview component. Furthermore treeview has navigateUrl fields property which allows to specify hyperlinks for the tree nodes. 

 

For the first requirement – “To render hierarchial list items which displays custom icons when the Sidebar is in docked state”. We have already documented on how to achieve this in our help site. So please check this link to render a Treeview inside the Sidebar which displays the custom icons when the Sidebar is in docked state. In the treeview’s fields property you can set the required custom icon or image for each node using iconCss and imageUrl property. 

 

Once your required structure is achieved you can define separate component page to be routed on each node click and specify the routing url in the treeview’s navigateUrl field property. This will perform routing to the page based on the clicked tree node. 

 

To achieve this initially define the seperate component in the app module page 

 

App.module.ts 

 

Then enable routing for this component page 

 

App-routing.module.ts 

 

Finally provide the url to the required tree node in the navigateUrl field property, 

 

App.component.ts 

 

We have prepared a sample for your reference based on this. Please find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/146305/ze/Sidebar_routing1973461461  

 

Please check it and get back to us if you require any further assistance. 

 

Regards, 

Ashokkumar B. 

However, there are two issues I see:

Thanks

Hi Tim, 

 

Sorry for the inconvenience. 

 

In our previous update, we have shared the sidebar component with mediaQuery property. This property will close the sidebar component when the specified resolution meets. Also, the provided sample level customization done in humburger icon click function. This is the cause for icons are not aligned center during the window resize time. 

 

Now, we have modified the sample to align the icons using generic CSS selectors. Now, the icons will be aligned center position in both expanded and collapsed state. 

 

Also, we have removed mediaQuery property from the sample, it was added by mistake. Now, the sidebar will not collapse during the window resizing time. 

 

For your convenience we have attached the modified sample in a following link. 

 

Sample :  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_routing-1650459962.zip  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Narayanasamy P. 

fyi - I chose a slightly different approach based on the fact that I use a angular data service to load the treeview items and 'preserve' the open/closed status of the side bar.  This allowed me to decouple the hamburger menu 'click' event from the side bar processing.

But primarily I kept the media query approach and modified it by processing the close event manually:

By subscribing to sidebar status in the service I was, when the sidebar open/close status changed, able to finally process this locally:

I can then add orremove the mediaQuery string and apply the css style required.

The main advantage is that shrinking the window, with the status bar open, will still cause it to close as before; this handles the window resize 'gracefully' and is a 'better user experience'.  Closing the status bar at any point causes it to remain closed until a manual or programmatic intervention causes it to open it again.

Hope that makes sense!?  And thank you for all your help

Tim

Hi Tim Cannon, 

 

We are glad to hear the problem has been resolved. Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

This is the html angular produces

<a class="nav-link active" routerlink="/welcome" routerlinkactive="active" ng-reflect-router-link="/welcome" ng-reflect-router-link-active="active" rel='nofollow' href="/welcome">Welcome</a>

This is your output

<a class="e-list-text e-list-url" rel='nofollow' href="/welcome">Installation</a

Click the Installation option in the sidebar, then click the Design/Welcome link in the nav bar at the top here:

Then try the Installation link again - nothing happens

Hi Russell, 

 

We have checked your attached sample. In TreeView, the navigate URL was just added to the text element of the TreeView component. So, the reported case reproduced at our end. We have already considered this as a bug from our end, this bug fix will be included in our Volume 4 SP1 Release which is expected to be released at the end of January. Until then, track the bug status using the following link 

 

https://www.syncfusion.com/feedback/10416/url-is-added-to-text-element-of-menu-component-not-to-the-whole-li-element 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana. 

Hi Russell, 

 

Sorry for the inconvenience.  

  

We are still facing some difficult issue while implementing the feature. We are implementing this feature with all possible cases. So, we are unable to include this in Volume 4 SP1 Release. We are working on this feature as high priority to check all cases.  

 

The support for this feature will be included in Volume 1 Release which is expected to be released at the end of March 2020. 

 

Track the below link for feature status. 

https://www.syncfusion.com/feedback/11522/navigate-url-is-not-working-while-selecting-the-row-in-treeview-component  

 

We will appreciate your patience till then.  

 

Regards,  

Sowmiya.P 

Hi Russell,  

 

We are glad to announce that our Essential Studio 2020 Volume 1 release v18.1.0.42  is rolled out and is available for download under the following link. 

 

https://www.syncfusion.com/forums/152921/essential-studio-2020-volume-1-release-v18-1-0-42-is-available-for-download 

 

As promised, we have included a feature “Setting NavigationUrl  property to the fullrow of particular node” in TreeView component. To access this feature, we suggest you to update the package to the latest version.  

 

You can access this feature by enabling the fullRowNavigable as true. 

 

Refer the sample link below. 

https://stackblitz.com/edit/angular-sd3rk4?file=app.component.html 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

 

Regards, 

Sowmiya.P