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
    Posts
  • May 15, 2018 at 11:41 am #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, 2 months ago by Avatar .
    • This topic was modified 2 years, 2 months ago by Avatar .
    May 15, 2018 at 12:57 pm #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

    May 16, 2018 at 6:09 am #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

    May 16, 2018 at 11:26 am #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

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

You must be logged in to reply to this topic.