We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to customize Toolbar with button, icon and link?

Platform: jQuery |
Control: ejGrid

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





Adding custom icons to the Toolbar

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


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



Figure 1: Selected record details are toggled with font-weight bold

Adding Buttons to the Toolbar

JS Render

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



Figure 2: Selected Record details are rendered in a dialog

Adding Links to the toolbar


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



Figure 3: Grid content is refreshed

You must log in to leave a comment
Nov 21, 2017


When you write 

        .Bold:before {
            content: "\e636";
Where does that code come from ?
Thanks !
Thavasianand Sankaranarayanan [Syncfusion]
Nov 24, 2017

Hi Frederic,


In the above KB documentation we have shown a customized toolbar icon in the Grid toolbar. So, if you want any other icon as a toolbar then you can set your own customization for Grid toolbar.


Refer the general solution link.


Link: https://gist.github.com/aristath/ae16f6190b8a10745443


Link: http://themes-pixeden.com/font-demos/the-icons-set/location/documentation.html



Thavasianand S.


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile