Page 1 of 1

TreeView and events

Posted: Wed Aug 29, 2018 6:46 pm
by PrplPplEater
Can you give me a jquery example of how to use the custom events with your TreeView component, please?


Example:

I have a the following treeview:

Code: Select all

<ul data-role="treeview" id="folderBrowseList">
	<li class="Folder" data-collapsed="true" data-icon="<span class='mif-folder-open'>" data-caption="FolderName1">
	<li class="Folder" data-collapsed="true" data-icon="<span class='mif-folder-open'>" data-caption="FolderName2">
	<li class="Folder" data-collapsed="true" data-icon="<span class='mif-folder-open'>" data-caption="FolderName3">
</ul>
I'm trying to use the 'onNodeClick' event like this, but it is obviously incorrect as it isn't working (nothing happens when I click a node):

Code: Select all

$("#folderBrowseList").on("treeview:onNodeClick", function(node, tree){
	alert('node clicked');
});
Can someone give me some sample code on how to use the events, please?

Re: TreeView and events

Posted: Wed Aug 29, 2018 6:51 pm
by olton

Code: Select all

<ul data-role="treeview" id="folderBrowseList" data-on-node-click="alert('node clicked')">
...
</ul>
or

Code: Select all

<ul data-role="treeview" id="folderBrowseList" data-on-node-click="nodeClick">
...
</ul>

<script>
  function nodeClick(){
      alert('node clicked');
  }
</script>
Events system in Metro 4 Components Library
https://metroui.org.ua/events.html

Re: TreeView and events

Posted: Wed Aug 29, 2018 8:18 pm
by PrplPplEater
Thank you!

and, yeah, I feel silly for not trying that.

Most importantly, this solves my problem when clicking a node 'n' levels deep in a tree and having the click event bubble up through each level. With this, only the clicked node triggers, as desired.

Thanks, again!

Re: TreeView and events

Posted: Wed Aug 29, 2018 9:01 pm
by olton
You can use the parameters that are passed to the function:

Code: Select all

<ul data-role="treeview" id="folderBrowseList" data-on-node-click="nodeClick">
...
</ul>

<script>
  function nodeClick(node, treeview){
      console.log(node);
  }
</script>