JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums ComboBox combining "dataSource" and item template

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #101157
    edwardsmarkf
    Member

    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?

    #101158
    admin
    Keymaster

    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/

    #101161
    edwardsmarkf
    Member

    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?

    #101168
    admin
    Keymaster

    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

    #101180
    edwardsmarkf
    Member

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

    however, i am unable to see the group here:  https://codepen.io/edwardsmarkf/pen/VwKwogP
    please let me know what i am doing incorrectly.

    #101181
    admin
    Keymaster

    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/

    #101183
    edwardsmarkf
    Member

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.