Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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");
like image 654
varun Avatar asked Nov 24 '25 05:11

varun


2 Answers

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/

like image 141
Irvin Dominin Avatar answered Nov 25 '25 21:11

Irvin Dominin


This is my answer:

columns.Command(command => command.Custom("Ver").Click("showDetails").HtmlAttributes(new { title = "Vista Rapida" })).Width(50);
like image 26
Ricardo Avatar answered Nov 25 '25 19:11

Ricardo



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!