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>

score 1 · Accepted Answer · answered May 30 '19 at 07:16

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");
        }
    }

answered May 30 '19 at 07:16

ManirajSS

2,295
5
26
50

1

I am getting error on line window.open.....TS2345 (TS) Argument of type 'any[]' is not assignable to parameter of type 'string' – SilverFish May 30 '19 at 10:07
Please upload/link workable code to debug.But the idea is same. @SilverFish – ManirajSS May 30 '19 at 10:27
this code window.open(item.url.toString(), '_blank'); does open in new window for url, but also current application url to to the same url. So two windows with same url. for eg two windows for https://www.google.com will open – SilverFish May 30 '19 at 10:31
Please include http @SilverFish – ManirajSS May 30 '19 at 10:36
Please accept the answer if you found it helped to solve your problem. @SilverFish – ManirajSS May 30 '19 at 11:07
@ManirajSS, I am also facing the same problem. If you get this notification, please let me know how you solved it. Thanks – ispostback May 19 '23 at 07:01

score 0 · Answer 2 · answered May 19 '23 at 12:20

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

score -1 · Answer 3 · answered May 30 '19 at 14:09

-1

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

}

answered May 30 '19 at 14:09

SilverFish

1,014
6
28
65

Please give us the proper implementation, so that we can also solve the problem – ispostback May 19 '23 at 08:08

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

3 Answers3