jQWidgets jqxComboBox renderer Property

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxComboBox is used to represent a jQuery ComboBox widget that contains an input field with autocomplete functionality and a list of selectable items displayed in a drop-down.

The renderer property is a callback function that is invoked whenever an item from the stated combobox is rendered. Moreover, this function is helpful in customizing the view of the stated list items. It is of type function and its default value is "null".

Syntax:

To set the renderer property:

$('#selector').jqxComboBox({renderer: function (i, label, val) 
 {
 var datarecord = data[i];
 return datarecord.first_name + " " + datarecord.last_name;
 }
});

To get the renderer property:

var renderer = $('#selector').jqxComboBox('renderer'); 

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>

Example 1: The below example illustrates the jQWidgets jqxComboBox renderer property.

Output:

Example 2: The following is another example of the jqxComboBox renderer property in jQWidgets.

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcombobox/jquery-combobox-api.htm?search=