Custom tool bar in EJ2 JavaScript Grid control

26 Feb 202422 minutes to read

Custom toolbar in Syncfusion EJ2 JavaScript Grid allows you to create a distinctive toolbar layout, style, and functionality that aligns with the specific needs of your application, providing a personalized experience within the Grid control.

This can be achieved by utilizing the toolbarTemplate property, which offers extensive customization options for the toolbar. You can define a custom template for the toolbar and handle the actions for this toolbar template items are defined in the clicked event.

The following example demonstrates, how to render the custom toolbar using toolbarTemplate.

index.js
index.html
var clickHandler = function(args){
    var target = (args.originalEvent.target).closest('button'); // find clicked button
    if (target.id === 'collapse') {
      // collapse all expanded grouped row
        grid.groupModule.collapseAll();
    }
    if (target.id === 'expand') {
      // expand all collapsed grouped row
        grid.groupModule.expandAll();
    }
  };
  
  var toolbar = new ej.navigations.Toolbar({ 
    items: [
        { id:"collapse", text:"Collapse All", prefixIcon:"e-chevron-up icon" },
        { id:"expand", text:"Expand All", prefixIcon:"e-chevron-down icon" },
        ],
    clicked: clickHandler
  });
  toolbar.appendTo('#toolbar-template');
  
  var grid = new ej.grids.Grid({
    dataSource: data,
    toolbarTemplate: '#toolbar-template',
    allowGrouping: true,
    groupSettings: { columns: ['CustomerID'] },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 90 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
        { field: 'ShipCity', headerText: 'ShipCity', width: 100 },
        { field: 'ShipName', headerText: 'ShipName', width: 120 }
    ],
    height: 200
  });
  grid.appendTo('#Grid');
<!DOCTYPE html><html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>
        <div id="toolbar-template"></div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Render an image with text in custom toolbar in Syncfusion EJ2 JavaScript Grid allows easily render an image along with text in the toolbar of the Grid. This feature enhances the visual presentation of the Grid, providing additional context and improving the overall experience.

To render an image with text in custom toolbar, This can be achieved by utilizing the toolbarTemplate property.

The following example demonstrates how to render an image in the toolbar of the grid using toolbarTemplate.

index.js
index.html
var grid = new ej.grids.Grid({
    dataSource: data,
    editSettings: { allowDeleting: true, allowAdding: true, allowEditing: true },
    toolbarTemplate: '#toolbar-template',
    columns: [
        { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 90 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
        { field: 'ShipCity', headerText: 'ShipCity', width: 100 },
        { field: 'ShipName', headerText: 'ShipName', width: 120 }
    ],
    height: 315
});
grid.appendTo('#Grid');

var addRecordButton = new ej.buttons.Button({ cssClass: 'e-outline' }, '#addButton');
document.getElementById('addButton').onclick = function () {
    grid.addRecord();
};
var deleteRecordButton = new ej.buttons.Button({ cssClass: 'e-outline' }, '#deleteButton');
document.getElementById('deleteButton').onclick = function () {
    var selectedRecord = grid.getSelectedRecords()[0];
    grid.deleteRecord(selectedRecord );
};
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<style>
    .image img {
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2);
        height: 35px;
        width: 55px;
    }
    .e-toolbar .e-toolbar-item>* {
        text-overflow: ellipsis;
        height: 35px;
    }
</style>
<body>
    <div id="container">
        <div id="Grid"></div>
        <div id="toolbar-template">
            <div>
                <div class="image"><img src="add.jpg" /></div>
                <div><button id="addButton">Add</button></div>
                <div class="image"><img src="delete.jpg" /></div>
                <div><button id="deleteButton">Delete</button></div>
            </div>
        </div>
    </div>
<script>
    var ele = document.getElementById('container');
    if (ele) {
        ele.style.visibility = "visible";
    }   
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

You can further customize the styles and layout of the image and text in the custom toolbar to suit your specific design requirements.

Render DropDownList in custom toolbar in Syncfusion EJ2 JavaScript Grid enables you to extend the functionality of the custom toolbar by incorporating a DropDownList control, allowing you to perform various actions within the Grid based on their selections.

This can be achieved by utilizing the toolbarTemplate. The example below demonstrates how to render the DropDownList control in the custom toolbar, where the toolbar template includes the its change event is bound to the onChange method.

