Currently I'm trying to figure out if it's possible to attach the default contextmenu jstree uses, to a foreign node ?
To explain my scenario please go to this link and go to the bottom of the page. In the first demo you can drag'n'drop a foreign node (being "I have the jstree-draggable class") to the folders in jstree.
I'm trying to understand if it's possible to attach the jstree contextmenu plugin to that foreign node?
Yeah it's possible to attach contextmenu to foreign nodes in jstree.
You should keep in mind, though, you'll need to rewrite a lot of code if you're using different html from what you have in the tree.
In my case this was not acceptable because I had to rewrite more than half of the library so I could get it to work with my html structure.
Creating a separate context menu (as #Jed suggested) is also an option - if you have the time to deal with all the problems that will come. :)
Related
I am working on a Web-App where users should be enabled to enter a lot of tabular data in the most convenient way possible.
Therefore I started of with a standard HTML-Table and began applying adding CSS properties and JS functions to it. So for so good. People will be able to drag around cells and duplicate rows on the fly. The latter is causing quite some issues because e.g. date fields that have a jQuery-UI Datepicker Widget enabled will mess up the functions once cloned.
I thought about adding a Pseudo-CSS Class to the cells that have JS associated with to destroy the Plugin-Instances on them and Re-Instantiate the JS upon completion. This brings me to my question:
Is there a way using JS to walk through the DOM-Tree and detect every Instance of any kind of JS-Code/-Plugin (maybe by its Namespace?) so I could attach the mentioned Pseudo-Class to that certain Table-Cell?
Thanks a lot,
Tobias
I'm currently running with kendo v2012.3.1315 and I am trying to edit a specific node in a tree view without a full tree view update.
I would like to be able to edit the name and have it reflect on the tree and any access to dataitem. Right now, I have been able to just overwrite the html but a) this could change due to template changes and b) when i access the dataitem later, it still has the old text.
The reasoning for this desired functionality is two fold: performance and consistent user interface.
Does anyone know if this is possible?
Thanks.
Find the element in the tree and update its .html() to the same value it would have if you would redraw the tree.
I'm starting to learn Backbone.js and can't figure out one thing: In a typical rails app, I have a layout view and a nested view. My layout usually contains navigation links that are processed by rails routing.
How do I do the same with Backbone? I'm using Rails 3.2 and eco templates.
Should I create nested templates in eco?
Should my navigation links be plain html links with a href or should the navigation be event driven?
For example I have a list of categories on the left, and a category items on the right. I want my categories to be shown on every view and the corresponding category items (with a URL in browser corresponding to selected category) too.
Please point me to right direction, because most tutorials on the Web are 'todo' style applications with no navigation at all.
Thank you.
UPDATE
Turns out, my question wasn't clear, so let me narrow it down.
How can the concept of RoR layouts be applied to backbone.js applications?
And I'm curious about two possible ways of navigation:
create
%a{:class => "customers", :href => "#customers"} Customers
handle ".customers click" event in my view
Which way is better?
And I'm curious about two possible ways of navigation:
create %a{:class => "customers", :href => "#customers"} Customers
handle ".customers click" event in my view
Which way is better?
neither is better until you know the specific context in which you are working. they are simply options for achieving your goal and desired functionality.
there are times when both should be used, as well. for example, if you are supporting search engine optimizations and accessibility.
Here are some better questions to ask:
Which of these will be the simplest thing that can get the job done? will it be more code to write the route handler, or the click handler?
Will the route handler tightly couple the functionality to a router, when I don't need that?
Do I really need a route for this link, so that people can bookmark it and come back to it directly?
Will a click handler cause my code to jump through several hoops of calling other objects that aren't directly related, or can I use a simple event to cause the other objects to run?
There isn't a single correct answer to any of these questions. I recommend trying many different ideas when you can. Keep in mind that you will likely change your answer as you develop new features. The answer that you want, today, won't be what you need tomorrow. But that shouldn't stop you from picking an answer now and moving on. Pick one, put it in place, and when you need to change it, change it.
Here's the task at hand. I need to implement a fully client-side tree that will work finely with permalinks and back/forward buttons for navigation.
E.g. I open a page with such tree control, expand some nodes, then press back and it collapses the last expanded node, then press forward and it expands the subject node. Finally I copy the url of the page and send it to my colleague - she clicks the url and the tree gets its nodes open to reveal the same tree structure that I see on my screen.
I'm looking for a JavaScript tree control that would fit the following list of requirements:
(Mandatory) Support for asynchronous node retrieval.
Possibility to hook into expand/collapse events to invoke custom logic that will serialize tree state into url anchor.
API for programmatic expanding/collapsing of given nodes, so that I don't have to emulate clicks when deserializing tree state upon pageload.
I've already had some experience with jsTree and jQuery treeview.
The problem with jsTree is that it uses <a> tags to render nodes, which messes up url anchors on click. After a couple of hours I've managed to migrate it to <span>'s, though my solution works only in Firefox. Not as good as I'd like.
Another thing happened when I tinkered with jQuery treeView. At first I was embarassed by its "not in active development" status, though upon a second glance it appeared to be a simple yet powerful widget. The async demo looked excellent so I tried to reproduce it at my PC and with my data. But then I faced a weird bug - when my JSON service returned lazy nodes (i.e. ones that had hasChildren set to true), the treeview immediately expanded those and rendered the "loading" gif, though without loading anything. I tried to debug this glitch, but I'm really not that smart to understand how all those callbacks and aspects interact with each other. At least not within the time window I had.
I use jquery tree plugin to render hierarchical data.
I have coded additional functions which would allow user to interact with this data (like adding/deleting nodes, swapping nodes, etc...)
Currently this plugin supports that whenever you want to add any node, you can call following method,
$("#browser").treeview({
add: branches
});
here branches is jQuery object created with the HTML block, which would represent a particular node.
However, for delete and swapping of nodes, I use common JQuery functions like,
for delete,
$("#topnd2").remove();
for swapping,
var next = $("#topnd2").next();
$("#topnd2").insertAfter(next);
topnd2 is an id of any particular tree node.
The nodes get deleted / swapped properly but the problem is the tree does not get rendered and therefore the tree images (mainly vertical lines denoting branches) are not set properly.
For example, if I delete the last node then that node will be removed from rendered treeview but the remaining sibling node should get L as branch line image but not | .
I tried calling
$("#browser").treeview();
Please let me know your ideas.
Thanks,
Jatan
I found some workaround as given below,
Once the node is swapped up, virtually add its previous node to its child,
$("#browser").treeview({add:$("#topnd2").insertBefore(previous).next()});
If node is swapped down, virtuall add the current node to its next node.
$("#browser").treeview({add:$("#topnd2").insertAfter(next)});
currently it's working fine, will update this post, if I find any problems in this approach. Also please validate this approach if you know.
Regards,
Jatan
If you try to refresh the treeview again after node removal, the link will work but not the [+] or [-] icon. Tried this on several browsers..