<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master"
    AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="TreeView_Sample._Default" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.48"
    Namespace="C1.Web.Wijmo.Controls.C1TreeView"
    TagPrefix="wijmo" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <style>
        .info-table {
            margin-top: 20px;
            border-collapse: collapse;
            width: 100%;
        }

        .info-table td,
        .info-table th {
            border: 1px solid #ccc;
            padding: 8px;
            vertical-align: top;
        }

        .info-box {
            min-height: 120px;
            white-space: pre-wrap;
            font-family: Consolas;
        }
    </style>

    <script type="text/javascript">
        var c1node;
        function updateInfo(eventName, sender, args) {

            var currentNode = null;

            // current clicked node
            if (args && args.node) {
                currentNode = args.node;
            }

            // selected nodes
            var selectedNodes = sender.c1treeview('getSelectedNodes');

            //---------------------------------------------------------
            // ALL NODES
            //---------------------------------------------------------

            var allNodesText = [];

            function traverse(nodes) {

                if (!nodes) {
                    return;
                }

                for (var i = 0; i < nodes.length; i++) {

                    var node = nodes[i];
                    c1node = node;

                    allNodesText.push(node.options?.text ?? node.text);

                    if (node?.options?.nodes ?? node.nodes) {
                        traverse(node?.options?.nodes ?? node.nodes);
                    }
                }
            }

            if (sender) {
                traverse(sender.c1treeview('getNodes'));
            }

            document.getElementById("allNodes").innerHTML =
                allNodesText.join("<br/>");

            //---------------------------------------------------------
            // SELECTED NODES
            //---------------------------------------------------------

            var selectedText = [];

            for (var i = 0; i < selectedNodes.length; i++) {

                var node = selectedNodes[i];

                selectedText.push(
                    "Text: " + node.options.text
                );
            }

            document.getElementById("selectedNodes").innerHTML =
                selectedText.length > 0
                    ? selectedText.join("<br/><br/>")
                    : "No selected node";

            //---------------------------------------------------------
            // CURRENT NODE
            //---------------------------------------------------------

            if (currentNode) {

                var currentInfo =
                    "Event: " + eventName + "<br/><br/>" +
                    "Current Node Text: " + currentNode.options.text + "<br/>" +
                    "Current Node Value: " +
                    (
                        currentNode.options.value ||
                        "(no value assigned)"
                    );

                document.getElementById("currentNode").innerHTML = currentInfo;
            }
        }

        //---------------------------------------------------------
        // TREE EVENTS
        //---------------------------------------------------------

        function onNodeClick(ev, node) {
            updateInfo("Node Clicked", $(`#${ev.target.id}`), { node: node });
        }

        function onNodeCheck(ev, node) {
            updateInfo("Node Checked", $(`#${ev.target.id}`), { node: node });
        }

        function onNodeExpand(ev, node) {
            updateInfo("Node Expanded", $(`#${ev.target.id}`), { node: node });
        }

        function onNodeCollapse(ev, node) {
            updateInfo("Node Collapsed", $(`#${ev.target.id}`), { node: node });
        }

    </script>

    <wijmo:C1TreeView ID="C1TreeView1"
        runat="server"
        OnClientNodeClick="onNodeClick"
        OnClientNodeCheckChanged="onNodeCheck"
        OnClientNodeExpanded="onNodeExpand"
        OnClientNodeCollapsed="onNodeCollapse" 
        ShowCheckBoxes="true">

        <Nodes>
            <wijmo:C1TreeViewNode Text="Node1" Value="Value1" />
            <wijmo:C1TreeViewNode Text="Node2" Value="Value2" />
            <wijmo:C1TreeViewNode Text="Node3" Value="Value3">
                <Nodes>
                    <wijmo:C1TreeViewNode Text="Node3.1" Value="Value3.1" />
                    <wijmo:C1TreeViewNode Text="Node3.2" Value="Value3.2">
                        <Nodes>
                            <wijmo:C1TreeViewNode Text="Node3.2.1" Value="Value3.2.1" />
                        </Nodes>
                    </wijmo:C1TreeViewNode>
                    <wijmo:C1TreeViewNode Text="Node3.3" Value="Value3.3" />
                </Nodes>
            </wijmo:C1TreeViewNode>
        </Nodes>

    </wijmo:C1TreeView>

    <table class="info-table">

        <tr>
            <th>All Nodes</th>
            <th>Selected Nodes</th>
            <th>Current Node</th>
        </tr>

        <tr>

            <td style="width:33%;">
                <div id="allNodes" class="info-box"></div>
            </td>

            <td style="width:33%;">
                <div id="selectedNodes" class="info-box"></div>
            </td>

            <td style="width:33%;">
                <div id="currentNode" class="info-box"></div>
            </td>

        </tr>

    </table>

</asp:Content>