How to add and remove icons in PivotClientToolbar?

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