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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EjGrid Containing EjMenu

Thread ID:

Created:

Updated:

Platform:

Replies:

131151 Jun 23,2017 03:48 PM UTC Jun 28,2017 03:59 AM UTC JavaScript 5
loading
Tags: ejGrid
Matt Abercrombie
Asked On June 23, 2017 03:48 PM UTC

We are switching all of our DevExpress MVC components over to SyncFusion EssentialJS controls. The "biggie" is the grid component. Our current Dx grids have a custom column in them that contain some custom buttons and a Dx menu (see attached screenshot). I need to be able to duplicate that functionality with EJ as closely as possible. I tried passing off your grid context menu as an alternative, but that idea was shot down.

Are their any examples available that demonstrate how to incorporate custom buttons and/or the EjMenu within a column of the EjGrid?

Attachment: examplemenuingrid_25931d54.zip

Prasanna Kumar Viswanathan [Syncfusion]
Replied On June 26, 2017 03:25 PM UTC

Hi Matt, 

Thanks for contacting Syncfusion support. 

Before we proceed with your requirement, we need some clarifications. 

1. In grid you need a custom column and in that custom column you have some custom buttons and a menu. 

2. You need to display the menu and a button within the particular column of the grid.  

If your requirement is different from the above, please provide more information regarding the requirement. 

Regards, 
Prasanna Kumar N.S.V 


Matt Abercrombie
Replied On June 26, 2017 03:27 PM UTC

Yes. That sounds exactly like what I'm attempting.


Mani Sankar Durai [Syncfusion]
Replied On June 27, 2017 11:57 AM UTC

Hi Matt, 

We have analyzed your query and based on your requirement we have prepared a sample that can be available from the below link. 

In this sample we have rendered one button inside the column using column template feature and when clicking the button we have rendered a menu in grid. 
Refer the code example. 
    <div id="Grid"></div> 
    <script id="template" type="text/x-jsrender"> 
        <button id=btn class="glyphicon"> click to show menu</button> 
    </script> 
    
     
        <script type="text/javascript"> 
            $(function () { 
                 
$("#Grid").ejGrid({ 
                    ... 
                    contextMenuSettings: { enableContextMenu: true}, 
                    columns: [ 
                            ... 
                            {  headerText: "Ship City", template:"#template" ,width: 80 }, 
                             
                    ], 
                    templateRefresh: "refreshTemplate", 
                    contextOpen: "contextOpen", 
 
                }); 
            }); 
        </script> 
  
    <script type="text/javascript"> 
 //Trigger Context menu using the showContextMenu Method 
    function refreshTemplate(args) { 
        $(args.cell).find("#btn").click(function (e) { 
            var obj = $("#Grid_Context").ejMenu("instance"); 
            //Grid is ID of the Grid + _Context 
            e.type = "mouseup"; 
            e.which = 3; 
            var target = $(e.currentTarget).closest("tr").find(".e-rowcell:not('.e-templatecell')")[0]; 
            obj.showContextMenu(null, null, target, e, true) 
        }) 
    } 
 
    /*Prevents default functionality of the Context Menu Grid, menu opened only for the template element*/ 
 
    function contextOpen(args) { 
        if (!$(args.events.target).hasClass("glyphicon")) 
            args.cancel = true; 
    } 
    </script> 
 

From the above code example we have placed a button in the template column and on clicking them a context menu will be opened using the showContextMenu method of the ejMenu. In this, templateRefresh event of the Grid will be helpful to bind the click event for the icons. The default functionality of the Grid’s context menu has been prevented using the contextOpen event of the Grid. Refer to the following code example and Help Document.  
  
You can also add custom Context Menu Items to the Grid using the CustomContextMenuItems API of ContextMenuSettings. Refer to the following API Reference.  
  
  
To assign the functionality to the Custom Context Menu Items, you can use the ContextClick event of the Grid. Refer to the following API Reference.  
  


Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Matt Abercrombie
Replied On June 27, 2017 12:04 PM UTC

Very nice and creative solution. Thank you very much for taking the time to show me this.

I'd like to work on the implementation a bit (1-2 days) before closing the ticket to ensure I don't have any related issues. 


Saravanan Arunachalam [Syncfusion]
Replied On June 28, 2017 03:59 AM UTC

Hi Matt, 

Thanks  for your update. 

We are happy that the provided information helped you. 

Please let me know, if you have any other queries. We are happy to assist you. 

Regards, 

Saravanan A. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;