ListBox with Checkbox and small Image - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox, custom, image, jqxListBox, list, ListBox, rendering

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

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

Author

ListBox with Checkbox and small Image Posts

August 28, 2012 at 11:24 pm ListBox with Checkbox and small Image #7223

yakirmanor

Member

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

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/rendering.htm?classic

and the ListBox type ‘Checkboxes’
in this page:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/checkboxes.htm?classic

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:
http://www.flickr.com/photos/74908757@N02/7883703918/

August 29, 2012 at 8:35 am ListBox with Checkbox and small Image #7239

Dimitar

Participant

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">
<head>
    <title></title>
    <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",
                    "Firefox",
                    "Opera",
		        ];
            $("#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);
        });
    </script>
</head>
<body>
    <div id="jqxlistbox">
    </div>
</body>
</html>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 29, 2012 at 9:16 am ListBox with Checkbox and small Image #7243

yakirmanor

Member

thanks a lot!
but i set on it too, you can see mine here:
http://jsfiddle.net/yakirmanor/UDJaX/embedded/result/

Author

Posts

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

You must be logged in to reply to this topic.