TreeView

Check the link for live example of TreeView implemented in React https://codesandbox.io/s/ajvijs-react-treeview-vl0rf

There are two ways how to implement AjviJS TreeView. The first way is programmatically like:

this.TreeView({
    name: 'mytree',
    cross: true,
    lines: true,
    store: 'mytreestore',
    checkboxes: true,
    editable: true,
    draggable: true,
    expanded: true,
    imgpath: 'assets/tree/',
    imgstatic: ['folderopen.png', 'folderclose.png']
})
			
this.mytree.view.At('tagname|id|DOMelement')

with store method defined as property value with mandatory passthrough property set to true for above example.

mytreestore(store) {
    store.fill = {
        url: 'mocks/cowboystree.json',
	response: 'json',
        passthrough: true
    }
}

The full code of first example:

import {ajvi} from 'ajvijsmvc/abstract.js'

export class treeview extends ajvi { 

	constructor() {
            super()

	    this.TreeView({
                name: 'mytree',
                cross: true,
                lines: true,
                store: 'mytreestore',
                checkboxes: true,
                editable: true,
                draggable: true,
                expanded: true,
                imgpath: 'assets/tree/',
                imgstatic: ['folderopen.png', 'folderclose.png']
                },{
                // register event methods
                treeOnLoad: this.treeOnLoad,
                itemOnSelect: this.itemOnSelect
                // and so on with all events you need
           })
		
           // use this.mytree.view to access TreeView DOM	
           this.mytree.view.At('tagname|id|DOMelement')	
           
        }

        mytree(store) {
            store.fill = {
                url: 'mocks/cowboystree.json',
	        response: 'json',
                passthrough: true
            }
        }

        treeOnLoad(store) {
            // do something onload
            console.log(this.mytree.getAllChecked())
        }

        itemOnSelect(id, store) {
            // do something with selected id or treeview store data
        }

}

and the second way is by defining view in template and save template as treeview_tpl.html. The autoload attribute is mandatory for the bellow example. Note attribute definitions without values as TreeView properties!

<div data-type="tree" 
     store="mytree" 
     imgpath="assets/tree/" 
     imgstatic="folderopen.png,folderclose.png" 
     arrows 
     lines 
     autoload 
     editable 
     draggable 
     expanded 
     checkboxes></div>

and the store method name

mytree(store) {
    store.fill = {
        url: 'mocks/cowboystree.json',
	response: 'json'
    }
}

The full code of second example:

import {ajvi} from 'ajvijsmvc/abstract.js'
import treeview_tpl from './../tpl/treeview_tpl.html'

export class treeview extends ajvi { 

	constructor() {
	    super({
		template: treeview_tpl
	    })	
        }

        mytree(store) {
            store.fill = {
                url: 'mocks/cowboystree.json',
	        response: 'json',
                events: {
                    loadend: e => {
                         // define this.mytree
                         this.mytree = store.domhub.tree
                         // register event methods
                         this.mytree.treeOnLoad = this.treeOnLoad
                         this.mytree.itemOnSelect = this.itemOnSelect
                         // and so on with all events you need
                         // use this.mytree.view to access TreeView DOM
                    }
                }
            }
        }

        treeOnLoad(store) {
            // do something onload
            console.log(this.mytree.getAllChecked())
        }

        itemOnSelect(id, store) {
            // do something with selected id or treeview store data
        }

}

import { treeview } from './treeview.js'

new treeview().init()

TreeView properties

Property name	Property type	Property description
name	string	TreeView name identifier
store	string	Model method name
cross	boolean	Show cross icon to expand/collapse tree
arrows	boolean	Show arrows icon to expand/collapse tree
lines	boolean	Show tree lines
expanded	boolean	Show tree expanded/collapsed
checkboxes	boolean	Show tree checkboxes
draggable	boolean	Make tree item draggable
editable	boolean	Make tree item editable on dblclick
imgpath	string	Relative path to tree icons
imgstatic	array object	Define tree icons ['folder_close', 'folder_open', 'icon/<span/<i]]
subCheck	boolean	Check group sub items when group is checked
hideLeafs	boolean	Hide leaf items
leafCheckboxes	boolean	Hide leaf checkboxes

TreeView events

Event name	Event parameters	Event description
treeOnLoad	treestore	Triggers when TreeView has loaded
itemOnClick	id, treestore	Triggers when TreeView item is clicked
itemOnSelect	id, treestore	Triggers when TreeView item is selected
itemOnCheck	id, state, childrens, treestore	Triggers when TreeView item is checked
itemOnOpen	id, treestore	Triggers when TreeView item expands
itemOnClose	id, treestore	Triggers when TreeView item collapses
itemOnDragStart	id, treestore	Triggers when TreeView item drag started
itemOnDragEnd	id, parentid, treestore	Triggers when treeView item dropped
itemOnChange	id, treestore	Triggers when TreeView item changes text when editable mode is true
context	id, treestore	Triggers when TreeView item is right clicked

TreeView methods

Method name	Method parameters	Method description	Returns
cloneTree	treeviewobject	Clone existing TreeView	void
setClonedEvents		Use events from cloned TreeView	void
sortTree	id, direction(ASC/DESC)	Sort TreeView	void
setFocus	id	Set TreeView item focus	void
setItemText	id, text	Set TreeView item text	void
getItemText	id	Get TreeView item text	string
setItemSelected	id, trigger	Set TreeView selected item	void
getSelectedId		Get TreeView selected item id	string
removeSelection		Remove TreeView selections	void
setItemChecked	id, state	Set TreeView item checked/unchecked	void
isChecked	id	Check if TreeView item is checked	boolean
getAllChecked		Get all TreeView items checked	array object
setAllChecked		Set all TreeView items checked	void
setAllUnchecked		Set all TreeView items unchecked	void
setItemStyle	id	Set TreeView item style	void
getItemStyle		Get TreeView item style	string
setItemAttribute	id, atrributename, attributevalue	Set TreeView item attribute	void
getItemAttribute	id, attributename	Get TreeView item attribute	string
setDataAttribute	id, atrributename, attributevalue	Set TreeView data layer item attribute	void
getDataAttribute	id, attributename	Get TreeView data layer item attribute	string
setItemIcon	id, icon	Set TreeView item icon	void
deleteItem	id	Delete TreeView item	void
itemExists	id	Check if TreeView item exists
getParentId	id	Get parent id of TreeView item	string
getLeafs		Get all TreView leaf items	array object
getParents		Get all TreeView items with childrens	array object
getChildrens	id	Get TreeView item childrens	array object
getParentLeafs		Get all TreeView parents item with no childrens	array object
hideLeafs		Hide all TreeView leaf items	void
isOpen	id	Check if TreeView item is open	boolean
expandItem	id/DOMelement	Expand TreeView item	void
collapseItem	id/DOMelement	Collapse TreeView item	void
expandAll		Expand all TreeView items	void
collapseAll		Collapse all TreeView items	void
getDataElement	id, datalayer	Get TreeView item from data layer	object literal
setItemPosition	elementobjectliteral, containerid, datalayer	Set TreeView item new position	void
insertChild	parentid, id, text, icon	Insert TreeView new item	void
insertChildInData	parentid, id, text, icon, datalayer	Insert TreeView new item in data layer	void
getXHRData		Get TreeView loaded data	object literal
getData		Get TreeView current data (modified data)	object literal