JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › combining "dataSource" and item template
Tagged: combo box, combobox, combobox grouping
- This topic has 6 replies, 2 voices, and was last updated 3 years, 11 months ago by edwardsmarkf.
-
AuthorPosts
-
November 18, 2020 at 11:17 pm #101157edwardsmarkfMember
hello – the more i use ComboBox the more i see how very useful this is.
is there any way to combine the dataSource and Item template options?November 20, 2020 at 7:20 am #101158adminKeymasterHi,
You can combine these without a problem.<smart-combo-box item-template="template"> </smart-combo-box> <template id="template"> <span class="glyphicon glyphicon-ok">test</span> <span style="margin-left:5px;">{{label}}</span> </template>
JS Code
window.onload = function() {
const combobox = document.querySelector(‘smart-combo-box’);
combobox.dataSource = [“new item 1”, “new item 2”];
}
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/November 20, 2020 at 9:45 pm #101161edwardsmarkfMembersorry, maybe i should have said <smart-list-item-group> instead.
https://www.htmlelements.com/demos/combobox/item-template/
is it possible to use a dataSource with a <smart-list-item-group>?
in other words, the car example combines “smart-list-items-group” with “smart-list-item”:<smart-list-items-group label="Swedish Cars"> <smart-list-item value="volvo">Volvo</smart-list-item> <smart-list-item value="saab">Saab</smart-list-item> <smart-list-item value="saab">Scania</smart-list-item> </smart-list-items-group>
is it possible to do something identical using a dataSource?
November 23, 2020 at 2:39 pm #101168adminKeymasterHi,
The component has also a groupMember which defines the group field in the data source. In this case, you can use it.
Regards,
PeterNovember 27, 2020 at 10:05 pm #101180edwardsmarkfMemberthank you, i missed that in the documentation.
according to this link, i should be able to use the following:The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group.
however, i am unable to see the group here: https://codepen.io/edwardsmarkf/pen/VwKwogP
please let me know what i am doing incorrectly.November 28, 2020 at 7:18 am #101181adminKeymasterHi,
You’ve missed setting the mentioned in the previous post – groupMember property and also the grouped property which determines that Grouping is applied.<smart-combo-box grouped group-member="group" selection-display-mode="tokens" placeholder="Select items:"></smart-combo-box>
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/November 29, 2020 at 2:37 am #101183edwardsmarkfMember***T-H-A-N-K—Y-O-U**** to Peter Stoev !
using dataSource is extraordinarily useful. perhaps it would be helpful to have an example on the website. now that i see it, yes its very simple to do:
https://codepen.io/edwardsmarkf/pen/VwKwogP
it is very simple to create a dataSource using just about any programming language, especially node. -
AuthorPosts
- You must be logged in to reply to this topic.