jQuery ListBox Templates

The ShieldUI ListBox widget allows you to define custom templates which will be rendered into each list item and will be underlying list item’s value. The templates are passed to the textTemplate or valueTemplate options and can be string or function which returns string.

• String template

The string template can contain html elements which will be inserted into each list item. The template can contain formatted string parameters which will be replaced with the data item’s values:

<div id="listbox" ></div>
<script type="text/javascript">
    $(function () {
        $("#listbox").shieldListBox({
            dataSource: {
			        data: countries
		    },
            textTemplate: "{name}",
            valueTemplate: "{id}"
        });
    });
</script>

Live example of string template you can find in the following ListBox demo.

• Function as template

By assigning function to the textTemplate you can have full power over the returned string and can return different template based on underlying data item:

<div id="listbox" ></div>
<script type="text/javascript">
    $(function () {
        $("#listbox").shieldListBox({
            dataSource: {
			        data: countries
		    },
            textTemplate: function(item) {
			    return item.name;
		    },
            valueTemplate: function(item) {
			    return item.id;
		    }
        });
    });
</script>

Live example of function as template you can find in the following ListBox demo.