TreedList - globules-io/OGX.JS GitHub Wiki

TreedList is a proxy object that converts a List by grouping it into a data tree then renders it using a rendering engine.

Stack

Extends

 Uxi, Touch

Requires

 List, Tree*, StackedTree*, RouletteTree*

*depending on renderer

OML

Format

 {"selector:TreedList":{CONFIG}}

Create

TreedList can also be created on the fly, at runtime

 let config = {
      el:_STRING_,  //Required, selector         
      types:_OBJECT_ //Required for OGX.Tree, types as expected by OGX.Tree
      renderer:_STRING_, //Optional, the component used to display the tree, defaults to 'Tree'
      list:_ARRAY_ //Optional, OGX.List prefered,         
      group_by:_ARRAY_, //Optional, array of properties to group by
      group_mode:_STRING_, //Optional, grouping mode
      group_param:*, //Optional, grouping options, array or string
 };

From an object extending Uxi

 let treed = this.create('TreedList', config);

Independently

 let treed = OGX.Object.create('TreedList', config);

Renderer

The data tree obtained from the transformation of a List is then passed to a component for rendering. So far, you can select between RouletteTree, StackedTree and Tree, by setting the renderer to either RouletteTree, StackedTree, Tree, Tree being the default.

Grouping

Please check out List to know more about grouping a list/array.

Methods

 treed.getRenderer() //Returns the internal OGX component, Tree or StackedTree
 treed.destroy() //Destroys itself and the internal component
 treed.getTree() //Returns the list converted to data tree