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

[Tim Cannon]

I have integrated the sidebar into my angular project and that works well.

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:

new MenuItem('HomePage', 'home', '/app/home', false),

new MenuItem('A-Reports', 'assets/images/sm_.png', '/app/areports', true),

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:

• a bespoke image
• a material icon 
  
• the route to use when selecting the item

The basic example is a simple list of side-bar items.  If I have a hierarchical list how do I define the icon to display for when the docked sidebar is not expanded?

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

Regards

[Ashokkumar Balasubramanian]

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 

import { InstallationComponent } from './installation/installation.component'; 

 

@NgModule({ 

  declarations: [ 

    AppComponent, 

    InstallationComponent 

  ] 

}) 

 

Then enable routing for this component page 

 

App-routing.module.ts 

import { InstallationComponent } from './installation/installation.component'; 

 

const routes: Routes = [ 

  { path: '', redirectTo: '/', pathMatch: 'full' }, 

  { path: 'installation', component: InstallationComponent } 

]; 

 

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

 

App.component.ts 

public data: Object[] = [ 

        { 

            nodeId: '01', nodeText: 'Installation', iconCss: 'icon-microchip icon', path: '/installation' 

        }, 

] 

 

public field:Object ={ dataSource: this.data, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'iconCss', navigateUrl: 'path' }; 

 

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. 

[Tim Cannon]

Exactly what I am after.

However, there are two issues I see:

• Run the application and shrink the window.  The icons do not center when the sidebar collapses.  Expanding and contracting the sidebar will cause the icons to center.
• Is there any way to stop a collapsed sidebar from automatically expanding when the window is resized? 

Thanks

[Narayanasamy Panneer Selvam]

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. 

[Tim Cannon]

Thanks for the update; it works well!

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:

<ejs-sidebar id="sidebar-treeview" class="dock-menu" #sidebarTreeviewInstance [enablePersistence]='persistence'

[enableDock]='enableDock' [width]='width' [dockSize]='dockSize' (created)="onCreated($event)" style="visibility: hidden"

[target]='target' [mediaQuery]='mediaQuery' (close)='closeSidebarByWindowResize($event)'>

public closeSidebarByWindowResize(args: EventArgs) {

console.log('closeSidebarByWindowResize', args);

// isInteracted - Defines the boolean that returns true when the Sidebar is closed by user interaction, otherwise returns false.

if (!args.isInteracted) {

const sidebarIsOpenning = false;

this.processWindowResizeSidebarToggle(sidebarIsOpenning);

}

}

private processWindowResizeSidebarToggle(currentSideIsOpen: boolean) {

this.sidebarOptions.getSidebarOptions()

.pipe(take(1)).subscribe(data => {

console.log('processWindowResizeSidebarToggle: ', this.sidebarTreeviewInstance.isOpen, data.sidebarOpen, currentSideIsOpen);

if (data.sidebarOpen !== currentSideIsOpen) {

const newOptions = data;

newOptions.sidebarOpen = currentSideIsOpen;

this.sidebarOptions.setSidebarOptions(newOptions);

}

});

}

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

private processSidebarToggle(sideBarToBeOpen: boolean) {

console.log('processSidebarToggle: prior state vs desired', this.sidebarTreeviewInstance.isOpen, sideBarToBeOpen);

if (this.sidebarTreeviewInstance.isOpen !== sideBarToBeOpen) {

this.sidebarTreeviewInstance.toggle();

}

if (this.sidebarTreeviewInstance.isOpen) {

this.processOpenSideBar();

} else {

this.processClosedSideBar();

}

}

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

[Ashokkumar Balasubramanian]

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. 

[Russell Clark]

I have the same issue with Support. The solution suggested causes a full page refresh & this is an SPA. 

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:

https://pdtemplatean8.firebaseapp.com/

Then try the Installation link again - nothing happens

[Keerthana Rajendran]

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. 

[Sowmiya Padmanaban]

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 

[Sowmiya Padmanaban]

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