ToolBar in ASP.NET CORE Grid Component
27 Sep 20224 minutes to read
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.
Enable or disable toolbar items
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();
}
Add toolbar at the bottom of Grid
You can add the Grid toolbar component at the bottom of Grid using the created event.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() {"Print","Search"})" created="created" height="270">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" type="number" 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="C" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" format='yMd' width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function created() {
let toolbar = this.element.querySelector('.e-toolbar');
this.element.appendChild(toolbar);
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}