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]

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