Add additional items to the default context menu for a row

3 Replies
2 Participants

Created by
MM Mahindra Morar

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
Grid

Created On
Mar 16, 2016 05:26 AM UTC

Last Activity On
Mar 18, 2016 07:29 AM UTC

Want to subscribe?
SIGN IN

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"); }))

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.