I found the working example online and I can see check box adjacent to each node of the tree The fiddle link mentioned last section given below:
Dojo tree with checkbox not displaying
Now my requirement is when the parent node is checked, all the child node should also gets checked and it should work in DOJO 1.3 release
Can help someone help fix the fiddle code
Within the checkbox listener you can put code to find the children and check them also:
The tree has to bexpanded before adding the other checkmarks because the children nodes are not created till the parent is expanded the first time.
dojo.connect(cb, "onChange", function() {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
//treeNode.expand();
treeNode.tree._expandNode(treeNode);
dojo.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode
}]);
var parentcb = this;
console.log(parentcb.checked)
treeNode.getChildren().forEach(function(item) {
var checkbox = dijit.getEnclosingWidget(item.labelNode.children[0]);
checkbox.set('checked', parentcb.checked)
});
});
Fiddle:http://jsfiddle.net/mcfskLop/8/
Related
I'm having issues getting the node and record. Also I can not make a node that is visible: false on init to show programmatically.
Check out this fiddle
https://fiddle.sencha.com/#view/editor&fiddle/3hs5
I found the issue. I used setData instead of root.appendChild so the store wasn't correctly populated.
The fiddle is updated and now works
I am building a directive with a select list in order to add dynamically elements.
The following doesn't work : I'm adding an element to the array model used in the ng-model-options binding of my directive.
The element is nicely added to the list but it's not being selected. Instead I keep getting the empty line. I can't find a way to set the ng-model to the newly added element.
I have tried a scope.$watch on my item list inside the directive but strangely nothing is fired when the item list is increased by one new element. And I don't understand why : if the list is being updated so should scope.items, which should trigger the scope.$watch...
scope.$watch('items', function(){
scope.ngModel = scope.items[0];
});
I have made a plunker to illustrate this : plunker
Thanks for your help on this!
This will work (documentation)
scope.$watch('items', function(){
scope.ngModel = scope.items[0];
}, true); // Add third parameter true, this will make sure you check if the list
// has changed and not only if a new list was added
// Without the third parameter:
var list = [];
list.push('test'); // won't call watch
var list = ['test'];
list = ['new array']; //will call watch
I'm trying to add the onSelect event to the following code:
var treeview = $("#treeview").kendoTreeView({
animation:true,
dragAndDrop:false,
select: onSelect,
}).data("kendoTreeView");
// onSelect function call
function onSelect(e) {
kendoConsole.log("Selecting: " + this.text(e.node));
}
It is not working. All I want is to select a parent node.
If i am not wrong, you want to select a parent node of a node you selected, i have made small fiddle for you. You have to prevent (e.preventDefault()) the default behavior of select event. I am simply using parent and select client APIs.
Edit: Sorry, i accidentally deleted the fiddle, i have linked the working one.
I have a treegrid and I want to update just one node with its childs. So I have tried like this:
store.load({
node: store.getNodeById(1)
});
That updates childs, but not the node itself. So how can I update node and childs? It would be best if it would require just one request to the database.
There isn´t any way to do it by configuration, it just works as design. What you can do is a little trick after load the node's children in order to manipulate the tree nodes to update the node itself manually.
See the images. They show the behaviour you expect.
This is working okay in jsfiddle: http://jsfiddle.net/lontivero/jBTWn/3/
Basically, the idea is, as I just said, manipulate the tree after load the children. In my example this is done by:
var node = store.getNodeById(1);
store.load({
node: node,
callback: function(newRecord) {
var parent = node.parentNode;
parent.insertBefore(newRecord[0], node);
parent.removeChild(node);
},
params: {
json: Ext.JSON.encode(updated_data)
}
});
Good luck!
I have a Tree Panel which I expand programmatically.
When I expand a node, I would like to "jump to" this node, I mean to scroll to it.
How to scroll a tree panel to a specific node ?
UPDATE:
I use Ext 4.1
Try using selectPath() http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel-method-selectPath
In extjs 3.x you can try calling focus() on the TreeNodeUI (myNode.ui.focus())
The tree is asynchronously loading every node, and you need to call to focus only after all the nodes have been loaded. What you are going to need to do is to set autoLoad to false on your root node, then later in the code manually load the root node for the first time using:
rootNode.expand(true, function(){
myTreePanel.getView().focusRow(nodeyouwanttofocus);
});
doing it this way allows you to use the first parameter of the expand function that makes the expand fully recursive and also assures that the second parameter that is a function only executes after all the nodes are loaded, guarenteeing that the view is the correct height and that the node exists visually.
Another option that allows more flexability is to hook into the expand event:
var myTreeStore = Ext.create("Ext.data.TreeStore", {
listeners: {
expand: function(theParentNode){
theParentNode.eachChild(function(node){
if(nodeIWantSelected == node)
myTreePanel.getView().focusRow(node);
}
}
}
});
and you can use the .select of the selection model to hook in to select the node (and I think it may focus the node too).
I haven't tried 'selectPath' as suggested by Sha before, which seems a lot easier to use, but you can hook in the focusRow function as the callback and I think that would work too.
You can use tree.getView().focusRow(), like it:
tree.expandPath(
'/root/1/2/3',
'id',
'/',
function() {
tree.getView().focusRow(tree.getStore().getNodeById('3'));
}
});
But, if your tree use animate: true and load every node asynchronously and any node in the path not loaded yet this approach doesnt work (tree is not scrolled to the selected node because of multiple layout updates).
As workaround you can:
set animate: false for tree;
add 'afterlayout' listener, like this:
tree.on('afterlayout', function() {
tree.getView().focusRow(tree.getSelectionModel().getSelection()[0]);
}
I guess you can add this handler when needed and remove it when everything is done.