I'm trying to display hierarchical data and figured that the best way to do so would be a custom treeview element, but I cannot for the life of me get it to run.
There are plenty of examples in various mm5 js files, but they are all rather lengthy and involved, usually spanning several files and workflows, so I'm having trouble cutting trough the noise to figure out how basic functionality looks like.
From the other examples I found it looks like the basic idea is to write a custom class that inherits from the Treeview class:
Code: Select all
requirejs('controls/treeview');
/**
UI folder tree element for selection of folders.
@class FolderTree
@constructor
@extends TreeView
*/
inheritClass('CustomNodeTree', TreeView, {
initialize: function (rootelem, params) {
CustomNodeTree.$super.initialize.apply(this, arguments);
}
},{ }
)
Code: Select all
<div data-id="nodeTree" class="fill" data-control-class="CustomNodeTree"></div>
And this is the part where I am running with my head against the wall for the last couple of hours. My idea was to create a simple data structure, bind it to the datasource of the new class and be done with it, but something is not working. Either my treeview displays nothing or just outright throws an exception, so I assume that either my datasource is too simplistic or I'm just doing something wrong.
I have simple object that looks like this:
Code: Select all
console.log(customNodes)
(2) [{…}, {…}]
0:
ParentNode: "root"
cnmID: "cnmNode0"
description: "New Second note"
hasChildren: false
id: "cnmNode0"
title: "SecondNote"
viewAs: ["nodeList"]
__proto__: Object
1:
ParentNode: "root"
cnmID: "cnmNode1"
description: "New third note"
getTracklist: ƒ ()
hasChildren: false
id: "cnmNode1"
title: "Third note"
viewAs: (3) ["simpleTracklist", "tracklist", "albumlist"]
__proto__: Object
length: 2
So I went ahead and naively added both items directly to the datasource in the initialize function, hoping that magic would happen somewhere in the background:
Code: Select all
this.dataSource.root.addChild(customNodes[0],'cnmNode')
this.dataSource.root.addChild(customNodes[0],'cnmNode')
Code: Select all
nodeHandlers.cnmNode = inheritNodeHandler('cnmNode', 'Base', {...})
I also tried to add other child object types and indirectly binding a elements by creating a new tree with app.createTree, adding elements there and then binding the tree to the datasource property of the class. None of which seems to do anything.
Any pointers on what I'm doing wrong, or is there a simple example on how a basic (working) treeview structure looks like?