Tree View Stacked Appearance

[Khalipha Thomas]

I've noticed that when you add multiple nodes with at least 3 nodeChildren underneath each, the tree view stops looking like a treeview and becomes more squished into each other thus collapsing on itself. Can you please investigate this issue with treeview by using this as the datasource for the treeview component? 

dataSource2 = [

    {

      nodeId: "01",

      expanded: true,

      nodeText: "Music",

      nodeChild: [{ nodeId: "01-01", nodeText: "Gouttes.mp3" }]

    },

    {

      nodeId: "02",

      nodeText: "Videos",

      expanded: true,

      nodeChild: [

        { nodeId: "02-01", nodeText: "Naturals.mp4" },

        { nodeId: "02-02", nodeText: "Wild.mpeg" }

      ]

    },

    {

      nodeId: "03",

      expanded: true,

      nodeText: "Documents",

      nodeChild: [

        { nodeId: "03-01", nodeText: "Environment Pollution.docx" },

        {

          nodeId: "03-02",

          nodeText: "Global Water, Sanitation, & Hygiene.docx"

        },

        { nodeId: "03-03", nodeText: "Global Warming.ppt" },

        { nodeId: "03-04", nodeText: "Social Network.pdf" },

        { nodeId: "03-05", nodeText: "Youth Empowerment.pdf" }

      ]

    },

    {

      nodeId: "04",

      expanded: true,

      nodeText: "Documents",

      nodeChild: [

        { nodeId: "04-01", nodeText: "Environment Pollution.docx" },

        {

          nodeId: "04-02",

          nodeText: "Global Water, Sanitation, & Hygiene.docx"

        },

        { nodeId: "04-03", nodeText: "Global Warming.ppt" },

        { nodeId: "04-04", nodeText: "Social Network.pdf" },

        { nodeId: "04-05", nodeText: "Youth Empowerment.pdf" }

      ]

    },

    {

      nodeId: "05",

      expanded: true,

      nodeText: "Documents",

      nodeChild: [

        { nodeId: "05-01", nodeText: "Environment Pollution.docx" },

        {

          nodeId: "05-02",

          nodeText: "Global Water, Sanitation, & Hygiene.docx"

        },

        { nodeId: "05-03", nodeText: "Global Warming.ppt" },

        { nodeId: "05-04", nodeText: "Social Network.pdf" },

        { nodeId: "05-05", nodeText: "Youth Empowerment.pdf" }

      ]

    },

    {

      nodeId: "06",

      expanded: true,

      nodeText: "Documents",

      nodeChild: [

        { nodeId: "06-01", nodeText: "Environment Pollution.docx" },

        {

          nodeId: "06-02",

          nodeText: "Global Water, Sanitation, & Hygiene.docx"

        },

        { nodeId: "06-03", nodeText: "Global Warming.ppt" },

        { nodeId: "06-04", nodeText: "Social Network.pdf" },

        { nodeId: "06-05", nodeText: "Youth Empowerment.pdf" }

      ]

    }

  ];

[LeoLavanya Dhanaraj]

Hi Khalipha,

Greetings from Syncfusion support.

We have validated your reported query in Vue TreeView component. Based on your shared details and datasource, we have prepared a TreeView sample in Vue 3 platform with the latest version(V20.2.38). We were not able to replicate the reported issue at our end. The TreeView works properly.

Sample : https://codesandbox.io/s/gracious-ramanujan-fll97v?file=/src/App.vue

Check the attached sample and if the issue is still persists at your end, please provide the issue replicated sample or video footage. These details will help us to provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj.

[Khalipha Thomas]

I copied the exact same code provided in codesandabox into my App.vue file and i get this on the screen 

And this is what is in my package.json where I'm still using Vue 2.6.12. Will me using Vue 2 inhibit my project that hasn't been upgraded to Vue 3?

"vue": "^2.6.12",

"@syncfusion/ej2-vue-navigations": "^18.3.47",

 

[LeoLavanya Dhanaraj]

Hi Khalipha,

We have prepared a Vue sample with the exact version mentioned at your end but we are unable to reproduce the reported issue in the TreeView component. For your reference, we have attached a sample.

Sample : https://codesandbox.io/s/vue-template-forked-wrllit

If the issue persists in your sample, please replicate the issue in the attached sample. Have you made some customizations at the list item CSS level? Please share with us the completed code. It will help us to provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj