Callback in webix

Webix JS
#1

Hi webix team,

In this snippet,
https://snippet.webix.com/lsohznwh

in onAfterRender moethod I am opening the first treenode.
And after opening the treennode I want the alert in callback.

Thanks,
Mira Karale

#2

https://snippet.webix.com/vhc2z4qf

#3

@Jacekk015

Thank you for reply :slight_smile:

But I want alert in callback function only.
Because I am calling open event explicitly.

#4

open works synchronously. so you can simply put an alert after “open” command.

#5

Hi webix team,

Suppose I need to locate 3rd level node of tree then I am following these steps-

  1. Open first level node(childs are coming from server).
  2. Open second level node(again childs coming from server).
  3. callEvent onItemClick on 3rd level node(tree locating done).

But my problem is when I am executing first step immediately second step is executing but it takes some time to take data from server of second level and if I am trying to open second level it gives error of undefined.
In this scenario I need to use setTimeout but its not a good solution.

Please give me proper solution."
var absolutePath = “Project_1c_2/TestPlan_1_1/Test_1_1”’;
var itemId = absolutePath.split("/")[0];
$$(“tree1”).open(itemId);
setTimeout(function(){
$$(“tree1”).callEvent(“onItemClick”, [itemId+"/"+absolutePath.split("/")[1]]);
$location.path(locationPath);
$$(“tree1”).select(itemId+"/"+absolutePath.split("/")[1]);
$$(“tree1”).showItem(itemId+"/"+absolutePath.split("/")[1]);
},500);

Please reply me I am so stuck on this.

#6

Yep, the open operation can start async data loading, so catching the correct moment can be tricky.

// wait helper
function wait(tree, id, handler){
     var checkInterval;
     var check = function(){ 
         if (tree.data.branch[id] && tree.data.branch[id].length){
               clearInterval(checkInterval);
               handler();
         }
     };

     checkInterval = setInterval(check, 100);
     check();
}

// now you can write your code like next

tree.open(id1);
wait(tree, 1, function(){
     tree.open(2);
     wait(tree, 2, function(){
          tree.select(3);
     });
});
#7

Thank u maksim:) .Really you solved my biggest problem. Thank you so much.

#8

Hi maksim,

I am having one more problem in tree locating.
Suppose I am having tabbar.

  1. In one tab I am having first tree and in second tab second tree.
  2. By default first tree is open.
  3. If I want to do tree location of second tree then first I need to change the tab and then have to click or open first node of second tree.

But my problem is I am calling treeLocating function in first tree onAfterRender method and in that function I am checking all cases because I am having so many trees with different routing pages.So It is necessary to call tree locating function in first tree only.
Now I am doing like this -

 $$('dataViewtabbar').setValue('flatView');
 $$('dataViewtabbar').callEvent('onChange');
 var itemId = absolutePath.split("/")[0];
 $location.path(locationPath); // when location will get changed then my second tree is coming. Here it takes some time and before loading tree my onItemClick function getting call. So I used here setTimeout.I want to remove setTimeout.
 setTimeout(function(){
        $$("secondTree").callEvent("onItemClick",[itemId]);
	$$("secondTree").select(itemId);
	$$("secondTree").showItem(itemId);
 },500);

Thanks,
Mira

#9

Which code triggers the next line, is it some Webix related functionality or a custom API / Framework

$location.path(locationPath)

It possible to use the approach similar to the wait function for the open branch for such task as well, but it is not the best approach for sure. Using native promise / callback where possible is a more stable and safe approach.