Custom multiline item

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Custom multiline item</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		div.dhxcombolist_material div.dhxcombo_option_multiline {
			position: relative;
			font-size: inherit;
			padding: 2px 0px;
			line-height: 22px;
			border-top: 1px solid #dfdfdf;
			border-bottom: 1px solid #dfdfdf;
			margin-top: -1px;
			vertical-align: middle;
			overflow: hidden;
			cursor: default;
		}
		div.dhxcombolist_material div.dhxcombo_option_multiline.dhxcombo_option_selected {
			background-image: none;
			background-color: #ebebeb;
			border-top: 1px solid #dfdfdf;
			border-bottom: 1px solid #dfdfdf;
		}
		div.dhxcombolist_material div.dhxcombo_option_multiline div.dhxcombo_option_text {
			position: relative;
			padding: 0px 4px;
			-moz-user-select: none;
			white-space: nowrap;
			font-size: 14px;
			font-family: Roboto, Arial, Helvetica;;
		}
	</style>
	<script>
		var myCombo;
		var imgPath = "../common/flags/";
		function doOnLoad() {
			myCombo = new dhtmlXCombo("combo_zone", "combo", 230, "my_multiline");
			myCombo.setTemplate({ // point (2) (see below)
				input: "#capital#",
				option: "<div style='position:relative;'>"+
						"<div style='position: relative; margin-left: 32px; left: 0px;'><span style='color:#112a3d;'>#capital#</span><br><span style='color:#596268;'>#country#</span></div>"+
						"<img src='#image#' border='0' style='position: absolute; left: 6px; top: 14px;'>"+
					"</div>"
			});
			myCombo.addOption([
				{value: 1, text: {country: "Finland", capital: "Helsinki", image: imgPath+"finland.png"}, selected: true},
				{value: 2, text: {country: "Germany", capital: "Berlin", image: imgPath+"germany.png"}},
				{value: 3, text: {country: "Great Britain", capital: "London", image: imgPath+"britain.png"}},
				{value: 4, text: {country: "Hungary", capital: "Budapest", image: imgPath+"hungary.png"}}
			]);
			myCombo.enableFilteringMode(true);
		}

		// multiline items
		// differences from default option:
		// 1) update option css a bit
		// 2) use template for text

		dhtmlXCombo.prototype.modes.my_multiline = {

			render: function(item, data) {

				item._conf = {value: data.value, css: ""};
				item.className = "dhxcombo_option_multiline"; // point (1)

				item.innerHTML = "<div class='dhxcombo_option_text'>&nbsp;</div>";

				this.setText(item, data.text);

				return this;
			},

			setSelected: function(item, state) {
				item.className = "dhxcombo_option_multiline"+(state?" dhxcombo_option_selected":""); // point (1)
			},

			getExtraData: function(item) {
				return {type: "my_multiline"};
			}

		};

		// copy basic functionality
		dhtmlXComboExtend("my_multiline", "option");

	</script>
</head>
<body onload="doOnLoad();">
	<h3>Custom multiline item</h3>
	<div id="combo_zone"></div>
</body>
</html>
Documentation

Check documentation to learn how to use the components and easily implement them in your applications.