jQWidgets jqxComboBox renderer Property

Last Updated : 26 Apr, 2023

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <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/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcombobox.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
              jQWidget jqxComboBox renderer property  
          </h3> 
  
        <div id='jqxCB'></div> 
        <br> 
        <div id="divID"></div> 
    </center> 
  
    <script type="text/javascript"> 
  
        $(document).ready(function () { 
            var data = [ 
                { 
                    name: "HTML", 
                    index: 0, 
                }, 
                { 
                    name: "CSS", 
                    index: 1, 
                }, 
                { 
                    name: "JavaScript", 
                    index: 2, 
                }, 
                { 
                    name: "jQuery", 
                    index: 3, 
                }, 
                { 
                    name: "Angularjs", 
                    index: 4, 
                }, 
                { 
                    name: "Bootstrap", 
                    index: 5, 
                } 
            ]; 
  
            $("#jqxCB").jqxComboBox({ 
                source: data, 
                width: '250px', 
                animationType: 'slide', 
                displayMember: "name", 
                valueMember: "index", 
                renderer: function (i, label, val) { 
                    var d_record = data[i]; 
                    var r = '<table style="min-width: 150px;"><tr><td>' 
                        + d_record.name + " " + d_record.index 
                        + "</td></tr></table>"; 
                    return r; 
                }, 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <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/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript"
            src="jqwidgets/jqxcombobox.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
              jQWidget jqxComboBox renderer property  
          </h3> 
  
        <div id='jqxCB'></div> 
        <br> 
        <input type="button" 
               id="btn" 
               value="Click Here" 
               style="padding: 5px 14px;  
                      margin-top: 15px;"> 
        <div id="log"></div> 
    </center> 
  
    <script type="text/javascript"> 
  
        $(document).ready(function () { 
            var data = [ 
                { 
                    name: "HTML", 
                    index: 0, 
                }, 
                { 
                    name: "CSS", 
                    index: 1, 
                }, 
                { 
                    name: "JavaScript", 
                    index: 2, 
                }, 
                { 
                    name: "jQuery", 
                    index: 3, 
                }, 
                { 
                    name: "Angularjs", 
                    index: 4, 
                }, 
                { 
                    name: "Bootstrap", 
                    index: 5, 
                } 
            ]; 
  
            $("#jqxCB").jqxComboBox({ 
                source: data, 
                width: '250px', 
                animationType: 'slide', 
                displayMember: "name", 
                renderer: null, 
            }); 
  
            $('#btn').click(function () { 
                var r = $('#jqxCB').jqxComboBox('renderer'); 
                if (r === null) { 
                    $('#log').text("Null!"); 
                } 
                else { 
                    $('#log').text("Not null!"); 
                } 
            }); 
        }); 
    </script> 
</body> 
  
</html>