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 : Nov 16th 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.

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

MVC

ASP

 

Adding custom icons to the Toolbar

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

HTML

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

JavaScript

 

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.

JavaScript

 

Figure 2: Selected Record details are rendered in a dialog

Adding Links to the toolbar

JSRender

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

JavaScript

 

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?
Comments
FREDERIC BROSSET Nov 21, 2017

Hi,

When you write 

        .Bold:before {
            content: "\e636";
        }
Where does that code come from ?
Thanks !
Reply
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

 

Regards,

Thavasianand S.

Reply
Add Comment
You must log in to leave a comment

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