Question

I’m using the DynaTree JavaScript tree and have been modifying it. Specifically I am trying to add multiple context menus dependent on the type of node.

Basically my idea was to have the context menu fire an ajax request to my MVC (2) controller, and it would pass this information as JSON, where it would be used to create a class that can be accessed in c#.

Ive got this working ok, after going through about 500 posts here! Now I need to modify the JS again in order to select an appropriate context menu dependant on type.

My list looks like

<div id="tree">
    <ul>

      <li id="'ID':1,'TYPE':1" title="Look: a tool tip!">item1 with key and tooltip</li>
      <li id="'ID':2,'TYPE':2" class="activate">item2: activated on init</li>
      <li id="'ID':3,'TYPE':3" class="folder">Folder with some children
        <ul>
          <li id="'ID':4,'TYPE':1">Sub-item 3.1</li>
          <li id="'ID':5,'TYPE':1">Sub-item 3.2</li>
        </ul>
      </li>
      <li id="'ID':6,'TYPE':1" class="expanded">Document with some children (expanded on init)
        <ul>
          <li id="'ID':7,'TYPE':1'">Sub-item 4.1</li>
          <li id="'ID':8,'TYPE':1'">Sub-item 4.2</li>
        </ul>
        </li>
      <li id="'ID':9,'TYPE':1" class="lazy folder">Lazy folder</li>
    </ul>
  </div>

And i return the ID and use jQuery.parseJSON to send to MVC.

The JS I dont understand is here:

function bindContextMenu(span) {
    // Add context menu to this node:
    debugger;

    $(span).contextMenu({ menu: "myMenu1" }, function (action, el, pos) {
      var node = $.ui.dynatree.getNode(el).toString();
      node = node.replace(/'/g, '\"');
      node = jQuery.parseJSON('{' + node + '}');

      $.ajax({
        type: "POST",
        url: "/TreeView/Click/",
        data: { ID: node.ID, TYPE: node.TYPE },
        error: function (request) { $("#message").html("error"); },
        success: function (result) { $("#message").html("Success - " + result); }
      })
    });
  };

this line – $(span).contextMenu({ menu: “myMenu1” }, function (action, el, pos) {

Seems to both set the contextmenu and also fires when a context menu is clicked. I’d be happy if someone could just provide some keywords for Google as i dont have a clue.

Thanks in advance

Answer 1

.contextMenu looks like a plugin, however without knowing exactly which plugin it is it is hard to give a definitive answer. However it looks like initialising that plugin takes 2 arguments:

1. The object containing any setup parameters – this is pretty standard for a plugin
2. The function which gets called when the menu is activated (possibly).