The Grid provides ToolBar support to handle grid actions. The toolbar
property accepts either the collection of built-in toolbar items and ItemModel objects for custom toolbar items or HTML element ID for toolbar template.
Built-in toolbar items execute standard actions of the grid, and it can be added by defining the toolbar
as a collection of built-in items. It renders the button with icon and text.
The following table shows built-in toolbar items and its actions.
Built-in Toolbar Items | Actions |
---|---|
Add | Adds a new record. |
Edit | Edits the selected record. |
Update | Updates the edited record. |
Delete | Deletes the selected record. |
Cancel | Cancels the edit state. |
Search | Searches the records by the given key. |
Prints the grid. | |
ExcelExport | Exports the grid to Excel. |
PdfExport | Exports the grid to PDF. |
WordExport | Exports the grid to Word. |
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbar="@(new List<string>() {"Print","Search"})" height="270">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
- The
toolbar
has options to define both built-in and custom toolbar items.
Custom toolbar items can be added by defining the toolbar
as a collection of
ItemModel.
Actions for this customized toolbar items are defined in the toolbarClick
event.
By default, Custom toolbar items are in position Left. You can change the position by using the align property. In the below sample, we have applied position Right for the Collapse All toolbar item.
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add(new { text = "Expand All", tooltipText = "Expand All", prefixIcon = "e-expand", id = "expandall" });
toolbarItems.Add(new { text = "Collapse All", tooltipText = "Collapse All", prefixIcon = "e-collapse", id = "collapseall", align = "Right" });
}
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbarClick="toolbarClick" toolbar=toolbarItems height="270" allowGrouping="true">
<e-grid-groupsettings columns="@(new string[] {"CustomerID"})"></e-grid-groupsettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function toolbarClick(args) {
if (args.item.id === 'expandall') {
this.groupModule.expandAll();
}
if (args.item.id === "collapseall") {
this.groupModule.collapseAll();
}
}
</script>
public IActionResult Index()
{
var orders = orderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
- The
toolbar
has options to define both built-in and custom toolbar items.- If a toolbar item does not match the built-in items, it will be treated as a custom toolbar item.
Grid have an option to use both built-in and custom toolbar items at same time.
In the below example, Add, Edit, Delete, Update, Cancel are built-in toolbar items and Click is custom toolbar item.
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add("Add");
toolbarItems.Add("Edit");
toolbarItems.Add("Delete");
toolbarItems.Add("Update");
toolbarItems.Add("Cancel");
toolbarItems.Add(new { text = "Click", tooltipText = "Click", prefixIcon = "e-expand", id = "Click" });
}
<div>
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowResizing="true" allowPaging="true" allowSorting="true" toolbarClick="toolbarClick" toolbar=toolbarItems>
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" edit="new {@params = new { dataSource= ViewBag.DropdownData} }" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
function toolbarClick(args) {
if (args.item.id === 'Click') {
alert("Custom toolbar click...");
}
}
</script>
<style>
.e-expand::before {
content: '\e5b8';
}
</style>
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.DataSource = orders;
return View();
}
You can enable/disable toolbar items by using the enableItems method.
<ejs-button id="disable" content="Disable"></ejs-button>
<ejs-button id="enable" content="Enable"></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" toolbarClick="toolbarClick" toolbar="@( new List<string>(){"Expand","Collapse"})" height="270" allowGrouping="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
</e-grid-columns>
<e-grid-groupSettings columns="@(new string[] { "CustomerID"})"></e-grid-groupSettings>
</ejs-grid>
<script>
document.getElementById("enable").addEventListener('click', () => {
var grid = document.getElementById("Grid").ej2_instances[0];
grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], true);// enable toolbar items.
});
document.getElementById("disable").addEventListener('click', () => {
var grid = document.getElementById("Grid").ej2_instances[0];
grid.toolbarModule.enableItems(['Grid_Collapse', 'Grid_Expand'], false);// disable toolbar items.
});
function toolbarClick(args) {
if (args.item.id === 'Grid_Collapse') { // grid_Collapse is component id + '_' + toolbar item name.
this.groupModule.collapseAll();
}
if (args.item.id === 'Grid_Expand') {
this.groupModule.expandAll();
}
}
</script>
public IActionResult Index()
{
var orders = orderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}