Post
Ask Question

Tooltip For Kendo Grid Custom Buttons

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
  1. Basic knowledge on Kendo UI framework
  2. 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. 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="http://demos.telerik.com/kendo-ui/grid/editing-inline">  
  5.     <style>  
  6.         html {  
  7.             font-size: 14px;  
  8.             font-family: Arial, Helvetica, sans-serif;  
  9.         }  
  10.     </style>  
  11.     <title></title>  
  12.     <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />  
  13.     <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />  
  14.     <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />  
  15.   
  16.     <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>  
  17.     <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>  
  18. </head>  
  19. <body>  
  20.     <div id="example">  
  21.         <div id="grid"></div>  
  22.   
  23.         <script>  
  24.             $("#example").kendoTooltip({  
  25.              filter: "span", 
  26.              content: function (e) {  
  27.               var grid = $("#grid").data("kendoGrid");  
  28.               var Str;  
  29.         $.each(grid.columns[4].command,function( index, value ) {  
  30.              if (e.target.hasClass(value.imageClass)){  
  31.             
  32.                 Str=value.title;  
  33.                 return false  
  34.             }  
  35.         });  
  36.         return Str  
  37.   
  38.     },   
  39.     width: 60,  
  40.   
  41.     position: "top"  
  42. }).data("kendoTooltip");  
  43.   
  44.                 $(document).ready(function () {  
  45.                     var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",  
  46.                         dataSource = new kendo.data.DataSource({  
  47.                             transport: {  
  48.                                 read:  {  
  49.                                     url: crudServiceBaseUrl + "/Products",  
  50.                                     dataType: "jsonp"  
  51.                                 },  
  52.                                 update: {  
  53.                                     url: crudServiceBaseUrl + "/Products/Update",  
  54.                                     dataType: "jsonp"  
  55.                                 },  
  56.                                 destroy: {  
  57.                                     url: crudServiceBaseUrl + "/Products/Destroy",  
  58.                                     dataType: "jsonp"  
  59.                                 },  
  60.                                 create: {  
  61.                                     url: crudServiceBaseUrl + "/Products/Create",  
  62.                                     dataType: "jsonp"  
  63.                                 },  
  64.                                 parameterMap: function(options, operation) {  
  65.                                     if (operation !== "read" && options.models) {  
  66.                                         return {models: kendo.stringify(options.models)};  
  67.                                     }  
  68.                                 }  
  69.                             },  
  70.                             batch: true,  
  71.                             pageSize: 20,  
  72.                             schema: {  
  73.                                 model: {  
  74.                                     id: "ProductID",  
  75.                                     fields: {  
  76.                                         ProductID: { editable: false, nullable: true },  
  77.                                         ProductName: { validation: { required: true } },  
  78.                                         UnitPrice: { type: "number", validation: { required: true, min: 1} },  
  79.                                         Discontinued: { type: "boolean" },  
  80.                                         UnitsInStock: { type: "number", validation: { min: 0, required: true } }  
  81.                                     }  
  82.                                 }  
  83.                             }  
  84.                         });  
  85.   
  86.                     $("#grid").kendoGrid({  
  87.                         dataSource: dataSource,  
  88.                         pageable: true,  
  89.                         height: 550,  
  90.                         toolbar: ["create"],  
  91.                         columns: [  
  92.                             "ProductName",  
  93.                             { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },  
  94.                             { field: "UnitsInStock", title:"Units In Stock", width: "120px" },  
  95.                             { field: "Discontinued", width: "120px" },  
  96.                             {  
  97.                             command: [{ name: "Edit", text: "", title: "Edit", Class: "test", imageClass: "k-icon k-i-pencil"},  
  98.                             { name: "destroy", text: "", title: "Delete", imageClass: "k-icon k-delete" }]  
  99.                             }  
  100.   
  101.                         ],  
  102.                         editable: "inline"  
  103.                     });  
  104.                 });  
  105.         </script>  
  106.     </div>  
  107.   
  108.   
  109. </body>  
  110. </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
 
    
 
Delete
 
 
 
 I hope, you have enjoyed this blog. Your valuable feedback, questions or comments about this blog are always welcome.
Next Recommended Reading Get Selected Row Value In Kendo Grid From The External Button Click Event