How to customize Toolbar with button, icon and link?
In some cases, it is necessary to add custom toolbar in Grid for custom functionality on toolbar button/icon/link.
Solution
Custom Toolbar is a key functionality used to customize Toolbar elements. The Toolbar is customized with any additional functionalities like buttons, icons and links etc., and corresponding actions are performed in the toolbarClick event of the Grid.
Initializing the custom Toolbar in the Grid
JavaScript
<script type="text/javascript">
$(function () {
// the datasource "window.gridData" is referred from jsondata.min.js
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
toolbarSettings: { showToolbar: true, customToolbarItems: ["Bold", { templateID: "#Details" }, { templateID: "#refresh" }] },
columns: [
{ field: "OrderID", headerText: "Order ID", width: 75 , textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "Customer ID", width: 80 },
{ field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
{ field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
{ field: "ShipCity", headerText: "Ship City", width: 110 }
],
create: "gridcreate",
toolbarClick: 'clicked',
});
});
</script>
MVC
@(Html.EJ().Grid<EJGridSample1.Models.Order>("FlatGrid")
.ToolbarSettings(tool => tool.ShowToolbar().CustomToolbarItems(new List<object>() {"Bold" , new Syncfusion.JavaScript.Models.CustomToolbarItem() {TemplateID="#Details"}, new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#refresh" } }))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(100).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(100).Add();
col.Field("Freight").HeaderText("Freight").Format("{0:c2}").Width(100).Add();
col.Field("OrderDate").HeaderText("Order Date").Format("{0:MMM dd,yyyy}").Width(100).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
col.Field("ShipName").HeaderText("Ship Name").Width(100).Add();
})
.ClientSideEvents(eve=>eve.ToolbarClick("clicked").Create("gridcreate"))
)
ASP
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowGrouping="True">
<ClientSideEvents ToolbarClick="onToolBarClick" Create="gridcreate"/>
<ToolbarSettings ShowToolbar="True">
<CustomToolbarItem>
<ej:CustomToolbarItem Text="Bold" />
<ej:CustomToolbarItem TemplateID="#Details" />
<ej:CustomToolbarItem TemplateID="#refresh" />
</CustomToolbarItem>
</ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="70" Format="{0:C}" />
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />
</Columns>
</ej:Grid>
Adding custom icons to the Toolbar
A custom icon bold is added to the Toolbar and style is applied to it.
HTML
<style>
.Bold:before {
content: "\e636";
}
</style>
<div id="Grid"></div>
The selected record details are toggled with font-weight bold on clicking bold icon in the Grid Toolbar.
JavaScript
function clicked(sender) {
$target = $(sender.target);
var gridObj = $("#Grid").data("ejGrid");
var rowIndex = gridObj.model.selectedRowIndex;
var tr = gridObj.getRows()[rowIndex];
if ($target.hasClass("Bold")) {
if ($(tr).hasClass("bolded"))
$(tr).css("font-weight", "normal").removeClass("bolded");
else
$(tr).css("font-weight", "bold").addClass("bolded");
}
}
Figure 1: Selected record details are toggled with font-weight bold
Adding Buttons to the Toolbar
JS Render
<script type="text/x-jsrender" id="Details">
<button class="details">Add</button>
</script>
<script id="dialog" type="text/x-jsrender">
<div>
<table>
<tr><td>Employee ID:</td><td> {{:EmployeeID}}</td></tr>
<tr><td>First Name:</td><td>{{:FirstName}}</td></tr>
<tr><td>Last Name:</td><td>{{:LastName}}</td></tr>
<tr><td>Title: </td><td>{{:Title}}</td></tr>
</table>
</div>
</script>
The selected Record details are rendered in a dialog on clicking the details button bounded to the Toolbar.
JavaScript
function gridcreate(args) {
$(".details").ejButton({text:"Details"});
}
var temp = $.templates($("#dialog").html())
function clicked(sender) {
$target = $(sender.target);
var gridObj = $("#Grid").data("ejGrid");
var rowIndex = gridObj.model.selectedRowIndex;
if($target.hasClass("details")){
var data = gridObj.model.currentViewData[rowIndex];
rowIndex != -1 && $(temp.render(data)).ejDialog({title:"Details"});
}
}
Figure 2: Selected Record details are rendered in a dialog
Adding Links to the toolbar
JSRender
<script id="refresh" type="text/x-jsrender"> <a href="#" class="refresh">Refresh</a> </script>
The Grid content is refreshed on clicking the refresh link bounded to the Grid Toolbar.
JavaScript
function clicked(sender) {
$target = $(sender.target);
var gridObj = $("#Grid").data("ejGrid");
if ($target.hasClass("refresh")) {
gridObj.refreshContent();
}
}
Figure 3: Grid content is refreshed
