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

Show DropDownList Item Details in ToolTip

Environment

ProductProgress® Kendo UI® DropDownList for jQuery
Operating SystemWindows 10 64bit
Visual Studio VersionVisual Studio 2017
Preferred LanguageJavaScript

Description

How can I show additional information about a list item in a Kendo UI DropDownList?

Solution

A possible way to achieve this behavior is to use a Kendo UI Tooltip that displays the details when the user hovers with the mouse over the DropDownList item.

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

<input id="dropdownlist" style="width:300px" />
<script>
  var ddl = $("#dropdownlist").kendoDropDownList({
    width:300,
    size:"small",
    dataSource: {
      transport: {
        read: {
          url: 'https://jsonplaceholder.typicode.com/users',
          dataType: 'json'
        }
      }
    },
    dataTextField: "username",
    dataValueField: "id"
  }).data('kendoDropDownList');

  $('body').kendoTooltip({
    filter: 'li.k-list-item',
    position: 'right',
    content: function(e){
      var item = ddl.dataItem($(e.target));

      var result = '<h3>' + item.name + '</h3>' +
					'<h4>' + item.email + '</h4>' +
          'Address: <hr />' +
          '<p>Street: ' + item.address.street + '</p>' +
          '<p>Suite: ' + item.address.suite + '</p>' +
          '<p>ZIP Code: ' + item.address.zipcode + '</p>';

      return result;
    },
    width: 220,
    height: 280
  });
</script>

See Also