HTML Elements Forums Forms & Editors ListBox set items internally

This topic contains 3 replies, has 2 voices, and was last updated by Avatar Anonymous 2 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #98847


    I am wondering is it possible to have initially loaded items in my listbox and after that to update it.
    Is it possible to add (“Order 1”, “Order 4”) in the “<smart-list-box>” as an attribute?
    My code:

    <!DOCTYPE html>
    <html lang="en">
            <link rel="stylesheet" href="../source-minified/styles/smart.base.css" type="text/css" />
            <script type="text/javascript" src=""></script>
            <script type="text/javascript" src="../source-minified/smart.element-polyfills.js"></script>
            <script type="text/javascript" src="../source-minified/smart.element.js"></script>
            <script type="text/javascript" src="../source-minified/smart.button.js"></script>
            <script type="text/javascript" src="../source-minified/smart.scrollbar.js"></script>
            <script type="text/javascript" src="../source-minified/smart.listbox.js"></script>
                window.onload = function () {
                    let updateButton = document.getElementById('update');
                    let isUpdated = false;
                    let orderList = ["Order 1", "Order 4"];
                    updateButton.addEventListener('click', function (event) {
                        if (!isUpdated) {
                            isUpdated = true;
                            updateButton.content = "UpdateD";
                            //update listbox
                            let listbox = document.querySelector('smart-list-box');
                            orderList.push("Order 2");
                            orderList.push("Order 3");
                            listbox.dataSource = orderList;
            <smart-list-box dataSource="orderList"></smart-list-box>
            <smart-button style="width: 65px; height: 65px; border-radius: 50%; background-color: #55719e;" id="update">Update</smart-button>

    Thank you in advance,
    –Aleksandar Laskin

    • This topic was modified 2 years, 2 months ago by Avatar .
    • This topic was modified 2 years, 2 months ago by Avatar .

    Hi Aleksandar,

    Here is how to set the dataSource property as an attribute:

    <smart-list-box data-source='["Order 1", "Order 4"]'></smart-list-box>

    Note that when setting properties as attributes, they have to be in dash-case (not in CamelCase), i.e. data-source, not dataSource.

    Best Regards,

    SmartElements Team


    Thank you Dimitar!. I have gone astray 🙂 it is my mistake.
    This is greate But I have another question. How can I update one particular item?
    For example I want to change the “Order 1” to “Order 1 (sold)”.

    –Aleksandar Laskin


    Hi Aleksandar,

    You can do so by calling the update method, i.e.:

    document.querySelector('smart-list-box').update(0, 'Order 1 (sold)');

    Best Regards,

    Smart HTML Elements Team

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

You must be logged in to reply to this topic.