In the onChange method, the text of the selected item is checked to determine the appropriate action. For example, if Update is chosen, the endEdit method is called to exit the edit mode. If Edit is selected, the selected record is passed to the startEdit method to initiate the edit mode dynamically. Similarly, if Delete is picked, the selected record is passed to the deleteRecord method to remove it from the grid.

index.js
index.html
var dropdowndata = [{ text: 'Edit' }, { text: 'Delete' }, { text: 'Update' }];

ej.grids.Grid.Inject(ej.grids.Toolbar);
var grid = new ej.grids.Grid({
    dataSource: data,
    toolbarTemplate: '#toolbar-template',
    editSettings: { allowDeleting: true, allowAdding: true, allowEditing: true },
  
    columns: [
      { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 90 },
      { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
      { field: 'ShipCity', headerText: 'ShipCity', width: 100 },
      { field: 'ShipName', headerText: 'ShipName', width: 120 }
    ],
    height: 200,
  });
  grid.appendTo('#Grid');
  
  var dropDown= new ej.dropdowns.DropDownList({
    dataSource: dropdowndata,
    change: onChange,
    placeholder: 'select a value',
    width: 180
  });
  dropDown.appendTo('#dropdownelement');
  
  function onChange(args) {
  var selectedRow = grid.getSelectedRecords()[0];

  if (args.itemData.text === 'Update') {
    grid.endEdit();
  }
  if (args.itemData.text === 'Edit') {
    grid.startEdit();
  }
  if (args.itemData.text === 'Delete') {
    grid.deleteRecord(selectedRow);
  }
  dropDown.value = '';
  dropDown.placeholder = args.itemData.text;
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="toolbar-template">
            <label style="padding: 10px 10px 26px 0">
                Change the value:
            </label>
                <input type="text" id="dropdownelement">
            </div>
        </div>
        <div id="Grid"></div>
    </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Rendering a control or element using the toolbar template in the Syncfusion EJ2 JavaScript Grid allows you to extend the capabilities of the grid toolbar by incorporating custom components or elements. This provides flexibility to enhance the toolbar with custom buttons, dropdowns, input fields, icons, or any other desired UI elements. You can bind event handlers or handle interactions within the template to enable specific actions or behaviors associated with the added components or elements.

To render custom components or elements within the toolbar, use the toolbarTemplate property. This allows you to include other components, such as a Button, and perform specific grid actions based on the button click. For example, when the ExcelExport button is clicked, the excelExport method is called to export the grid to Excel. Similarly, when the PdfExport button is clicked, the pdfExport method is called to export the grid to PDF format.Likewise, when the Print button is clicked, the print method will triggered to print the grid.

The following example demonstrates how to render a Button control in the toolbar using toolbarTemplate and perform grid action based on the respected button click.

index.js
index.html
ej.grids.Grid.Inject(ej.grids.Toolbar);
var grid = new ej.grids.Grid({
  dataSource: data,
  allowExcelExport: true,
  allowPdfExport: true,
  toolbarTemplate: '#toolbar-template',
  columns: [
    { field: 'OrderID', headerText: 'Order ID', isPrimaryKey: true, textAlign: 'Right', width: 90 },
    { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
    { field: 'ShipCity', headerText: 'ShipCity', width: 100 },
    { field: 'ShipName', headerText: 'ShipName', width: 120 }
  ],
  height: 250,
});
grid.appendTo('#Grid');

var excelExportButton = new ej.buttons.Button({ cssClass: 'e-outline' }, '#excelButton');
document.getElementById('excelButton').onclick = function () {
  grid.excelExport();
};
var pdfExportButton = new ej.buttons.Button({ cssClass: 'e-outline' }, '#pdfButton');
document.getElementById('pdfButton').onclick = function () {
  grid.pdfExport();
};
var print = new ej.buttons.Button({ cssClass: 'e-outline' }, '#printButton');
document.getElementById('printButton').onclick = function () {
  grid.print();
};
<!DOCTYPE html><html lang="en">
<head>
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-grids/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-lists/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/bootstrap5.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>
        <div id='toolbar-template' >
          <div>
            <button id="excelButton" >Excel Export</button>
            <button id="pdfButton">Pdf Export</button>
            <button id="printButton">Print</button>
            </div>
          </div>
<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Custom tool bar in EJ2 JavaScript Grid control

Render image with text in custom toolbar

Render DropDownList in custom toolbar

Render a control or element using the toolbar template