We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How render ejmenu in the Grid's column like a dropdown?

Platform: jQuery |
Control: ejGrid

This knowledge base explains the way to render menu in the Grid columns.

Usually, Grid provides an option to render any control in its columns using template feature along with the templateRefresh event. Likewise, an icon has been rendered in the template column, with click event to handle the context menu (or ejMenu).

Render the Grid with custom contextmenu items and events such as templateRefresh, contextClick and contextOpen.

 

HTML

 

JS

 

RAZOR:

 

C#

 

ASPX

 

 

.Net Core

 

 

Angular2:

 

TypeScript:

 

Define the template for the columns and required CSS references.

 

 

Bind the click event to the template element in the templateRefresh event of the Grid which will programmatically show the context menu after clicking them. Later, contextOpen event will be defined to prevent the default behavior of the context menu whereas the contextClick will adds the functionality to the custom context menu items.

 

TypeScript:

 

Figure: Grid with custom context menu opened from the template column click

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile