Add additional items to the default context menu for a row

[Mahindra Morar]

Hi,

Is it possible to add an additional item to the default context menu when write clicking on a data grid row.

I would like to call another view passing the primary key of the row I have selected from the context menu.

Any help greatly appreciated.

Thanks

[Jayaprakash Kamaraj]

Hi Mahindra,

Thanks for contacting Syncfusion support.

Query : Is it possible to add an additional item to the default context menu when write clicking on a data grid row

We have achieved your requirement using CustomContextMenuItems property and ContextClick event of Grid. ContextClick event triggers when context menu item is clicked. Please refer to the following code example, Help documentation and sample.

@(Html.EJ().Grid<SyncfusionMvcApplication58.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowScrolling()

         .AllowPaging()    /*Paging Enabled*/

              .SelectionType(SelectionType.Single)

                  .ContextMenuSettings(contextMenu =>

    {

        contextMenu.EnableContextMenu().CustomContextMenuItems(new List<string>() { "PrimaryKey" });

    })

              .EditSettings(edit=>{edit.AllowAdding().AllowDeleting().AllowEditing(); })

              .ToolbarSettings(toolbar =>

                {

                 toolbar.ShowToolbar().ToolbarItems(items =>

                 {

                  items.AddTool(ToolBarItems.Add);

                  items.AddTool(ToolBarItems.Edit);

                  items.AddTool(ToolBarItems.Delete);

                  items.AddTool(ToolBarItems.Update);

                  items.AddTool(ToolBarItems.Cancel);

                });

              })

        .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();

            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();

            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();

            col.Field("ShipName").HeaderText("Ship Name").Width(170).Add();

        }).ClientSideEvents(eve => { eve.ContextClick("contextclick"); }))

<script type="text/javascript">

    function contextclick (args) {

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

            var primaryKeyValue = this.getSelectedRecords()[0].OrderID;

            alert("primaryKeyValue->" + primaryKeyValue);//you can perform own action here

        }

    }
</script>

Help documentation for CustomContextMenuItems: http://help.syncfusion.com/js/api/ejgrid#members:contextmenusettings-customcontextmenuitems

Help documentation for ContextClick: http://help.syncfusion.com/js/api/ejgrid#events:contextclick

Sample: http://www.syncfusion.com/downloads/support/forum/123414/ze/SyncfusionMvcApplication58-58040014


Regards,

Jayaprakash K.

[Mahindra Morar]

Hi Jayaprakash,

Thanks for your example. Its working a treat.

Is it possible to only show the custom menu item when right clicking a data row? Currently its showing the custom menu item when right clicking on the grid column headers.

Thanks

[Jayaprakash Kamaraj]

Hi Mahindra,

Thanks for the update.

We have achieved your requirement using contextOpen event. This event triggers before the context menu is open. In this event we have used  hide and show jQuery methods to remove customcontextmenu items while right click the gridheader and pager. Please refer to the below code example and sample.

@(Html.EJ().Grid<SyncfusionMvcApplication58.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowScrolling()

         .AllowPaging()    /*Paging Enabled*/

              .SelectionType(SelectionType.Single)

                  .ContextMenuSettings(contextMenu =>

    {

        contextMenu.EnableContextMenu().CustomContextMenuItems(new List<string>() { "PrimaryKey" });

    })

              .EditSettings(edit=>{edit.AllowAdding().AllowDeleting().AllowEditing(); })

              .ToolbarSettings(toolbar =>

                {

                 toolbar.ShowToolbar().ToolbarItems(items =>

                 {

                  items.AddTool(ToolBarItems.Add);

                  items.AddTool(ToolBarItems.Edit);

                  items.AddTool(ToolBarItems.Delete);

                  items.AddTool(ToolBarItems.Update);

                  items.AddTool(ToolBarItems.Cancel);

                });

              })

        .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();

            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();

            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();

            col.Field("ShipName").HeaderText("Ship Name").Width(170).Add();

        }).ClientSideEvents(eve => { eve.ContextClick("contextclick").RightClick("rightclick").ContextOpen("contextopen"); }))

<script type="text/javascript">

    function contextclick (args) {

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

            var primaryKeyValue = this.getSelectedRecords()[0].OrderID;

            alert("primaryKeyValue->" + primaryKeyValue);//you can perform own action here

        }

    }

    function contextopen(args) {

        if ($(args.target).hasClass("e-headercelldiv") || $(args.target).hasClass("e-pager"))

            $("#FlatGrid_Context").find(".e-customitem").hide(); //Gridid_Context

        else

            $("#FlatGrid_Context").find(".e-customitem").show();

       
    }</script>

http://help.syncfusion.com/js/api/ejgrid#events:contextopen


Sample: http://www.syncfusion.com/downloads/support/forum/123414/ze/SyncfusionMvcApplication58-487782311

Regards,

Jayaprakash K.