Prevent closing menu after item click

[Seyfor]

How can I prevent closing menu after item is clicked?

I am using select event and navigate to another page inside handler, but I don't want that menu is closed.

[Martin Bechev]

Hi Matjaž,

If I understand correctly, the question is related to the close event of the MenuComponent.

In general, the close event is preventable. Check the following example that demonstrates how we can prevent the closing of the menu once we select a menu item that navigates to another page: 
https://stackblitz.com/edit/angular-jj2z6k?file=app/app.component.ts

@Component({

  selector: 'my-app',

  template: `

        <kendo-menu

        [items]="items"

        (select)="onSelect($event)"

        (close)="onClose($event)"

        >

        </kendo-menu>

        <router-outlet></router-outlet>

    `,

 

})

export class AppComponent {

  public items: any[];

  public clickedItem: string;

  constructor(private router: Router) {

    this.items = this.mapItems(router.config);

  }

 

  public onSelect({ item }): void {

    this.clickedItem = item.text;

    if (!item.items) {

      this.router.navigate([item.path]);

    }

  }

 

  onClose(event) {

    if (this.clickedItem === "About") {

      event.preventDefault();

    }

  }
...

The close event is called every time when something from the menu is clicked. In the example, if the "About" menu item is selected then the menu is not going to close.

I hope this helps. Let me know if I am missing something or if further assistance is required for this case, could you provide some more details about the use case scenario. Thank you in advance.

Regards,
Martin
Progress Telerik

[Rahul]

does it also works for context menu?

[Martin Bechev]

Hi Rahul,

The ContextMenu exposes close and popupClose events, which are also preventable:

https://www.telerik.com/kendo-angular-ui/components/menus/api/ContextMenuComponent/#toc-close

https://www.telerik.com/kendo-angular-ui/components/menus/api/ContextMenuComponent/#toc-popupclose

The events are two because they correspond to different close actions. The close event is triggered when a sub-items list is closed, while the popupClose is triggered when the entire ContextMenu is closed. Here is a demo:

https://stackblitz.com/edit/angular-evuiy9?file=src%2Fapp%2Fapp.component.ts

I hope this helps.