TreeView Events

Get help with using Metro 4 components
Post Reply
paloky
Posts: 4
Joined: Sun Sep 15, 2019 7:49 pm
Status: Offline

TreeView Events

Post by paloky » Sun Sep 15, 2019 7:56 pm

Hi.
I try to use a TreeView component, but I don't be able to program the events.

I use the next simple code:
But I don's fire any event...
Can help me.....


<ul data-role="treeview">
<li class="expanded" data-caption="Checkboxes">
<ul>
<li><input type="checkbox" data-role="checkbox" data-on-node-click="dataChange2" data-caption="Play animation"></li>
<li><input type="checkbox" data-role="checkbox" data-on-check-click="dataChange" data-caption="Play sound" checked></li>
<li><input type="checkbox" data-role="checkbox" data-on-node-dblclick="dataChange3" data-caption="Disabled" ></li>
<li><input type="checkbox" data-role="checkbox" data-on-check-click="dataChange" data-caption="Disabled checked" checked></li>
</ul>
</li>
</ul>


<script>
function dataChange(estado, valor, nodo, arbol)
{
console.log(arguments);
alert("I am an alert box 1!");
}
function dataChange2(nodo, arbol)
{
console.log(arguments);
alert("I am an alert box 2!");
}
function dataChange3(nodo, arbol)
{
console.log(arguments);
alert("I am an alert box 3!");
}
</script>

User avatar
olton
Site Admin
Posts: 238
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sun Sep 15, 2019 8:39 pm

Code: Select all

<ul data-role="treeview" data-on-node-click="nodeClick" data-on-check-click="checkClick">
    <li>...</li>
</ul>

<script>
function nodeClick(node){
...
}

function checkClick(checked, check, node){
...
}
</script>


paloky
Posts: 4
Joined: Sun Sep 15, 2019 7:49 pm
Status: Offline

Post by paloky » Sun Sep 15, 2019 9:28 pm

Thank's a lot Olton.
I putted the events in child nodes, not in TreeView root.

Now works fine.

paloky
Posts: 4
Joined: Sun Sep 15, 2019 7:49 pm
Status: Offline

Post by paloky » Mon Sep 16, 2019 2:01 pm

Hi Olton.
I have another question.

How can I get the tree structure of a clicked node?

Example:
Node_root
|--> Child1
| |--> Child1.1
| | |--> Child1.1.1 (This is the Clicked node)
|--> Child2
|--> Child3

Thank's a lot.

paloky
Posts: 4
Joined: Sun Sep 15, 2019 7:49 pm
Status: Offline

Post by paloky » Mon Sep 16, 2019 5:52 pm

Hi again.
Finally, I've found a way to do the search.
I'm new with JavaScript ...

I put the code in case anyone finds themselves in the same situation.

Code: Select all

function onTreeViewClick(node, treeview)
{
	console.log(node);

    	// Get copy of node
	var $node = node;	
	while ($node.dataset.caption!=null) 
	{
		// Get node Caption 
		console.log($node.dataset.caption);

		// Get the next parent
		$node = $node.parentNode.parentElement;
	}
}

Post Reply