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

Add Click Handlers to Icons in the ListBox Template

Environment

Product Version2019.1.220
ProductProgress® Kendo UI® ListBox for jQuery

Description

How can I add a small icon to the template of the Kendo UI ListBox that is clickable? No matter what I try the function is not executed.

Solution

The Kendo UI ListBox prevents the mousedown event as it needs it for dragging and selection. To attach a handler that responds to an external mouse event, wrap the ListBox in another div and check for the target element during mousedown or click.

tab-jQuery
 	<div id="listbox-container">
      <select id="listBox"></select>
    </div>

		<script>
	 	// The item template has an icon with a see-more class.
	  $("#listbox-container").on("click", ".see-more", function(e){
        var dataItem = listbox.dataItem($(e.target).closest(".k-item"));
        kendo.alert("Children: " + kendo.stringify(dataItem.children));
      });
    </script>

The following example demonstrates the full implementation of the suggested approach.

	<script type="text/kendo-x-tmpl" id="template">
    	<span class="k-icon k-i-eye see-more"></span>
  		<span class="k-state-default"><div>#: data.name #</div></span>
	</script>
 	<div id="listbox-container">
    	<select id="listBox"></select>
 	</div>
 	<script>
		var listbox =  $("#listBox").kendoListBox({
		  draggable:true,
		  dataSource: {
		    data: [
		      { name: "Jane Doe", children: [{name: "Mary"}] },
		      { name: "John Doe", children: [{name: "Tom"}, {name: "George"}]  }
		    ]
		  },
		  template: kendo.template($("#template").html())
		}).data("kendoListBox");

		$("#listbox-container").on("click", ".see-more", function(e){
		  var dataItem = listbox.dataItem($(e.target).closest(".k-item"));
		  kendo.alert("Children: " + kendo.stringify(dataItem.children));
		});

	</script>
	<style>
	  .see-more {
	  	color: #515967;
	  	background-color: #f3f3f4;
	  	padding:4px;
	  	border-radius:5px;
	  	border: 1px solid #515967;
	  }
	</style>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support