Creating a treeview object

[TIV73]

Hi there,
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);
		}
	},{	}
)

This class is added to an UI element via the data-control-class property:

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')

The cnmNode class is defined separately as

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?

[PetrCBR]

You don't need to create app.createTree() dataSource for TreeView object as it's created empty dataSource by default. Did you tried to create your CustomTreeView with parameter expandRoot ?

Code: Select all

<div data-id="nodeTree" class="fill" data-control-class="CustomNodeTree" data-init-params="{expandRoot: true}"></div>

Or you can expand root node programatically

Code: Select all

this.expandNode(this.root);

Also i think you need to set root node handler

Code: Select all

this.root.handlerID = 'cnmNode';

[TIV73]

That was spot on. After implementing the suggestions, the exceptions that were thrown were specific enough to let me figure out what was wrong with the data structure I provided. Lo and behold my very own treeview



I didn't, technically spearking, want to display a folder structure of my local filesystem, but the treeview object tried to call getChildren on the nodes I added to it, and the getChildren function of my own class didn't work, so I borrowed one from a random other class and ended up with this.
What's important is that I have a working example that I can now customise. Thanks a lot for the pointers!

[Ludek]

You can also use

Code: Select all

<div data-control-class="CustomNodeTree" data-init-params="{rootNode: 'cnmNode'}"></div>

to define 'cnmNode' as the root node handler of your tree.

Mostly, you don't even need to define an own class like "CustomNodeTree" class , you can use existing 'CheckboxTree', 'FolderTree', 'TreeView' (based on purpose).

[TIV73]

That's neat, I thought you were supposed to create a new class. Thanks for the hint!

[Ludek]

Also, if you want to display a folder structure of your local filesystem then you don't even need to define own node handler, but use existing, I guess this should work:

Code: Select all

 <div data-control-class="TreeView" data-init-params="{rootNode: 'localComputer'}"></div> 

See viewHanlders.js to see available node handlers in the nodeHandlers structure.
You can also inherit the handler and modify it like this:

Code: Select all

nodeHandlers.myLocalComputer = inheritNodeHandler('MyLocalComputer', 'LocalComputer', {
	// override anything here
});