locked
Adding context menu for TreeView Child Nodes populated by client. RRS feed

  • Question

  • User-407677925 posted

    Hello,

    I have a working context menu for an asp:TreeView.

    I am using jquery for the context menu:

    $(document).ready(function() {
        $("#TreeViewDiv A").contextMenu({
    		menu: 'myMenu'
    	}, function(action, el, pos) {
    		alert(
    			'Action: ' + action + '\n\n' +
    			'Element text: ' + $(el).text() + '\n\n' + 
    			'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
    			'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
    		);
        });
    });

    HTML:

    <div id="TreeViewDiv">
          <asp:TreeView ID="TreeView1" runat="server"
                PopulateNodesFromClient="true"
                EnableClientScript="true"
                onselectednodechanged="TreeView1_SelectedNodeChanged"
                ontreenodepopulate="TreeView1_TreeNodePopulate">
          </asp:TreeView>
    </div>
    <ul id="myMenu" class="contextMenu">
    <li class="copy"><a href="#add">Add</a></li>
    <li class="edit"><a href="#edit">Edit</a></li>
    <li class="delete"><a href="#delete">Delete</a></li>
    <li class="quit separator"><a href="#cancel">Cancel</a></li>
    </ul>

    The problem is the context menu only shows for the root nodes in the treeview. When a node is expanded its children are populated by the server.

    As none of these child nodes are in the TreeViewDiv they still use the default context menu.

    I've looked around and have yet to find a solution.

    Does anyone know how I can bind the context menu to the newly created child nodes as well?

    Thanks & regards,

    Al

    Wednesday, September 11, 2019 12:01 PM

Answers

  • User665608656 posted

    Hi BestPalAl,

    Does anyone know how I can bind the context menu to the newly created child nodes as well?

    For your question, I tried to do it on the basis of the methods you gave me, but it didn't work.

    So I found another way to combine treeview with contextmenu,for more details, you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
        <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.nav.min.js"></script>
        <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
        <script type="text/javascript">
    $(document).ready(function() {
     var ctxMenu = new wijmo.input.Menu('#myMenu', {
      	itemClicked: function(s, e) {
      		alert('thanks for selecting ' + s.selectedValue);
    	  }
      })
      var theTree = new wijmo.nav.TreeView('#TreeViewDiv', { 
        displayMemberPath: 'header',
        childItemsPath: 'items'
    	});
      // attach context menu to tree
      theTree.hostElement.addEventListener('contextmenu', function(e) {
      	e.preventDefault();
      	ctxMenu.show(e);
      });
    
    });
    
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="TreeViewDiv">
                <asp:TreeView ID="TreeView1" runat="server"
                    PopulateNodesFromClient="true"
                    EnableClientScript="true"
                    OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"
                    OnTreeNodePopulate="TreeView1_TreeNodePopulate">
                </asp:TreeView>
            </div>
    
            <select id="myMenu" style="display: none">
                <option value="Add" class="copy" >Add</option>
                <option value="Edit" class="edit">Edit</option>
                <option value="Delete" class="delete">Delete</option>
                <option value="Cancel" class="quit separator">Cancel</option>
            </select>
        </form>
    </body>
    </html>
    

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 12, 2019 3:30 AM