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. |
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowSorting="true" allowExcelExport="true" allowPdfExport="true" contextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})" allowPaging="true">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer Name" width="150" ></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" editType="numericedit" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="200"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
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" });
}
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" contextMenuItems="ContextMenuitems" contextMenuClick="contextMenuClick" >
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Left" width="125"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="125" textAlign="Right" ></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="170"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" textAlign="Right" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<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.