customToolbarItems tooltips

[Anton E]

Hello. I'm trying to add custom items in the grid's toolbar. I want them to look like native ones as I want to use them both simultaneously.

So i add:
toolbarSettings: {
            showToolbar: true, toolbarItems: ["search", "delete"],
            customToolbarItems: [{
                templateID: "#editTemplate"
            },
            {
                templateID: "#addTemplate"
            }]
        }

<script id="editTemplate" type="text/x-jsrender">
    <a class="e-toolbaricons e-icon editTemplate" />
</script>
<script id="addTemplate" type="text/x-jsrender">
    <a class="e-toolbaricons e-icon addTemplate" />
</script>

<style type="text/css" class="cssStyles">
    .editTemplate:before {
        content: "\e653";
    }
    .addTemplate:before {
        content: "\e676";
    }
</style>


Now i'm getting this: http://static.terribles.ru/files/2016-11-17--16-20-29-scr2.png

The point is that tooltip is exactly copies CSS-class which is used to draw the toolbar item. I need this tooltip to be cyrillic ("Редактировать"), and you cannot use cyrillic CSS-classes. Is there any workaround for this situation?

[Venkatesh Ayothi Raman]

Hi Anton, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement using actionComplete event in Grid. In this event, we can find the customtoolbar items and change the tooltip content for corresponding the customtoolbar item. Please refer to the code example and sample, 

Code example: 

//Grid 

$("#Grid").ejGrid({ 

                    // the datasource "window.gridData" is referred from jsondata.min.js 

                    dataSource: window.gridData, 

                    allowPaging: true, 

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                    actionComplete:"actionComplete", 

                    toolbarSettings: { 

                        showToolbar: true, toolbarItems: ["search", "delete"], 

                        customToolbarItems: [{ 

                            templateID: "#editTemplate" 

                        }, 

                        { 

                            templateID: "#addTemplate" 

                        }] 

                    }, 

                    columns: [ 

                            . . . 

                    ] 

                }); 

                

 

            }); 

 

//Action complete event 

 

function actionComplete(args) { 

 

                var customToolbar; 

                for (var i = 0; i < this.model.toolbarSettings.customToolbarItems.length; i++) { 

                    customToolbar = this.model.toolbarSettings.customToolbarItems[i]; 

                    var customToolbarValue = customToolbar["templateID"].slice(1); // get the customtoolbar value  

                    if (customToolbarValue == "editTemplate") 

                    $("#" + this._id + "_" + customToolbarValue).attr({ 

                        "data-content": "Edit" //here you can set the cyrillic value 

                    }); 

                    else if(customToolbarValue == "addTemplate") 

                        $("#" + this._id + "_" + customToolbarValue).attr({ 

                            "data-content": "Add" //here you can set the cyrillic value 

                        }); 

                } 

            } 

            

             

Sample: http://jsplayground.syncfusion.com/qupsvcgg 

Help Document: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

 

Regards, 

Venkatesh Ayothiraman. 

[Anton E]

Thank you!

[Venkatesh Ayothi Raman]

Hi Anton, 

Thanks for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 

Venkatesh Ayothiraman.