Hiden menu item by id

[Yosviel]

The method  used to hide the menu items is by text item, there are any to hide by id item.

[Aravinthan Seetharaman]

Hi Yosviel, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your requirement. We would like to let you know that, in Menuitems the id property is an optional field. So, we have only taken text of MenuItem and process for hide items. However, we have achieved your requirement by using below customization code. 

 

app.component.html 

 

<ejs-menu #menu [items]='menuItems' (beforeOpen)='beforeOpen($event)' (created)='created()'></ejs-menu> 

 

 

app.component.ts 

 

export class AppComponent { 

  @ViewChild('menu') 

  private menuObj: MenuComponent; 

  private menuItems: MenuItemModel[] = [ 

    { 

      text: 'Events', 

      items: [{ text: 'Conferences' }, { text: 'Music' }, { text: 'Workshops' }] 

    }, 

    { 

      text: 'Movies', 

      items: [{ text: 'Now Showing' }, { text: 'Coming Soon', id: 'coming' }] 

    }, 

    { 

      text: 'Directory', 

      items: [{ text: 'Media Gallery' }, { text: 'Newsletters' }] 

    }, 

    { 

      text: 'Queries', 

      items: [{ text: 'Our Policy' }, { text: 'Site Map', id: 'site' }] 

    }, 

    { text: 'Services', id: 'service' } 

  ]; 

 

  private hiddenItems: string[] = ['service', 'site', 'coming']; 

 

  private beforeOpen(args: BeforeOpenCloseMenuEventArgs): void { 

    //Handling sub menu items 

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

      if (this.hiddenItems.indexOf(args.items[i].id) > -1) { 

        var li = document.getElementById(args.items[i].id); 

        this.menuObj.hideItems([args.items[i].text], false); 

      } 

    } 

  } 

 

  private created(): void { 

    // Disable menu items 

    var items = []; 

    for (let i = 0; i < this.hiddenItems.length; i++) { 

      var li = document.getElementById(this.hiddenItems[i]); 

      if (li) { 

        items.push(li.innerText); 

      } 

    } 

    this.menuObj.hideItems(items, false); 

  } 

} 

 

 

Sample: https://stackblitz.com/edit/angular-t1fuvl?file=app.component.ts  

 

Could you please check whether the given solution is fulling your requirement and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S

[Yosviel]

thanks, i tried the example and it worked for my requirement

[Aravinthan Seetharaman]

Hi Yosviel, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Aravinthan S