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.