combining "dataSource" and item template

[edwardsmarkf]

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?

[admin]

Hi,
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/

[edwardsmarkf]

sorry, 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?

[admin]

Hi,
The component has also a groupMember which defines the group field in the data source. In this case, you can use it.
Regards,
Peter

[edwardsmarkf]

thank 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.

[admin]

Hi,
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/

[edwardsmarkf]

***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.

[Author]

Posts