jquery - 自定义命令的 kendo ui 工具提示

Question

大家好，
我正在使用 kendo ui 工具提示来显示字段的内容。它工作正常，但问题在于网格的自定义命令。我仅显示自定义命令的图标(如编辑或删除按钮)，没有任何文本。如果我想在鼠标悬停在按钮上时显示图标代表的内容，则会显示空框。任何有关如何克服此问题并在工具提示中显示文本的帮助。

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" 
}]

工具提示代码:

$(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");

Answer 1

您可以尝试检查剑道网格定义，以及当前元素是否具有单元格图标的类，显示其标题。

代码:

$(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");

演示:http://jsfiddle.net/QM3p7/