The Grid has options to show the context menu when right clicked on it. To enable this feature, you need to define either default or custom item in the ContextMenuItems
.
The default items are in the following table.
Items | Description |
---|---|
AutoFit |
Auto fit the current column. |
AutoFitAll |
Auto fit all columns. |
Edit |
Edit the current record. |
Delete |
Delete the current record. |
Save |
Save the edited record. |
Cancel |
Cancel the edited state. |
Copy |
Copy the selected records. |
PdfExport |
Export the grid data as Pdf document. |
ExcelExport |
Export the grid data as Excel document. |
CsvExport |
Export the grid data as CSV document. |
Group |
Group the current column. |
Ungroup |
Ungroup the current column. |
SortAscending |
Sort the current column in ascending order. |
SortDescending |
Sort the current column in descending order. |
FirstPage |
Go to the first page. |
PrevPage |
Go to the previous page. |
LastPage |
Go to the last page. |
NextPage |
Go to the next page. |
@Html.EJS().Grid("ContextMenu").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowSorting(true).AllowExcelExport(true).AllowPdfExport(true).EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true)).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().ContextMenuItems(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending", "Copy", "Edit", "Delete", "Save", "Cancel", "PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage", "LastPage", "NextPage" }).Render()
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
The custom context menu items can be added by defining the ContextMenuItems
as a collection of
ContextMenuItemModel.
Actions for this customized items can be defined in the ContextMenuClick
event.
@{
List<object> ContextMenuitems = new List<object>();
ContextMenuitems.Add(new { text = "Copy with headers", target = ".e-content", id = "copywithheader" });
}
@Html.EJS().Grid("Customcontext").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().ContextMenuItems(ContextMenuitems).ContextMenuClick("ContextMenuClick").Render()
<script>
function ContextMenuClick(args) {
if (args.item.id === 'copywithheader') {
this.copy(true);
}
}
</script>
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
You can hide or show an item in context menu for specific area inside of grid by defining the Target property.