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.

Add additional items to the default context menu for a row

Thread ID:

Created:

Updated:

Platform:

Replies:

123414 Mar 16,2016 01:26 AM Mar 18,2016 03:29 AM ASP.NET MVC 3
loading
Tags: Grid
Mahindra Morar
Asked On March 16, 2016 01:26 AM

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 [Syncfusion]
Replied On March 17, 2016 02:33 AM

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
Replied On March 17, 2016 04:46 AM

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 [Syncfusion]
Replied On March 18, 2016 03:29 AM

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.

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.

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.

;