Apply Style to menu Selected

[Ansuman Panda]

Hello Synfusion,

We want to highlight the menu selected based upon route. I was referring to this answer:

https://www.syncfusion.com/forums/140629/apply-style-to-menu-selected

In this implementation only the first item is getting highlighted.

Is it possible to highlight subsequent items.

For example in the below Code  if user selects "Distribution"( Adminstration-->Ranges-->Distributions)

https://stackblitz.com/edit/angular-e7ee1p-jguxbf?file=app%2Fapp.component.ts

then  "Adminstration-->Ranges-->Distributions"

then all theses things should be highlighted.


I tried using the same control but it's not working properly

[Aravinthan Seetharaman]

Hi Ansuman, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We need to validate more on this and need to ensure more case on this. So, we will updated further details on 15^th November 2021. We appreciate your patience until then. 

 

Regards, 

Aravinthan S 

[Ansuman Panda]

Hi Aravinthan,

Is there any update on this?

Thank You

[Sangeetha Priya Murugan]

Hi Ansuman, 

 

Thank you for your patience. 

 

We have checked your reported requirement and it can be achievable on our Menu by using the beforeOpen event. In this event you need to add the color for the selected item and its parent menu item.  

 

For your convenience, we have modified your sample that applied the color for sub menus in the beforeOpen event. By maintaining the selected item’s id in global variable in select event as like in the below code example 

 

Code Example: 

 

 

  public beforeOpen(args: BeforeOpenCloseMenuEventArgs): void { 

    for (let i = 0; i < args.items.length; i++) { 

      let childObj = args.items[i].items; 

      if (childObj.length > 0) { 

        for (let j = 0; j < childObj.length; j++) { 

          if (childObj[j].id === this.selectedSubMenuItem) { 

            args.element.children[i].classList.add('e-custom'); // set color for sub menu parent item 

          } 

        } 

      } else { 

        if (args.items[i].id === this.selectedSubMenuItem) { 

          args.element.children[i].classList.add('e-custom'); // set color for sub menu item 

        } 

      } 

    } 

  } 

 

 

 public onSelect(args: MenuEventArgs): void { 

    let text: string = args.item.text; 

    let isbreak: boolean = false; 

    let i = 0; 

    let customItem = this.menu.element.querySelector('.e-custom'); 

    if (customItem) { 

      customItem.classList.remove('e-custom'); 

    } 

    args.element.classList.add('e-custom'); 

    this.selectedSubMenuItem = args.element.id; 

    ../// 

  } 

 

 

Sample Link: https://stackblitz.com/edit/angular-e7ee1p-kzpvsa?file=app%2Fapp.component.ts  

 

Could you please check the above details and get back to us, if you need any further assistance on this. 

 

Regards, 

Sangeetha M