Develop Reference

Function to expand a parent node dynamically from json in a dhtmlx tree

On the dhtmlx documentation, I see this:
The following method is responsible for specifying the way server side URL is constructed during dynamical loading calls:
<script>
tree.setXMLAutoLoadingBehaviour(mode);
</script>
The following modes variants are available here:
function - is used for calling user-defined handler that should be set as the first parameter of setXMLAutoLoading() method.
So I understand that I need to write a function to add one layer of children to the actual node (the selected node), if it has children. But what I don't understand, is how I should do this, as I have some difficulty finding the right parameters to use, to be able to find the children and add them to the tree.
I am loading a local json file, with .loadJSON("data.json");. Right now, I know I should change the behavior to function and call a function that will load the children of the clicked/expended node. I've named that function loadBranch in the code below.
myTree.setXMLAutoLoadingBehaviour("function");
myTree.setXMLAutoLoading(function (id) { loadBranch(id)});
But I am not able to write a function that will only find and add those children into my dhtmlx tree. Could any of you give me a code snippet that could be used as this function?
Thanks anyway.
PS: My "ultimate" goal is to create a default dhtmlx tree that can load a json dynamically, to compare it's performance with other trees.

Try something like this:
mytree.setXMLAutoLoadingBehaviour("function");
mytree.setXMLAutoLoading (function(id){
// here based on ID you need to load some XML
mytree.loadXML(myFunction(id));
});

Sigma.js filter issue

I am using sigma.js along with angular js to build my visualization web app.
Problem statement: I have written code in such a way that when filter criteria changes, filter module will be triggered to filter out nodes based on user selection(see code below).But, Initially for the first time filter works fine without any issue, but later on it doesn't seem to be working. It looks like it is not executing the filter predicate at all.
I tried below possible ways, but couldn't resolve the issue.
1) Destroyed and recreated the filter object for every data change trigger.
2) Unregistered and registered filter predicate.
code snippet:
scope.$watch('filtersettingdata',function(){
s = new sigma({
graph: scope.data['mdata'],
container: element.elementid,
renderer: {
container: document.getElementById(element.elementid),
type: 'canvas'
},
settings: filtersettingdata
});
var filter = new sigma.plugins.filter(s);
filter.nodesBy(
function(n) {
//predicate with new filter values
},'filter_name').apply();
s.refresh();
}
any help/suggestions will be really appreciated.
Thanks in advance.

I'm the author of this plugin.
It is out-dated in the official sigma repository and I don't think it will work with Angular as it is.
It is now released under dual license GNU GPLv3 + commercial here: https://github.com/Linkurious/linkurious.js/tree/linkurious-version/plugins/sigma.plugins.filter
This version works with Angular and I've successfully used it in the projects of my company.
Disclaimer: I work at Linkurious SAS.

Select a tree node does not work

I have an application in Extjs and I need to select a specific node to expand the tree.
I am using the following method:
var record = tree.getRootNode().FindChild('text', 'employee', true);
tree.getSelectionModel().select(record);
in this way does not work, but if I select any one node and then run the above method, it works without problems.
Help please
UPDATE
CODE:
tree.expandPath(route, "text", "->", function() {
var record = tree.getRootNode().findChild('text','BASE',true);
tree.getSelectionModel().select(record);
});

It is possible that the node is not loaded yet. If you need to expand the tree, the best way is to use expandPath method and if you need to select the node then do it in expandPath callback.

When do you try to select the node with this code? While the tree panel got generated? In this case, perhaps some code from treepanels implementation will reset the selection. So for testing try it with a lock on the the selectionModel:
var record = tree.getRootNode().findChild('text','BASE',true);
tree.getSelectionModel().select(record);
tree.getSelectionModel().setLocked(true);
(If you know already the node which should be expanded while loading data for the store, you can also set "expanded" to true in the data for this specific record/node. Then the expansion is done by ExtJS automatically.)

Friends thanks for your help, I was able to solve my problem.
Apparently I did not select the node because it had not shown the window and the nodes were not available, so here add a listener after render.
so I stay my code:
listeners: {
afterrender : function(){
this.selectPath(this.ruta, 'text', '->', function (s,n) {
var nodeEl = Ext.get(this.view.getNode(n));
nodeEl.scrollIntoView(this.view.el, false, true);
});
}
}
this solution apart from selecting me too the node moves to its location in the tree.
hopefully serve them.
Greetings!

Querying the DOM in Windows 8 Apps from within a method

I'm struggling with this even after reading the MSDN documentation and the following online guides:
Codefoster
Stephen Walter
I think my problem is easy to fix and that I just am thinking about something in the wrong way. Basically I am querying my web service and on success running the following method. I am then trying to bind the result to my listview. For now I am using a hardcoded value publicMembers.itemlistwhich has been declared at the top of the document just to make sure I can actually bind to the list before doing it with my query results. Ignore line 2 for now.
Success Method:
_lookUpSuccess: function xhrSucceed(Result) {
var response = JSON.parse(Result.responseText);
listView = document.querySelector("#termTest");
ui.setOptions(listView, {
itemDataSource: publicMembers.itemList,
itemTemplate: document.querySelector(".itemtemplate"),
})
},
Now, instead of using document.querySelector, I have also tried with WinJS.Utilities.id and WinJS.Utilities.query, neither of which worked either. This doesn't break my code and introduce an error but it doesn't bind to the listview either so I think I have an issue in querying the right DOM element. However exactly the same code does work if I add it to the top of the script, it is only when I place it in this method that it stops working.
EDIT: Also to clarify, when I debug publicMembers.itemList is storing the values I expect them to be.
Please point out if I have explained things poorly and I will try and improve my question.
Thanks.

I haven't used WinJS.UI.setOptions, but rather this other way of setting the data source. Can you see if it works?
_lookUpSuccess: function xhrSucceed(result) {
var response = JSON.parse(result.responseText);
listView = document.querySelector("#termTest");
listView.winControl.itemDataSource = publicMembers.itemList;
},
This would assume you're defining the itemTemplate as part of the data-win-options attribute of your ListView's HTML element. You could also probably just do listView.winControl.itemTemplate = document.querySelector(".itemtemplate") if you prefer to set it programmatically.

"bwrap" is undefined

I have a class extending the old Ext.Panel class. I'm now trying to migrate my application with help of the migration guide provided by sencha. I'm using a modification of the ext3 "Portal"-Example.
When trying to load my application i get some "deprecated" and "breaking" errors with a good explaination. But there is one error, i can't fix. It says "portal.bwrap is undefined" as mentioned above, "portal" is a subclass of Ext.Panel. In ext3 there was a property "bwrap" in the new ext there is not. And it is not documented neither in the compatibility layer nor in the migration guide how to fix this in ext4.
Here are the two places where bwrap is used:
constructor : function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
},
[...]
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
},
Any suggestions?

bwrap was a div that wrapped that panel body. It no longer exists. Without seeing the code I can't say what you should do, but chances are you should either refer to the main panel element or the body itself.
FYI the portal example is already ported to 4.