RouletteTree - globules-io/OGX.JS GitHub Wiki

RouletteTree is a proxy object that generates a group of Roulettes, one Roulette per group. Each Roulette affects its following Roulettes. It is available as a TreedList renderer. It is also bindable to DynamicList.

Stack

Extends

 Uxi

Requires

 Roulette

OML

 {"selector:RouletteTree":{CONFIG}}

Config

  {
       el:_SELECTOR_, //Where to create the component
       data:_OBJECT_, //Data tree
       groups:_ARRAY_, //group names per level,
       [all other properties for Roulette]
  }

Format

If RouletteTree is used outside of TreedList, the data format that it expects is as follow

 {
      canada:{
           ontario:{
                toronto:{...},
                mississauga:{...},
                ...
           },
           quebec:{
                montreal:{...},
           },
           ...
      },
      usa:{
            vermont:{
                 burlington:{...},
                 ...
            },
            ...
      }, 
      ...           
  }

In this case the groups for the configuration should be set to

  ['country', 'state', 'city', ...]

Groups are used to dispatch and object with the OGX.RouletteTree.CHANGE event, under the format

  {country:canada, state:ontario, city:toronto, ...}

You do not have to set the groups if you used this component as a renderer via TreedList

Create

RouletteTree can be created on the fly, at runtime, from an Object extending Uxi

 let tree = this.create('RouletteTree', config);

Independently

 let tree = OGX.Object.create('RouletteTree', config);

as OML

 OGX.OML.render(this, oml);

Methods

 tree.val(_OBJECT_); //get or set values for the tree

Example

 tree.val({country:'Canada', state:'ON'}); //Set
 let obj = tree.val(); //Get

Events

 OGX.RouletteTree.CHANGE