ToolBar in ASP.NET MVC Grid Component
27 Sep 20223 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.
@Html.EJS().Button("disable").Content("Disable").Render()
@Html.EJS().Button("enable").Content("Enable").Render()
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).ToolbarClick("toolbarClick").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("Freight").HeaderText("Freight").Width("120").EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();
}).AllowPaging().PageSettings(page => page.PageCount(2)).AllowGrouping().GroupSettings(group => group.Columns(new string[] { "CustomerID" })).Toolbar(new List<string>() { "Expand", "Collapse" }).Render()
<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.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C").Width("120").Add();
col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width("140").Add();
}).Created("created").Toolbar(new List<string>() { "Print", "Search" }).Render()
<script>
function created() {
let toolbar = this.element.querySelector('.e-toolbar');
this.element.appendChild(toolbar);
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}