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
Related
This might simple but I need some pointers.
I have a list of items which I am rendering using map list (Parent Component) and item(Child Component).
There is checkbox inside child component
Parent has a button
Now, I want user should able to select few or all items from the list, and on click of button we should highlight the checked items alone.
I tried some flag passing, however could not figure out best approach.
Please suggest.
Thanks all.
Finally, figured out by adding operation code in parent component.
Child component just get status update in case.
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)
I have a dynamically populated Ext.tree.TreePanel. I can drag nodes from the tree and drop them in a panel but when I drag them, the nodes default iconclass also appears in the drag proxy. How do I remove that class?
I haven't tested this, but just looking through some of the source code, the dragged ghost is obtained via an TreeNode element clone, so you can't tell it explicitly not to add your class, but the first chance you get to delete the class is in the TreePanel.startdrag event:
removeClassOnStartDrag = function(tree) {
tree.dragZone.proxy.ghost.removeClass('some-class');
}
...
treepanel.on('startdrag', removeClassOnStartDrag, this);
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?