Treeview event not working metro 4

[Gurucharan]

The below code is for metro 3 and working fine. Not working in metro 4 because of backward compatibility issues. Please guide me to work with treeview in metro 4.

html.txt

Javascript

bankingQ.events.on(document, 'treeNodeToggled', 'contextItem', function (e, expanded) {

        if (event.target.parent != ".node") {
            var targetNode = event.target.offsetParent;
            var customerId = $(targetNode).attr('customerId');
            var customerType = $(targetNode).attr('customerType');
        }
        else {
            var targetNode = event.target.parentNode;
            var customerId = $(targetNode).attr('customerId');
            var customerType = $(targetNode).attr('customerType');
        }

        if (expanded) {
            $(targetNode).removeClass('collapsed');

            if (customerType == 2) {
                getServicesForCustomer(targetNode, customerId);
            }
            else if (customerType == 3)
                getClientsForCustomer(targetNode, customerId, false);

            event.stopPropagation();
        }
        else
            $(targetNode).addClass('collapsed');
    }, null, true);

[olton]

create pen on codepen.io with your problem code

[Gurucharan]

Please provide the link i am new to frontend developing

[olton]

codepen.io

[olton]

Metro 4 template pen
https://codepen.io/olton/pen/WKGarN

[Gurucharan]

the above link provides a nice online compiler environment. but where to find the solution for my problem.
in my previous code metro 3 tree used .lead.active to find the active node. but how to implement the same functionality in metro 4.
metro 4 documentation provided only the html codes.
kindly help me in this issue.

[Gurucharan]

Can you provide a simple treeview example tutorials in metro 4

[olton]

https://metroui.org.ua/treeview.html

[Gurucharan]

TreeViewHTML.txt

Yes, I have executed the code provided in the link you have been provided above. but the result is not fine. please refer the image attached with the comment.
pls help me on this issue.

[olton]

https://metroui.org.ua/intro.html

Jquery required

[Gurucharan]

Ok i tried. But the issue does not solved.

added

<script src="Scripts/jquery-3.3.1.min.js"></script>

[olton]

https://codepen.io/olton/pen/GBNeGo

code from your file

[Gurucharan]

Thank you. i placed the javascript ref first and then metro ref in the next line. it works!

[Gurucharan]

How to call data-on-node-click in metro 4. some code example for js function

[olton]

Please read the doc on https://metroui.org.ua

For events: https://metroui.org.ua/events.html

[Gurucharan]

Thank you I have referred the above links and implemented
data-on-node-click

how to get the which node has been clicked from the js function.

As i am new to metro and javascript there are less sources available on the net for metro. so it is little to harder for me to get things done.

[olton]

arguments[0] - node, arguments[1] - treeview
<ul data-role="treeview" data-on-node-click="console.log(arguments)">
or
<ul data-role="treeview" data-on-node-click="myNodeClick">

function myNodeClick(node, tree) {
    console.log(node);
    console.log(tree);
}

[Gurucharan]

Thank You