I have a simple Backbone app that handles hierarchical items. The model (so far) is simple, it's supposed to contain only three attributes besides the ID: content, order, and parent_id. This last one attribute should contain the reference to it's parent model instance, or null if it's a root level item. The order attribute would be used to sort the items at the same level of the tree, and I want to implement some drag&drop functionality to manually sort the items.
The server side JSON already have the items sorted in tree order, but I'm not sure how to handle this in the views. Currently, what I'm doing in the item's view is adding a left padding to the $element to indicate some "indentation", but essentially it's still a flat list of items. That's why I'm not sure on how to implement the drag&drop sorting, preventing items to be dropped out of range (like above it's parent item)
How can I cleanly solve this model rendering using BackboneJS?
It isn't "pure" Backbone (it uses Marionette.js), but this post should be of interest for anyone looking into a similar issue: http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
Related
Say I have five ranks, and different data points about each rank (salary, number, average, etc.). I build a collection of models, one model for each rank.
Then I have a Rank view and an App view - rendering down five Rank views inside my App view. I also need to put a d3 chart inside each one of those rank views.
SO far, no problems. But then I choose a button, update my collection with new data, and I have to re-render each Rank view to display the new data in my collection, correct? Re-rendering the data would rebuild the d3 chart each time, which I don't want to do, because I want the chart to have transitions.
Can anyone give me a little guidance? Not code necessarily, just possible solutions?
You can simply update values and re-animate them at will. There's no need to fully destroy the object and create a new one, though that's a shortcut you see taken often because it is scary simple....but it also introduces display issues at the same time.
Here's a simple example of changing values of a table and re-animating instead of destroying and making new: D3 redraw example You obviously get your data very differently via Backbone models, but the concepts are the same.
I have a similar pattern as you in my lighting control app, and I really have grown fond of using a grid to render the collection, with links to open each of the individual views, whether via a link to a new page (my preferred method) or a modal (the bosses' favorite method) My current grid of choice is Backgrid.js which is tied directly to the collection and therefore requires no work at all to update on model change.
I'm getting used to d3, but seem to be having trouble with more advanced structures. I'm fairly sure there's some subtlety or concept I am not fully appreciating. I want to be able to mirror a changing hierarchical data structure with a changing hierarchical element structure.
My data structure is 3 groups, each with 3 items. Each group and item has a unique key, extracted using a key function in the data() call.
I build the structure, and I can remove a top-level item; .exit().remove() works just fine on that selection. BUT, modifying or removing any sub-item is simply not reflected in the generated element structure.
Full (non-)working jsFiddle here!: http://jsfiddle.net/eu95R/2/, and the all-important enticingly beautiful screenshot:
The problem is that your definition of groups is using svg.enter() and the subselection is made on groups. That is, you're not seeing a change because groups in this case is empty (no enter selection for the SVGs) and therefore there's no subselection.
To fix, simply do the subselection based on e.g. svg (there are a number of ways to fix this -- not saying that this is necessarily the best one). As you are appending the elements to a g within the SVG, the selector would be svg.selectAll("g").selectAll("text.item")....
Complete demo here.
I'm creating a simple task manager where tasks are regrouped by steps. Therefore, many steps can have many tasks. Currently, I have my angularJS model mapped properly. What I want to do right now is to be able to reorder the divs representing the steps.
For example, if I have three steps named 1,3,2 I want to be able to drag the step 2 and move it above step 3 therefore putting them in the order 1,2,3. To do so, I would have to modify my angularJs model accordingly.
What I have currently, is that the ui is responding, I can see the step changing positions, but my the array containing all the steps stays in the same order... Is there a way to reorder this array or at least a way to get the new position of the step ?
http://plnkr.co/edit/bjsgQz?p=preview
You may want to consider using ui-sortable; I've used it on one of my own projects for allowing drag-and-drop reordering, and it's worked rather well. I should point out that it does have a dependency on JQuery/JQueryUI (for the sortable widget), but it was worth it for us.
Can an ASP.NET TreeView, when you click the + sign be made to expand upwards instead of downwards? So that "Children" nodes appear above their "Parents."
Essentially I want to logically be taking what would normally be a singular leaf node, making it the root of my tree, and making what is logically it's Parent into a Child Node on my Tree, but have that Child Node still display above the Parent when the Parent gets expanded.
Think a company OrgChart, but starting with the employee (leaf node) and going up.
I can't seem to find anything specifying direction on MSDN. I would like to avoid having to re-write how the Javascript of the TreeView works, but would be open to it if no other way is possible.
No, you cannot do that with the TreeView component.
Attempting to do that would involve inheriting from the TreeView and writing your custom Render function.
There is a simpler approach to it though. You could write out all your data to a json object, and use one of the numerous javascript data visualization libraries to present it.
I really like the javascript InfoVis toolkit. You can make very detailed graphs using it.
First of all, I am novice in ExtJS
I am working on Ext 4 Tree since few days.
The requirement is such that I want to display 3-4 representation of same tree at the same time. I want to do this using single data store.
Tree 1 will show all nodes without checkboxes
Tree 2 will show all nodes with checkboxes
Tree 3 will show only parent nodes (folders) and no leaf nodes (files)
I tried to do these using same data store but expanding/collapsing of one tree results into inconsistently expanding/collapsing of other. Also for checkbox, I have to denibe "checkbox: true/false" in data store which I have no idea how to control in Ext.
Please help me. It will be much help if there already an example around.
The main issue here is - you have just one copy of the store and all your trees are subscribed to this store events, so when something is fired by the store all trees react to that. And btw, same applies if you want for example to show couple different grids using same store.
If you need to have different behavior for each control you need to either constantly subscribe/unsubscribe from store events in each tree (depend on which one is focused right now) or more simple solution - to clone store and have individual copy for each tree.