CODEWITHSUNDEEP
jquerykendo-ui
varun
varun

Reputation: 54

kendo ui tooltip for custom command

Hello Everyone,
I am using kendo ui tooltip to display the content of the fields. It's working fine, but the problem is with custom command of the grid. I show only the icon for the custom command(like edit or remove buttons) without any text. If I want to show what the icon represents on mouse over on the button its displaying empty box. Any help how to overcome this issue and display the text in the tooltip.

command: [{ 
    name: "e", 
    text: "", 
    title: "Update User Details", 
    Class: "test", 
    imageClass: "k-icon k-i-pencil", 
    click: EditUserInfo 
}, { 
    name: "destroy", 
    text: "", 
    title: "", 
    imageClass: "k-icon k-delete" 
}]

Tooltip code:

$(document).kendoTooltip({
            filter: 'span',
            content: function (e) {                   
                var target = e.target; // the element for which the tooltip is shown
                return target.text(); // set the element text as content of the tooltip
            },
            width: 160,               
            position: "top"
        }).data("kendoTooltip");

Upvotes: 3

Views: 8962

Answers (2)

Ricardo
Ricardo

Reputation: 11

This is my answer:

columns.Command(command => command.Custom("Ver").Click("showDetails").HtmlAttributes(new { title = "Vista Rapida" })).Width(50);

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can try check you kendo grid definition and if the current element has the classes of the cell icon show its title.

Code:

$(document).kendoTooltip({
    filter: "span", // if we filter as td it shows text present in each td of the table

    content: function (e) {
        var grid2 = $("#grid").data("kendoGrid");
        var retStr;
        $.each(grid2.columns[3].command,function( index, value ) {            
            if (e.target.hasClass(value.imageClass)){
                retStr=value.title;
                return false
            }            
        });
        return retStr

    }, //kendo.template($("#template").html()),
    width: 160,

    position: "top"
}).data("kendoTooltip");

Demo: http://jsfiddle.net/QM3p7/

Upvotes: 5

Related Questions