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 add and remove icons in PivotClientToolbar?

Platform: JavaScript |
Control: ejPivotClient |
Published Date: March 7, 2016 |
Last Revised Date: June 17, 2019

This KB illustrates that how to add and remove icons from PivotClient Toolbar.

Solution:

You can add or remove icons in PivotClient toolbar by the following description.

Removing an Icon:

It can be achieved easily through CSS. Collection of icons in PivotClient 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 “pivotClientObj.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 PivotClient toolbar.

CSS

 
<style>
    li.e-icon.e-tooltxt:nth-child(1) {
        display: none;
    }
 
    li.e-icon.e-tooltxt:nth-child(2) {
        display: none;
    }
 
    li.e-icon.e-tooltxt:nth-child(3) {
        display: none;
    }
</style>
 

 

 

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

 

CSS

 
<style>
 
    li.customIcon.e-icon.e-tooltxt:before {
        content: "\e6a7";
        font-size:large;
        margin-top : 6px;
    }
 
</style>
 

 

Script

 
<script>
 
    function renderSuccess() {
        if (!$("#reportToolbar ul li").hasClass("customIcon")) {
            //Adds the icon to PivotClient toolbar.
            $("#reportToolbar ul").append("<li class='customIcon e-icon e-tooltxt'          title='Custom Icon' tabindex='0'></li>");
            //Registers click event for the new icon.
            pivotClientObj.element.find(".customIcon").bind(ej.eventType.click, function (evt) {
                clientTarget = $("#PivotClient1").data("ejPivotClient");
                clientTarget.doAjaxPost("POST", "/wcf/OlapClientService.svc/CustomIcon", JSON.stringify({ s: "Button is clicked" }), function (args) {
                    alert(args.d[0].Value);
                });
            })
        }
    }
</script>

 

C# [Service]

public Dictionary<string, string> CustomIcon(string s)
{
    Dictionary<string, string> dict = new Dictionary<string, string>();
    dict.Add("value", s);
    return dict;
}
 

 

VB.NET [Service]

 
Public Function CustomIcon(s As String) As Dictionary(Of String, String)
    Dim dict As New Dictionary(Of String, String)()
    dict.Add("value", s)
    Return dict
End Function
 

 

ADD COMMENT
You must log in to leave a comment

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