Custom Context Menu syntax

[Mahindra Morar]

Hi,

Do you have any sample code on how to setup a custom context menu and using the primary key column as a query string parameter to hyperlink to another page?

Thanks  

[Venkatesh Ayothi Raman]

Hi Mahindra, 

Thanks for using Syncfusion products. 

Query #1:” Custom context menu” 

We have built-in support to show the custom context menu items by using following code example.  

<ej-grid id="FlatGrid" allow-paging="true" > 

     . . . 

   <e-context-menu-settings enable-context-menu="true"> 

 

       <e-custom-context-menu-items> 

 

           <e-custom-context-menu-item id="clear" text="ClearSelection"></e-custom-context-menu-item> 

       </e-custom-context-menu-items> 

   </e-context-menu-settings> 

    . . . 

    

    <e-columns> 

        . . . 

    </e-columns> 

</ej-grid> 

Note: If we enable custom context menu then we need to handle the custom context menu item using context click event in Grid. Please refer to the following Help documentation, 

Help documentation: https://help.syncfusion.com/api/js/ejgrid#events:contextclick 

https://help.syncfusion.com/aspnetmvc/grid/context-menu#custom-context-menu 

And if you want to show only custom context menu items, then we can disabled the default context menu items by enabling disabledDefaultItems property like as follows, 

<e-context-menu-settings enable-context-menu="true" disable-default-items="true"> 

 

       <e-custom-context-menu-items> 

 

           <e-custom-context-menu-item id="clear" text="ClearSelection"></e-custom-context-menu-item> 

       </e-custom-context-menu-items> 

   </e-context-menu-settings> 

                                                                                     

Help Documentation: https://help.syncfusion.com/api/js/ejgrid#members:contextmenusettings-disabledefaultitems 

Query #2:” Showing primary key columns as hyperlink to redirect to another page” 

We have built-in support of column template feature to achieve this. Please refer to the following code example and Help documentation, 

<ej-grid id="FlatGrid" allow-paging="true" > 

. .  . 

    

    <e-columns> 

        <e-column field="OrderID" header-text="Order ID" template="<a rel='nofollow' href='//www.syncfusion.com'>{{:OrderID}}</a>" is-primary-key="true" text-align="Right" width="75"></e-column> 

        . .  . 

    </e-columns> 

</ej-grid> 

 

Help Documentation: https://help.syncfusion.com/aspnetmvc/grid/columns#column-template 

 

Please let us know if you have any further assistance on this. 

 

Regards, 

Venkatesh Ayothiraman. 

[Mahindra Morar]

Hi Venkatesh,

Are you able to provide a simple working sample for Query #1:” Custom context menu”. 

I am unable to get it working following the link you provided.

I would like to achieve similar to below. 

 $("#FlatGrid").ejGrid({

            contextClick: function (args) { 

                if (args.type == 'MyContextMenu')

                    window.location.rel='nofollow' href = myNewPage.html?id = <primarykey of selected row>

            }      

        });

Thanks

[Venkatesh Ayothi Raman]

Hi Mahindra, 

 

Thanks for the update. 

 

We went through your code example that you have shared for us and found that you are wrongly defined the contextClick event and it seems like re-render the Grid. This is not a recommended a way. Based on your requirement we have prepared a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F134966_Sample332870540 

 

Please refer to the following code example, 

[Grid] 

 

<ej-grid id="FlatGrid" datasource="@ViewBag.data" allow-paging="true"  context-click="contextClick" > 

      

    

    . . . 

    <e-context-menu-settings enable-context-menu="true"> 

 

        <e-custom-context-menu-items> 

 

            <e-custom-context-menu-item id="clear" text="MyContextMenu"></e-custom-context-menu-item> 

        </e-custom-context-menu-items> 

    </e-context-menu-settings>  

    <e-columns> 

        <e-column field="OrderID" header-text="Order ID"  is-primary-key="true" text-align="Right" width="75"></e-column> 

        . .  . 

    </e-columns> 

</ej-grid> 

 

[ContextClick function] 

<script type="text/javascript"> 

     

    function contextClick(args) {  

 

        if (args.text == "MyContextMenu") {  

            var selectedRecord = this.getSelectedRecords()[0]; //get the selectedRecord 

            window.location = "/Home/About?ID=" + selectedRecord.OrderID; //Pass the primary key field value 

 

        } 

 

    } 

</script> 

Help Documentation: https://help.syncfusion.com/api/js/ejgrid#methods:getselectedrecords 

 

Please let us know if you have any further assistance on this. 

 

Regards, 

Venkatesh Ayothiraman. 

[Mahindra Morar]

Hi Vankatesh, Thanks for sorting this out. Its working now.

[Venkatesh Ayothi Raman]

Hi Mahindra, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.