HTML Elements › Forums › Forms & Editors › ListBox › set items internally
This topic contains 3 replies, has 2 voices, and was last updated by Anonymous 2 years, 8 months ago.
- AuthorPosts
- May 15, 2018 at 11:41 am #98847
AnonymousHi,
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, 8 months ago by
.
- This topic was modified 2 years, 8 months ago by
.
May 15, 2018 at 12:57 pm #98850
AnonymousHi 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,
DimitarSmartElements Team
http://www.htmlelements.comMay 16, 2018 at 6:09 am #98854
AnonymousThank 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
AnonymousHi Aleksandar,
You can do so by calling the update method, i.e.:
document.querySelector('smart-list-box').update(0, 'Order 1 (sold)');
Best Regards,
DimitarSmart HTML Elements Team
https://www.htmlelements.com - This topic was modified 2 years, 8 months ago by
- AuthorPosts
You must be logged in to reply to this topic.