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. Image for the cookie policy date
close icon

customToolbarItems tooltips

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?





3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team November 18, 2016 07:26 AM UTC

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 
                        }); 
                } 
            } 
            
             

 

Regards, 
Venkatesh Ayothiraman. 



AE Anton E November 18, 2016 12:15 PM UTC

Thank you!


VA Venkatesh Ayothi Raman Syncfusion Team November 21, 2016 05:13 AM UTC

Hi Anton, 

Thanks for the update. 

We are happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Live Chat Icon For mobile
Up arrow icon