So all I was missing was the CSS styles! Nice.

Is there a way to get the dotted lines between nodes to cover the new multi-line distance? Right now I get the first line with dots, and the rest is blank down to the next node line.

Yes it does, and what is that way, please?

As you know, I am already calling that update method. And I see it works, in that the formatter is called for that node and it draws all the details of the selected node. The problem is that the rest of the tree does not adapt to the multi-line node, instead it overwrites the display. [See attached screenshot]

As you can see from my previous comment, I also tried refreshing every node in the tree individually. That also called the formatter for every node, but the overlay problem still exists.

I tried your code to reload data, but...
It calls the formatter for each node, but it has already wiped out the selected node so nothing gets displayed but summary information.

I want to keep my selections, and the formatter() knows to handle selected nodes differently.

In what way should I define the formatter() so it can draw the node without overlap?

I also have tried this:

Code:

onSelect           : function (node) {
  // update all nodes
  $("#prereqTree .tree-node").each(function (i, el) {
    console.log("element", i, el);
    $("#prereqTree").tree('update', {
      target: el,
      iconCls: "" // null-op to force re-formatting
    });
  });
}

But it made no difference. I still get the overlap as the lower down items over-write the upper ones.

Another thing that would be kind of helpful: some way to prevent certain nodes from being dragged.

For example, I just dragged my root node to the other tree and lost the source tree. I'd like to be able to say that node cannot be moved at all.

That's what I'm doing now, but it is flawed for two reasons:
1) it winds up overlaying any nodes below it (and the effect seems to be cumulative, so it can become a big black blob after clicking a few nodes)
2) it has to be done on all the nodes in order to make sure each one is re-drawn, especially the previously selected node

A third thing that is worth mentioning:
3) I don't actually want to change the text, as the formatter takes care of deciding what to display. I get around this by reassigning the old text just to give update() something to do.

So is there something that will re-draw the whole tree, but not reload the data? It should preserve any selections and other user changes, just re-call the formatter.

In my tree, I want all the nodes to show a summary by default.

When a node is selected, I want it to be re-formatted to show all its details.

When a new node is selected, I want only the new selection to show its details, and the previous selection to go back to a summary.

I have formatter(), onSelect, and onBeforeSelect() functions defined, but can't figure out how to handle "de-selecting" and refreshing display.

What would be especially nice is a "refresh" or "reformat" method that acts upon the whole tree without reloading data.

In this question, the final suggestion was to find an individual node and prevent it from accepting drops.

Is that still the only way to do this? I would like to prevent any leaf nodes (existing and future) from being dropped on. Is there a property to set for this when we create the table?

[edit]

Additionally, it would be nice if we could catch an attempt to drop a tree node onto a leaf and instead insert it as a sibling.

I realize the two ideas may be mutually incompatible, so they could be separate ideas. In other words, maybe we could choose one of the following:

• convert leaf to node when child dropped on it (default behavior)
• make leafs "leaf only" and reject attempts to drop nodes on them
• make leafs "leaf only" and interpret drop attempts as requests to "insert above" or "insert below"

So that essentially says:

• inspect intended drop events before they happen
• if they are from the template source
  
  • manually insert/append a copy of the template
  • "reject" the drop so the template returns to its tree
• else if the source is from the current tree, let the normal process take care of moving existing nodes of the tree around

Works fine, thanks!

It would be nice if we could use a source other than another tree, but this will definitely work for what I am doing now.

Using jQuery EasyUI 1.4, so I don't know if this has been changed, but I cannot find a way to do this.

I have a tree (not treegrid) with items that have been customized. I can drag and drop those items to new locations in the same tree, which is good. I want to keep this functionality.

I also have another widget on the same page that has a list of "template" items (they have not been customized). I want to drag those over to the tree and drop them in the right place, and then either reject the drag for business reasons OR have a popup where I can customize the item before it is properly inserted into the tree at the desired location.

This is the part I could not figure out.

At first I made all the template items draggable, but the tree would simply ignore them in its onDrop method. I got around this by putting the template items in another tree, and the destination tree now happily puts them where I dragged them.

The new problem is that it removes the template item from the source tree! I never want the original template item to be removed from its tree, just a copy added to the new tree, but the tree widget does not allow me to set the revert/clone option.

What can I do?

I noticed another topic ended with the same question here, but it was never answered.

That's what I was looking for. Thanks again!

Thanks for the patch. I assume all I have to do is load it right after I load the standard library.

As far as being a bug, I assumed that unreachable code was supposed to be reachable. Upon looking again, I see it is just a copy of what was in the parseD() function, so it just needed to be removed. I can live with that being 'just a warning', then. ;-)

May I ask if this was related to the timespinner parser function? Because the code I have (1.4.3) still has this bug in it.

Specifically, in jquery.timespinner.js line 206, there is an IF statement after the return.

After much adjusting, I managed to get that to work for my data. THANKS!

However, that seems to be changing how ALL datagrids will work. Isn't there a way to change individual datagrids?

I'd rather only customize on a case-by-case basis, and I may want standard datagrids on the same page as customized ones.

We do a lot of REST-like APIs, using all the different verbs: GET, POST, PUT, DELETE.
We also customize the requests for each API, adding headers, changing content-type, xhrFields, whether to send cross domain or not, choosing async/sync.

Every example I have seen of remote data sources assumes completely unsafe POST/GET type URLs to resources. Is this really the only way to have jQuery EasyUI automatically handle APIs?

Also, are you ever planning to replace the deprecated success() & error() callbacks with the new done() & fail() handler methods?