Toolbar Items in ASP.NET MVC Grid Component
21 Dec 20228 minutes to read
Built-in toolbar items
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. |
ColumnChooser | Choose the column’s visibility. |
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).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)).Toolbar(new List<string>() { "Print", "Search" }).Render()
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
NOTE
The
Toolbar
has options to define both built-in and custom toolbar items.
Show only icons in built-in toolbar items
By default, the built-in toolbar items render as buttons with an icon and text. It is possible to hide the text and show only the icon using the following CSS style.
.e-toolbar .e-tbar-btn-text, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
display: none;
}
This is demonstrated in the following sample:
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).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();
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<style>
.e-toolbar .e-tbar-btn-text, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
display: none;
}
</style>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}
Custom toolbar items
Custom toolbar items can be added by defining the Toolbar
as a collection of ItemModels. 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" });
}
@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().AllowGrouping(true).GroupSettings(group => { group.Columns(new string[] { "CustomerID" }); }).PageSettings(page => page.PageCount(2)).Toolbar(toolbarItems).Render()
<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();
}
NOTE
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.
Both built-in and custom items in toolbar
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", id = "Click", prefixIcon = "e-expand" });
}
@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)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(toolbarItems).Render()
<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();
}
Custom toolbar component in a specific position
By default, Custom toolbar items are in the Left position. You can change the position by using the Align property. In the following sample, we have applied the Right position for the Collapse All toolbar item, Left for the Expand All toolbar item, and Center for the Search toolbar item.
@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add(new { text = "Expand All", tooltipText = "Expand All", prefixIcon = "e-expand", id = "expandall", align = "Left" });
toolbarItems.Add(new { text = "Collapse All", tooltipText = "Collapse All", prefixIcon = "e-collapse", id = "collapseall", align = "Right" });
toolbarItems.Add(new { text = "Search", align = "Center" });
}
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ToolbarClick("toolbarClick").Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
col.Field("FirstName").HeaderText("FirstName").Width("140").Add();
col.Field("Country").HeaderText("Country").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
col.Field("PostalCode").HeaderText("PostalCode").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("140").Add();
}).AllowGrouping(true).GroupSettings(group => { group.Columns(new string[] { "FirstName" }); }).Toolbar(toolbarItems).Render()
<script>
function toolbarClick(args) {
if (args.item.id === 'expandall') {
this.groupModule.expandAll();
}
if (args.item.id === "collapseall") {
this.groupModule.collapseAll();
}
}
</script>
<style>
.e-btn-icon.e-expand.e-icons.e-icon-left::before {
content: '\e82e';
}
.e-collapse::before {
content: '\e834';
}
</style>
public IActionResult Index()
{
ViewBag.DataSource = EmployeeDetails.GetAllRecords();
return View();
}