I am looking at the angular treeview (https://github.com/eu81273/angular.treeview)
How to show/hide the children in the tree?Or do I just need to bind to a different model?
It looks like each node can have a boolean property called collapsed that determines whether or not its children are shown.
For example, you can collapse the second child node of the root node like this...
treeList[0].children[1].collapsed = false;
Fiddle (simplified version of one of their samples)
Related
Is it possible to incorporate tri-state checkbox in a ExtJs check tree?
By tri-state, I mean the parent node is:
Checked if all children are checked
Unchecked if all children are unchecked
Grey/Filled if some children are checked but not all
Something like this:
http://shamsmi.blogspot.fr/2008/12/tri-state-checkbox-using-javascript.html
I found this to create tri-state checkbox for regular forms:
http://www.sencha.com/forum/showthread.php?138664-Ext.ux.form.TriCheckbox&p=619810
But I don't know how to apply this custom checkbox to the tree view, or even if it possible.
Any idea?
expand/collapse icon is not shown after adding the child node to tree panel in extjs.
here i have a scenario where i get only immediate childrens of the node. on getting the immediate childrens i want to add those to the selected node.
i can add the child nodes but the expand/collapse icon does not come up after adding the node.
following is my code.
onItemExpand : function(nodeinterface,eOpts)
{
if(!nodeinterface.hasChildNodes())
{
nodeinterface.appendChild(dataFromES[0]);
}
}
here the data contains the property leaf:false so that it can have more childs.
any help is really appreciated.
Thanks
Set the parent node (in your case the nodeinterface variable) "leaf" property to false before you append a new child.
if(!nodeinterface.hasChildNodes())
{
nodeinterface.set('leaf', false);
nodeinterface.appendChild(dataFromES[0]);
}
I've experienced the same problem and in my case the problem was related with the lack of the id property in the nodes.
I've added a random id when creating the nodes to append and then the expand/collapse icon is properly shown.
Alex
I have two treepanels which I want to drag and drop between. I understand there is a plugin for this, however I want it to behave a certain way.
In my treepanels, I am showing the root node of the tree, and then all its children. The default DD allows the user to drop items at different levels on the tree(i.e. sibling of root, child of root) where I want all items to be a child of root for consistency. How can I make it so that any drag into the treepanel associates the item as a child of the root and not a sibling of the root.
Why:
For a user who doesn't understand how this functionality works, one millimeter in either direction can change the item from being a sibling to child or vice versa.
Also, I would like it so I can only drag away those children and the root can't be moved, if at all possible.
Yes it is possible. You can listen to the 'beforedrop' event on the target Tree panel's tree view and achieve what you want. Something like this
http://jsfiddle.net/EYtnk/1/ ..
One of the arguments of the beforedrop event is the node being dragged. You can check if it is a root node of source tree and just 'return false;'
P.S: In the example, i just used the same store for both the trees.. so the nodes get added on either side.
I am using a Telerik RadTreeView control to build a tree with nodes containing checkboxes.
The default behavior for this control is that if you check a parent node, all of the child nodes within it will also become checked. Is there any way to change this behavior? I want to be able to check a parent node on or off and not have it affect the children.
Thanks
I would try doing some magic when the PreviewChecked event happens. I'm not sure, but maybe you can use it to detect a checkbox is about to become checked, and prevent this from happening if it is not the checkbox the user actually clicked in.
You could also do some stuff in javascript like this
function checkNode()
{
var selectedNode = treeView.get_selectedNode();
if (!selectedNode)
{
alert("You need to select a node first.");
return false;
}
selectedNode.set_checked(!selectedNode.get_checked());
return false;
}
This is straight from telerik but simply loop through all the children nodes and turn them back off (or back on when you click it off). The problem is if you want to maintain the state of the children nodes regardless of the parent. Then you need to hold that info in some variable.
The other option is if you don;t want the children to even have checkboxes, then simply don;t make those nodes "Checkable" in the server side code. (I'm sure there is a way in the client side too)
My Form Panels need to be rendered based on a selection in an XML tree structure. However, my form panel for a specific node is only rendered the first time. When I change the selection to something else and return to the original selection, the form panel is not re-rendered.
It was rendering correctly based on the selection before when I had a simple Ext.Template and I did
var temp = Ext.getCmp('details-panel').body;
and then
(Ext.Template's name).overwrite(temp, node.attributes).
When I changed this overwrite line to
(Form Panel's name).render(temp), it only works the first time.
Any idea what I am missing? Thanks!
A component will only render once in ExtJS, after this you need to make use of doLayout() after adding and removing child components.
formPanel.doLayout();
I'm not sure I quite understand. I basically have
tp.getSelectionModel().on('selectionchange', function(tree, node){
var el = Ext.getCmp('temp-panel').body;
el.update("");
if(node && node.....){
myForm.render(el);
}
I want different form panels to show up based on which node I click on. So in the if (node && ...) block I need to render a specific formpanel everytime I switch my selection to this node. Right now it is only happening on the first time. Would calling myForm.doLayout() solve this issue?