Configure Kendo Tooltip for TreeList command buttons

Environment

Product

Progress® Kendo UI® Tooltip for jQuery

Progress® Kendo UI® TreeList for jQuery

 

Description

How to update the content of Kendo Tooltip when it is used for the TreeList command buttons?

Solution

Subscribe to the TreeList edit, dataBound and cancel events. In the event handlers refresh the Tooltip content using the refresh method

DatePicker

The following example demonstrates how to refresh the content of Kendo Tooltip when different command buttons in the TreeView are clicked.

 <div id="treelist"></div>

<script>
    $(document).ready(function(){
      var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

      var dataSource = new kendo.data.TreeListDataSource({
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/EmployeeDirectory/All"
          },
          update: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
             type: "POST",
                 contentType: "application/json"
          },
          destroy: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
             type: "POST",
                 contentType: "application/json"
          },
          create: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
             type: "POST",
                 contentType: "application/json"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return kendo.stringify(options.models);
            }
          }
        },
        batch: true,
        schema: {
          model: {
            id: "EmployeeId",
            parentId: "ReportsTo",
            fields: {
              EmployeeId: { type: "number", editable: false, nullable: false },
              ReportsTo: { nullable: true, type: "number" },
              FirstName: { validation: { required: true } },
              LastName: { validation: { required: true } },
              HireDate: { type: "date" },
              Phone: { type: "string" },
              HireDate: { type: "date" },
              BirthDate: { type: "date" },
              Extension: { type: "number", validation: { min: 0, required: true } },
              Position: { type: "string" }
            },
            expanded: true
          }
        }
      });

      $("#treelist").kendoTreeList({
        dataSource: dataSource,           
        edit: function(e){            
          $('#treelist').data('kendoTooltip').refresh()             
        },
        dataBound: function(e){            
          $('#treelist').data('kendoTooltip').refresh()             
        },
        cancel: function(e){
          setTimeout(function(){
            $('#treelist').data('kendoTooltip').refresh()
          })
        },
        toolbar: [ "create" ],
        editable: true,
        height: 540,
        columns: [
          { field: "FirstName", expandable: true, title: "First Name", width: 220 },
          { field: "LastName", title: "Last Name", width: 100 },
          { field: "Position" },
          { field: "HireDate", title: "Hire Date", format: "{0:MMMM d, yyyy}" },
          { field: "Phone", title: "Phone" },
          { field: "Extension", title: "Ext", format: "{0:#}" },
          { command: ["edit", "destroy", "cancel"], width: 300 }
        ]
      });

      $("#treelist").kendoTooltip({
        filter: ".k-button-icontext",
        content: function(e){              	
          return e.target.text()
        }
      });

      function customBoolEditor(container, options) {
        $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
      }
    })
</script>

See Also

• [Tooltip] API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip)
• TreeList API Reference