TreeView and events

General issues related to the use of Metro 4
Post Reply
PrplPplEater
Posts: 2
Joined: Wed Aug 29, 2018 6:38 pm
Status: Offline

TreeView and events

Post by PrplPplEater » Wed Aug 29, 2018 6:46 pm

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?

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

Post by olton » Wed Aug 29, 2018 6:51 pm

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

PrplPplEater
Posts: 2
Joined: Wed Aug 29, 2018 6:38 pm
Status: Offline

Post by PrplPplEater » Wed Aug 29, 2018 8:18 pm

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!

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

Post by olton » Wed Aug 29, 2018 9:01 pm

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>

Post Reply