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, 5 months ago.

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

    Hi,

    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">
    
        <head>
            <link rel="stylesheet" href="../source-minified/styles/smart.base.css" type="text/css" />
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/custom-elements-es5-adapter.js"></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>
    
            <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");
                            orderList.sort();
                            listbox.dataSource = orderList;
    
                        }
                    });
                }
            </script>
        </head>
    
        <body>
    
            <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>
    
        </body>
    
    </html>

    Thank you in advance,
    –Aleksandar Laskin

    • This topic was modified 2 years, 5 months ago by Avatar .
    • This topic was modified 2 years, 5 months ago by Avatar .
    #98850
    Avatar
    Anonymous

    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,
    Dimitar

    SmartElements Team
    http://www.htmlelements.com

    #98854
    Avatar
    Anonymous

    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

    #98855
    Avatar
    Anonymous

    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,
    Dimitar

    Smart HTML Elements Team
    https://www.htmlelements.com

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

You must be logged in to reply to this topic.