Show Extra TreeList Information in a Tooltip

Environment

Product	Progress® Kendo UI® TreeList for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I show additional information about an entry in the Kendo UI for jQuery TreeList?

Solution

To achieve this behavior, use a Kendo UI Tooltip that displays the information when the user hovers with the mouse over the TreeList node.

The following example demonstrates how to customize the information displayed in the Tooltip depending on the respective data item fields.

  <div id="treelist"></div>
  <script>
    $(document).ready(function () {
      var dataSource = new kendo.data.TreeListDataSource({
        data: [
          { id: 1, Name: "Daryl Sweeney", Position: "CEO", Phone: "[phone]", parentId: null },
          { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Phone: "[phone]", parentId: 1 },
          { id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Phone: "[phone]", parentId: 2 },
          { id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Phone: "[phone]", parentId: 32 },
          { id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Phone: "[phone]", parentId: 11 },
          { id: 78, Name: "Rinah Simon", Position: "Software Developer", Phone: "[phone]", parentId: 11 },
          { id: 42, Name: "Gage Daniels", Position: "Software Architect", Phone: "[phone]", parentId: 32 },
          { id: 43, Name: "Constance Vazquez", Position: "Director, Engineering", Phone: "[phone]", parentId: 32 },
          { id: 46, Name: "Darrel Solis", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
          { id: 47, Name: "Brian Yang", Position: "Senior Software Developer", Phone: "[phone]", parentId: 46 },
          { id: 50, Name: "Lillian Bradshaw", Position: "Software Developer", Phone: "[phone]", parentId: 46 },
          { id: 51, Name: "Christian Palmer", Position: "Technical Lead", Phone: "[phone]", parentId: 46 },
          { id: 55, Name: "Summer Mosley", Position: "QA Engineer", Phone: "[phone]", parentId: 46 },
          { id: 56, Name: "Barry Ayers", Position: "Software Developer", Phone: "[phone]", parentId: 46 },
          { id: 59, Name: "Keiko Espinoza", Position: "Junior QA Engineer", Phone: "[phone]", parentId: 46 },
          { id: 61, Name: "Candace Pickett", Position: "Support Officer", Phone: "[phone]", parentId: 46 },
          { id: 63, Name: "Mia Caldwell", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
          { id: 65, Name: "Thomas Terry", Position: "Senior Enterprise Support Officer", Phone: "[phone]", parentId: 63 },
          { id: 67, Name: "Ruth Downs", Position: "Senior Software Developer", Phone: "[phone]", parentId: 63 },
          { id: 70, Name: "Yasir Wilder", Position: "Senior QA Enginner", Phone: "[phone]", parentId: 63 },
          { id: 71, Name: "Flavia Short", Position: "Support Officer", Phone: "[phone]", parentId: 63 },
          { id: 74, Name: "Aaron Roach", Position: "Junior Software Developer", Phone: "[phone]", parentId: 63 },
          { id: 75, Name: "Eric Russell", Position: "Software Developer", Phone: "[phone]", parentId: 63 },
          { id: 76, Name: "Cheyenne Olson", Position: "Software Developer", Phone: "[phone]", parentId: 63 },
          { id: 77, Name: "Shaine Avila", Position: "UI Designer", Phone: "[phone]", parentId: 63 },
          { id: 81, Name: "Chantale Long", Position: "Senior QA Enginner", Phone: "[phone]", parentId: 63 },
          { id: 83, Name: "Dane Cruz", Position: "Junior Software Developer", Phone: "[phone]", parentId: 63 },
          { id: 84, Name: "Regan Patterson", Position: "Technical Writer", Phone: "[phone]", parentId: 63 },
          { id: 85, Name: "Drew Mckay", Position: "Senior Software Developer", Phone: "[phone]", parentId: 63 },
          { id: 88, Name: "Bevis Miller", Position: "Senior Software Developer", Phone: "[phone]", parentId: 63 },
          { id: 89, Name: "Bruce Mccarty", Position: "Support Officer", Phone: "[phone]", parentId: 63 },
          { id: 90, Name: "Ocean Blair", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
          { id: 91, Name: "Guinevere Osborn", Position: "Software Developer", Phone: "[phone]", parentId: 90 },
          { id: 92, Name: "Olga Strong", Position: "Graphic Designer", Phone: "[phone]", parentId: 90 },
          { id: 93, Name: "Robert Orr", Position: "Support Officer", Phone: "[phone]", parentId: 90 },
          { id: 95, Name: "Odette Sears", Position: "Senior Software Developer", Phone: "[phone]", parentId: 90 },
          { id: 45, Name: "Zelda Medina", Position: "QA Architect", Phone: "[phone]", parentId: 32 },
          { id: 3, Name: "Priscilla Frank", Position: "Chief Product Officer", Phone: "[phone]", parentId: 1 },
          { id: 4, Name: "Ursula Holmes", Position: "EVP, Product Strategy", Phone: "[phone]", parentId: 3 },
          { id: 24, Name: "Melvin Carrillo", Position: "Director, Developer Relations", Phone: "[phone]", parentId: 3 },
          { id: 29, Name: "Martha Chavez", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
          { id: 30, Name: "Oren Fox", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
          { id: 41, Name: "Amos Barr", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 }
        ],

        schema: {
          model: {
            id: "id",
            expanded: true
          }
        }
      });

      var treelist = $("#treelist").kendoTreeList({
        dataSource: dataSource,
        height: 540,
        columns: [
          { field: "Position" },
          { field: "Name" },
          { field: "Phone" }
        ]
      }).data('kendoTreeList');

      $("#treelist").kendoTooltip({
        filter: 'td',
        content: function(e) {
          var targetRow = $(e.target).closest('tr');
          var dataItem = treelist.dataItem(targetRow);
          return dataItem.Name + ', Position: ' + dataItem.Position;
        }
      });
    });
  </script>

See Also

• Basic Usage of the TreeList (Demo)
• Using the API of the TreeList (Demo)
• TreeList JavaScript API Reference