Open url in new tab based on data in service in Kendo Menu

Question

I searched around number of posts, but haven't any solution applicable to my scenario. I am population kendo-menu dynamically using an array build via sql.

<kendo-menu [items]="items"
            [vertical]="true"
            style="display:inline-block;">
</kendo-menu>

This is the sample I am following:

https://www.telerik.com/kendo-angular-ui/components/menus/menu/vertical/

Here is how items array is structured:

export const items: any[] = [
  {
  text: 'Reportingd',
    items: [{ text: 'Dash', url: "https://www.google.com" },  {
    text: 'Realtime',
      items: [{ text: 'DesktopNew', url: "https://www.telerik.com" }, { text: 'laptop', url: "https://www.msn.com" }]
  }]
},
{
  text: 'Other Reporting',
  items: [{ text: 'Training', url: "https://www.msn.com" }, { text: 'UserManual', url: "https://www.msn.com" }, { text: 'Guide',
    items: }]
},
{
  text: 'Tools',
  items:[{ text: 'Training', url: "https://www.msn.com" }]
}];

However, this on click of menu/sub-menu opens url in the same window. I want to open in different window or new tab. HTML <a> tag does not work here. Please suggest

<a href="https://www.thesitewizard.com/" target="_blank">thesitewizard.com</a>

Answer 1

Write select event for kendo menu something like below.

<kendo-menu [items]="items" (select)="onSelect($event)"></kendo-menu>

After that in onSelect method use window.open method like below.

public onSelect({ item }): void {
        if (!item.items) {
            window.open([item.url], "_blank");
        }
    }

Answer 2

was able to resolve. It is 2 step process though. with following array structure given in initial post just open in current window. Therefore, fetched unique MenuID instead of url on initial load. Then as ManirajSS suggested

public onSelect({ item }): void {

//call service to get url for this MenuID

}

Answer 3

This is the working example of opening selected menu item on a different tab using kendo-menu and kendoMenuItemTemplate

At first created the json file in files.ts. Next in the html, bring the reference and using ng-template and kendoMenuItemTemplate, we can loop through all the menu items. We can put all the normal html tags there to make it customizable. Below is the working example of the same.

https://stackblitz.com/edit/angular-rrvbsm-5lk9uq?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Ffiles.ts