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({
name: "myapp.MainView",
components: [
{kind: "moon.DataList", groupSelection: true, components: [
{kind: "moon.CheckboxItem", handleTapEvent: false, bindings: [{from: ".model.id", to: ".content"}]}
]}
],
create: function () {
this.inherited(arguments);
this.$.dataList.collection = new enyo.Collection(["item1","item2","item3","item4"]);
}
})
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.