Articles in this section
Category / Section

How to customize Toolbar with button, icon and link?

1 min read

In some cases, it is necessary to add custom toolbar in Grid for custom functionality on toolbar button/icon/link.


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


<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));
                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',


.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("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();


<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" AllowGrouping="True">
            <ClientSideEvents ToolbarClick="onToolBarClick" Create="gridcreate"/>
            <ToolbarSettings ShowToolbar="True">
                    <ej:CustomToolbarItem Text="Bold" />
                    <ej:CustomToolbarItem TemplateID="#Details" />
                    <ej:CustomToolbarItem TemplateID="#refresh" />
                <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" />


Adding custom icons to the Toolbar

A custom icon bold is added to the Toolbar and style is applied to it.


        .Bold:before {
            content: "\e636";
<div id="Grid"></div>

The selected record details are toggled with font-weight bold on clicking bold icon in the Grid Toolbar.


function clicked(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");
                    $(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 id="dialog" type="text/x-jsrender">
                   <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>

The selected Record details are rendered in a dialog on clicking the details button bounded to the Toolbar.


        function gridcreate(args) {                                
                var temp = $.templates($("#dialog").html())
        function clicked(sender) {
            $target = $(;
            var gridObj = $("#Grid").data("ejGrid");
            var rowIndex = gridObj.model.selectedRowIndex;            
                                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


    <script id="refresh" type="text/x-jsrender">
        <a href="#" class="refresh">Refresh</a>

The Grid content is refreshed on clicking the refresh link bounded to the Grid Toolbar.


        function clicked(sender) {
$target = $(;
            var gridObj = $("#Grid").data("ejGrid");
if ($target.hasClass("refresh")) {


Figure 3: Grid content is refreshed

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment