Dynamic data loading in tree

Webix JS
1

Hello, I am having problems with the Tree widget.

Is there a way to pass back arbitrary data to the server when dynamically loading child nodes? The query string contains only two values: continue=true and parent=X. I would like to pass back maybe key:value stored in the node.

What is continue=true in the query?

Thanks!

2

continue=true is just a marker that this query is a auto generated dynamic request, not the original data loading request ( it may matter for dyn. loading in datatable, where you may want to provide datatable’s configuration as part of initial data loading )

As for extra parameters - yep, you can do it like next

webix.ui({
     view:"tree",
     url:"data/data_dyn_json.php",
     on:{
          onDataRequest:function(id){
               this.parse( webix.ajax().get(this.data.url+"?parent="+id, 
                                                         { key:123 }) );
               return false;
          }
     }
});
3

Very good.

4

How do we handle right clicking on a tree node, and showing a context menu? I didn’t see anything allowing right clicks in the tree api reference.

5

I see the onBeforeContextMenu and onAfterContextMenu… But I would like to see an example of popping a custom context menu depending on which tree node I click.

6

You can create a few menu instances and show necessary one from onBeforeContextMenu or use a single menu instance and just user filter api to show|hide some options from onBeforeContextMenu handler

In the onBeforeContextMenu handler you can use this.getItem(id) to get full info about item which was right-clicked.

7

@maksim: would love to see this example of dynamic data loading added to the tree samples.

@billtricarico, please post separate threads for distinct issues, like context menus for trees. Thanks!

8

Can onDataRequest be used for trees that are hybrid, i.e. with the first level of nodes defined in data, and the second level loaded dynamically? I’ve spent a lot of time reading bits and pieces scattered about the docs and the forum trying to figure out paging for loading tree nodes dynamically, but due to lack of documentation, I have to give up.

Snippet and StackOverflow question.

9 
examples of dynamic loading

http://docs.webix.com/samples/17_datatree/16_dyn_loading/01_dyn_loading.html

10

You can load levels dynamically, and it can be done with or without onDataRequest event.

Normally, when you are loading data you can mark some nodes with webix_kids attribute

http://docs.webix.com/datatree__data_formats.html#expecteddataformats

Such nodes will be rendered as “folders” and during opening will try to load extra data ( data loading will trigger onDataRequest )

11

Thank you - webix_kids was a big step forward.

Any idea why onDataRequest is fired continuously?

http://webix.com/snippet/19fc7da3

12

Client side code expects to have json like

{ parent:id, data:[ ... ] }

where parent is the id of branch to which child items need to be added

http://webix.com/snippet/7e81d955

The second part of problem is the bug in Webix, that causes second data loading call. I have added the line at bottom of above snippet, that can be used as temporary fix. Correct fix will be available as part of the next build.

13

Is return false at the end of onDataRequest necessary? The documentation says the function returns void and in practice removing return false didn’t make any difference.

14

When event doesn’t return false, component will try to apply default auto-loading logic. As in above case component was loaded from local data it will not have any visible effect.

In case of loading from the server ( .load, or by url property ) component will try to load the same url with extra parameters.

I have marked to update the related article in docs

15

Thanks. Does this apply to all components, or just Tree?

16

It works the same for all components ( all components that have onDataRequest event - tree, treetable, datatable )

17

I would be happy to submit a documentation PR. But how is the function signature extracted?

18

You might have already seen a comment on this on GitHub.

Function signature is based on:

  • parameters from @params section. It is important to specify parameter types although they are not seen in the table. Parameters can be compulsory (entered via a hyphen) and optional (entered via an asterisk)
  • return value from @returns section.
  • API doc template type (api_method, api_config, api_event) that hints which pattern should the engine use for parsing.
19

HI, any update for this? If i remove temporary fix, onDataRequest will be fired continuously,.

http://webix.com/snippet/08b4662b

20

Be sure to clear the cache.
Regression was fixed in latest Webix 2.5.14 and above snippet works correctly.