New to Kendo UI for jQueryStart a free 30-day trial

Configure Kendo Tooltip for TreeList command buttons

Environment

ProductProgress® Kendo UI® Tooltip for jQueryProgress® 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