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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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.


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

Article ID: Published Date: Last Revised Date: Platform: Control:
2491 08/13/2014 08/04/2015 JavaScript ejGrid
Did you find this information helpful?


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.

Add Comment
You must log in to leave a comment

Please sign in to access our KB

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

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