The tree structure breaks when the parents and childs are not in ascending order.

[lavesh01]

In my project, I am using this plugin but when I integrated the tree structure data with my database such that the data is also saved in the MySQL database to save the id, parent, level, title and return me the saved tree structure when I reload the page but when I refresh the page the tree structure breaks, It is because now the parent and child are not one after another in a structured format from top to bottom , i.e random for every branch and not in ascending order.

The data structure should be in ascending order of the parents and childs otherwise the tree breaks !!!
But it's not possible because parents, childs and siblings of the tree is created randomly and when we drag and drop the tree structure will differ, hence the tree breaks .

[ahamed]

Hi,
could you share the data you are fetching from the database and your implementation, please? I hope I could help you.

thanks.

[lavesh01]

I have updated my issue please have you look !
For simplicity lets take this array , In id : 8 (Branch 8), though its parent_id is 7 and level : 2 it gets under the id: 4 element i.e Branch 4 . Why does the tree structure breaks ?
Expected Behaviour should be that the id: 8 element gets attached to it's parent_id : 7 i.e Branch 7

const dataLeft = [
    {
        id: 1,
        parent_id: 0,
        title: 'Branch 1',
        level: 1,
    },
    {
        id: 2,
        parent_id: 1,
        title: 'Branch 2',
        level: 2,
    },
    {
        id: 3,
        parent_id: 1,
        title: 'Branch 3',
        level: 2,
    },
    {
        id: 4,
        parent_id: 0,
        title: 'Branch 4',
        level: 1,
    },
    {
        id: 8,
        parent_id: 7,
        title: 'Branch 8',
        level: 2,
    },
    {
        id: 5,
        parent_id: 4,
        title: 'Branch 5',
        level: 2,
    },
    {
        id: 6,
        parent_id: 4,
        title: 'Branch 6',
        level: 2,
    },
    {
        id: 7,
        parent_id: 0,
        title: 'Branch 7',
        level: 1,
    },
    {
        id: 9,
        parent_id: 7,
        title: 'Branch 9',
        level: 2,
    }
];