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");
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/
This is my answer:
columns.Command(command => command.Custom("Ver").Click("showDetails").HtmlAttributes(new { title = "Vista Rapida" })).Width(50);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With