用于自定义命令的kendo ui工具提示

时间:2013-10-08 14:09:52

标签: jquery kendo-ui

大家好,
             我正在使用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");

1 个答案:

答案 0 :(得分:3)

您可以尝试检查kendo网格定义,如果当前元素的单元格图标类显示其标题。

代码:

$(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/