jQWidgets jqxListBox renderer Property

Last Updated : 14 Sep, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxListBox is used to illustrate a jQuery ListBox widget which comprises a list of electable elements.

The renderer property is a callback function that is invoked whenever an item from the stated listbox 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:

$('#jqxListBox').jqxListBox({
    renderer: function (index, label, value) {
        var datarecord = data[index];
        return datarecord.firstname + " " + datarecord.lastname;
    }
});

To get the renderer property:

var renderer = $('#jqxListBox').jqxListBox('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>

Example: The below example illustrates the jqxListBox 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/jqxbuttons.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxscrollbar.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxlistbox.js"></script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxListBox renderer Property 
        </h3> 
  
        <div id="jqxLB"></div> 
        <br /> 
    </center> 
  
    <script type="text/javascript"> 
        $(document).ready(function () { 
            var data = new Array(); 
            var subjectName = ["C:", "CSS:",  
                "C++:", "computer Science:"]; 
                  
            var marks = ["45", "56", "60", "80"]; 
            var v = 0; 
  
            for (var i = 0; i < subjectName.length; i++) { 
                var r = {}; 
                r["subjectName"] = subjectName[v]; 
                r["marks"] = marks[v]; 
                data[i] = r; 
                v++; 
            } 
            var src = { 
                localdata: data, 
                datatype: "array", 
            }; 
            var data_Adapter = new $.jqx.dataAdapter(src); 
            $("#jqxLB").jqxListBox({ 
                source: data_Adapter, 
                width: "200px", 
                height: "100px", 
                displayMember: "subjectName", 
                renderer: function (index, label, value) { 
                    var data_record = data[index]; 
                    var t = '<table style="min-width: 150px;"><tr><td>' 
                        + data_record.subjectName + " " + data_record.marks 
                        + "</td></tr></table>"; 
                    return t; 
                }, 
            }); 
        }); 
    </script> 
</body> 
  
</html> 