DropDownList - Text with Icons + JSON - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: ajax, data, icon, item, jqxDropDownList, json, load, source

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.

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

Author

DropDownList – Text with Icons + JSON Posts

April 25, 2014 at 10:20 am DropDownList – Text with Icons + JSON #53574

kotaskam

Participant

Hello,

I would like to ask to help me to solve a following problem.

I would like to use a DropDownList where items consist of icon and text.
The source of data is an AJAX – JSON.

How to do it ?

Thank you.

Best regards,

Milan

April 28, 2014 at 8:22 am DropDownList – Text with Icons + JSON #53652

Dimitar

Participant

Hello Milan,

Here is how to achieve this:

<!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.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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/jqxdropdownlist.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $.getJSON("items.txt", function (data) {
                    $("#jqxWidget").jqxDropDownList({ source: data, selectedIndex: 0, width: '200', height: '25px' });
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

And here is the code of items.txt:

[
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/numberinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>",
        "title": "jqxNumberInput"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/progressbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>",
        "title": "jqxProgressBar"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/calendar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>",
        "title": "jqxCalendar"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/button.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxButton</span></div>",
        "title": "jqxButton"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/dropdownlist.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDropDownList</span></div>",
        "title": "jqxDropDownList"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/listbox.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxListBox</span></div>",
        "title": "jqxListBox"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/tooltip.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxTooltip</span></div>",
        "title": "jqxTooltip"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/scrollbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxScrollBar</span></div>",
        "title": "jqxScrollBar"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/datetimeinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDateTimeInput</span></div>",
        "title": "jqxDateTimeInput"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/expander.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxExpander</span></div>",
        "title": "jqxExpander"
    },
    {
        "html": "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/menu.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxMenu</span></div>",
        "title": "jqxMenu"
    }
]

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.