jQuery UI Widgets Forums Lists ListBox ListBox with Checkbox and small Image

This topic contains 2 replies, has 2 voices, and was last updated by  yakirmanor 10 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • ListBox with Checkbox and small Image #7223


    by any chance there is a combination of the ListBox type ‘Custom Rendering’
    in this page:


    and the ListBox type ‘Checkboxes’
    in this page:

    meaning on the left of each employee there will be a checkbox similar to the on in the ListBox type ‘Checkboxes’ example and the employee name or id will be returned ?
    could be a great deal of help.

    ps – i mean to have the ListBox type ‘Checkboxes’ example with an addition of a small pic between the checkbox itself and the name on the right of it is what im trying to create.
    like so:
    | | img name

    here is a picture of what im trying to create:

    ListBox with Checkbox and small Image #7239


    Hello yakirmanor,

    Here is how to combine Custom Rendering and Checkboxes:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.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/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var source = [
    "Internet Explorer",
    $("#jqxlistbox").jqxListBox({ source: source, width: '200px', autoHeight: true, checkboxes: true,
    renderer: function (index, label, value) {
    return '<img src="../custom_images/' + label + '.png" width="25" height="25" />' + label;
    $("#jqxlistbox").jqxListBox('checkIndex', 0);
    <div id="jqxlistbox">

    Best Regards,

    jqWidgets team

    ListBox with Checkbox and small Image #7243


    thanks a lot!
    but i set on it too, you can see mine here:

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.