JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ListBox › set items internally

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 15, 2018 at 11:41 am #98847
    admin
    Keymaster
    Up
    0
    Down

    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

    May 15, 2018 at 12:57 pm #98850
    admin
    Keymaster
    Up
    0
    Down

    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
    admin
    Keymaster
    Up
    0
    Down

    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
    admin
    Keymaster
    Up
    0
    Down

    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.