Jquery tree show textbox as menu item and sub items

386 views
Skip to first unread message

Guhananth Sathiyaseelan

unread,
Jul 18, 2016, 1:03:23 PM7/18/16
to jsTree
Hi,

I want to create tree view with text boxes like this

Name -- label
   --- textBox1
   --TextBox2
   --- TextBox 3

Bike -- label
   --- textBox4
   --TextBox5
   --- TextBox 6

Also I need to on click of any node or subnodes a popup with option 1. Add node 2) Delete node

Also I need even for Add node and delete node

He is my code. At present I created label instead of textbox

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="Test.Demo" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="JS/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="JS/tree.jquery.js" type="text/javascript"></script>
    <link href="Css/jqtree.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var data = [
    {
        label: 'node1',
        children: [
            { label: 'child1' },
            { label: 'child2' }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];
    $(function () {

        // bind 'tree.click' event
        $('#tree1').bind(
    'tree.click',
    'tree.contextmenu',

    function (event) {
        // The clicked node is 'event.node'
        var node = event.node;

               alert(node.name);


        var $ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'text' }).addClass("text");
        $("#tree1").append($ctrl);


    }
);
        $('#tree1').tree({
            data: data,
            dragAndDrop: true

        });
    });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="tree1"></div>
   
    <div id="jqxMenu" style="visibility:hidden">
 <ul>
  <li>Add Item</li>
  <li>Remove Item</li>
 </ul>
</div>
 
 
    </form>
</body>
</html>




Reply all
Reply to author
Forward
0 new messages