Skip to Content
avatar image
Former Member

Tree / TreeTable data binding with flat oData


I am quite new in the SAPUI5 world and I would to create an interface where I can display a huge hierarchy in a Tree or TreeTable component.

In this hierarchy, I have more than 20 levels but I would like to only manage the top 10 levels for now. It represents around 50 000 nodes already !!!

To get this hierarchy structure, I have an oData service where I have the following flat structure: NodeID, ParentID, NodeName

I have tried something with the Tree component :

     I am reading my Odata Model with the read() function and then I am able to instantiate my TreeNodes and then use the function addNode() to plug the nodes.

The main problem with this approach is the performance. It is taking around 20 sec to be loaded with Chrome and IE cannot manage it, memory issue...

One idea could be to instantiate only the nodes that needs to be displayed in the tree when we expand a new node but there is no such event on the Collapse/Expanse action for the Tree component...

So, the other option that I see would be to use the TreeTable component which is less sexy but at least, it has an event for the expand action (toggleOpenState).

However, this component does not have addNode() function to join the nodes… There is only this bindRows() function but here, it seems that it will work only if the model is in hierarchical format.

This is here where I am struggling. I would say, I would need to convert my flat oData model to JSON hierarchical…

Hence, I would need some help. How to achieve this kind of conversion or do you other better option that I could use to achieve this ?

Thanks in advance for your support,


Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Jan 06, 2015 at 06:05 PM

    Hi Nicolas

    Is your oData service flexible enough to give you subset of the tree? and incrementally give you child nodes of a given parent node?


    Add comment
    10|10000 characters needed characters exceeded

    • Is that something you need? => JS Bin

      Watch the output in chrome console (or FF).

      The script has one problem, if a children is before the parentNode in the sourceData, that children can't be added to the new structure. (See in my exampe the first dataset, it couldn't be added)

      So maybe you need to improve it.