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

Add additional items to the default context menu for a row

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


3 Replies

JK Jayaprakash Kamaraj Syncfusion Team March 17, 2016 06:33 AM UTC

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.


MM Mahindra Morar March 17, 2016 08:46 AM UTC

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



JK Jayaprakash Kamaraj Syncfusion Team March 18, 2016 07:29 AM UTC

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.

Loader.
Up arrow icon