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.
Unfortunately, activation email could not send to your email. Please try again.

How to add and remove icons in OlapClientToolbar?

You can add or remove icons in OlapClient toolbar as described below.

Removing an Icon:

It can be achieved easily through CSS. Collection of icons in OlapClient toolbar has the common class name “li.e-icon.e-tooltxt”. A desired icon can be tracked using the child selector “:nth-child(“icon position”). On setting the child position for the class name, we will be able to get the respective toolbar item and finally on applying the style option “display: none, we can remove the desired icon.

Adding an Icon:

To add a new icon, we need to append an HTML list tag <li class='customIcon e-icon e-tooltxt' title='Custom Icon' tabindex='0'></li>" under the class name - #reportToolbar ul”. It can be achieved in script section, under “renderSuccess” event of the widget. Meanwhile you can add custom font icon or you can get the font icon collections in SVG format from the below path in Essential Studio installed machine.

<Systemdrive>:\Users\UserName\AppData\Local\Syncfusion\EssentialStudio\x.x.x.x\MVC\Samples\web\Content\ej\common-images\ejicons.svg

 

From the file “ejicons.svg, you will able to get the content URL for available icons.

 

Binding action for the newly added icon:

 

Click event could be bound for the new icon using the code “oclientProxy.element.find (".customIcon").bind (ej.eventType.click, function (evt) {})”. By using doAjaxPost method, we can send data to the service file. In our code sample, we send a string “Button is clicked”. In service, the string is added to a dictionary and once again sent back to the script side. Finally, in the success event of doAjaxPost method, the string is displayed in an alert window.

 

The code sample illustrates on how to remove desired icons from OlapClient toolbar.

CSS

 

 

The code sample illustrates on how to add desired icon in OlapClient toolbar. It also explains on how to register the click event for the newly added icon.

 

CSS

 

Script

 

C# [Service]

 

VB.NET [Service]

 

Article ID: Published Date: Last Revised Date: Platform: Control:
6485 03/07/2016 03/07/2016 JavaScript ejPivotClient
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.