moon.DataList with moon.CheckboxItems and Group behaviour

I would like to dynamically build a list of checkboxItems from a collection, where only one item can be active.

I was hoping something like this would work:
enyo.kind({<br />    name: "myapp.MainView",<br />    components: [<br />        {kind: "moon.DataList", groupSelection: true, components: [<br />            {kind: "moon.CheckboxItem", handleTapEvent: false, bindings: [{from: ".model.id", to: ".content"}]}<br />        ]}<br />    ],<br />    create: function () {<br />        this.inherited(arguments);<br />        this.$.dataList.collection = new enyo.Collection(["item1","item2","item3","item4"]); <br />    }<br />})
It doesn't work, I can select all of the items simultaneously.
What is the correct way to use the groupSelection property?

I also tried to nest the whole Datalist in an enyo.Group (and vice versa), but then nothing rendered.

Comments

  • A few of thoughts:

    1) Don't use a CheckBoxItem unless there's some compelling reason to.
    2) Use the 'selectionProperty' of the DataList to tie to the selected property in your model
    3) Make sure your model includes a selection property

    The DataList/DataRepeater has support for the selection property already, so you can use that to style your rows. Like such: http://jsfiddle.net/L95a836f/1/
  • Thank you.
Sign In or Register to comment.