Show Tooltip for Grid Custom Command Buttons

Environment

Product	Progress® Kendo UI® Grid for jQuery	Progress® Kendo UI® Tooltip for jQuery
Product Version	2017.3.1026

Description

How can I show a tooltip for the Grid custom command buttons?

Solution

The Grid does not support a property for setting a tooltip to its command buttons. However, you can work around this issue by using a custom approach.

1. Set a name to the custom command button to produce a k-grid-commandName class in the button HTML output.

       <a role="button" class="k-button k-button-icontext k-grid-custom" href="#">Do Stuff</a>
   

2. Create a Kendo UI Tooltip whose filter property is set to include the k-grid-commandName class.

      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 20,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [
              {
                field:"OrderID",
                filterable: false
              },
              "Freight",
              {
                field: "OrderDate",
                title: "Order Date",
                format: "{0:MM/dd/yyyy}"
              }, {
                field: "ShipName",
                title: "Ship Name"
              }, {
                field: "ShipCity",
                title: "Ship City"
              },
              {
                command: {
                  name: "custom",
                  text: "Do Stuff"
                }
              }
            ]
          });
          $("#grid").kendoTooltip({
            filter: ".k-grid-custom",
            content: function(e){
              return "Click here";
            }
          });
        });
      </script>

See Also

• Kendo UI Tooltip Demos
• Kendo UI Tooltip Documentation