Tooltip For Kendo Grid Custom Buttons

Gowtham K
7y
6.6k
0
1

Blog

KendoGridTooltip.rar

Introduction

This blog tells you how to implement the Tooltip for Kendo Grid custom buttons, using jQuery. Before going through this blog we have to know how to work with Kendo Tooltip and Kendo Grid custom buttons

Please refer to the links given below to get the basic idea about Kendo Tooltip and Grid.

http://docs.telerik.com/kendo-ui/controls/layout/tooltip/overview
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

Prerequisites

Basic knowledge on Kendo UI framework
jQuery

Tooltip for Kendo Grid custom button

I have created one sample grid to show how the Tooltip is working for Kendo grid custom buttons

Create one new HTML page. In my case, I named it as KendoGridTooltip.html. Write the code given below in it.

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-inline">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$("#example").kendoTooltip({
filter: "span",
content: function (e) {
var grid = $("#grid").data("kendoGrid");
var Str;
$.each(grid.columns[4].command,function( index, value ) {
if (e.target.hasClass(value.imageClass)){
Str=value.title;
return false
}
});
return Str
},
width: 60,
position: "top"
}).data("kendoTooltip");
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{
command: [{ name: "Edit", text: "", title: "Edit", Class: "test", imageClass: "k-icon k-i-pencil"},
{ name: "destroy", text: "", title: "Delete", imageClass: "k-icon k-delete" }]
}
],
editable: "inline"
});
});
</script>
</div>
</body>
</html>

From the code, given above, you can observe that Grid div Id(target Id) is given for Kendo Tooltip, which is based on the custom button image class condition and the title of the custom command buttons is shown as a tooltip content.

Result

Edit