Tree table loading icon and empty message on branch open.

Hi,

I'm using a tree table, and on open of a branch, I fetch the children using a custom implementation.
1) I want to show a loading icon in the expanded area while fetching the data.
2) After fetching the data, there might be a case where the parent might not have any children. In such a scenario I want to show a message conveying that there are no children for the parent, in the expanded area.

https://snippet.webix.com/zmg8z4oa

Tagged:

Comments

  • Can anyone help me with this?

  • Hello,

    I want to show a loading icon in the expanded area while fetching the data.

    You can use Progress Icon

    After fetching the data, there might be a case where the parent might not have any children. In such a scenario I want to show a message conveying that there are no children for the parent, in the expanded area.

    Please check the sample: https://snippet.webix.com/v41qupi9

  • Thank you Nastja.

    But seems like the snippet you shared doesn't work as expected all the time.
    On open of an empty tree branch, the other nodes of the tree are duplicated.
    Can you help me to fix this?

    https://snippet.webix.com/3yvh2gf5

  • Also, can I align the empty text message to the center of the row?

  • Can anyone help me on this?

  • Hello,

    I can confirm the issue with duplicate items. Generally, the widgets awaits an asynchronous request within this onDateRequest event. To mimic it, you can set timeout for the parsing call:

    webix.delay(function(){
         this.parse({ data: dummyResponse, parent: id })
    }, this);
    

    However, we will investigate into this issue and probably fix it for inline data.

    As to text centering, you can add right-hand alignment to the related title cell. Text will not aligned in the middle of the row, however,this will be closer to the desired effect.

    Here's an updated snippet: https://snippet.webix.com/xbi474vp

  • Thank you, Helga. This helps :)
    But, I see couple of other problem in the shared snippet.
    I want to keep only one tree node open at a time, so, I was closing the already opened tree node with this.close(nodeId) method in the custom request implementation.
    1) The child of the previously opened branch is displayed along with the child of the newly opened branch.
    2) When I open the branches of the tree from top to bottom order, the previously openend branches are closed as expected. But, if I first open the branches from top-to-bottom and then from bottom-to-top, the tree branches are not closed. The problem exists vice versa as well.

    Here's the snippet with the above problem:
    https://snippet.webix.com/zm8laees

  • You can try moving the closing logic into the onBeforeOpen handler: https://snippet.webix.com/0psbxmzk

  • Thank you very much :smile:

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!