根据Kendo菜单中服务中的数据在新选项卡中打开url

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

}