Display TreeView in multiple columns

[Markus]

Hi,

is there a way to display a TreeView in multiple columns?

I tried

columns: 2;

-webkit-columns: 2;

-moz-columns: 2;

but this doesn't work as expected.

Thanks,

Markus

[Indhumathy Loganathan]

Hi Markus,

We understand that you want to render the TreeView data in multiple columns. We would like to mention that we have the TreeGrid component, which would be suitable for your requirements. For your reference, we have attached the documentation and demo links.

Documentation: https://ej2.syncfusion.com/documentation/treegrid/getting-started/

Demo: https://ej2.syncfusion.com/demos/#/bootstrap5/tree-grid/treegrid-overview.html

Check out the shared details and confirm whether the shared component is suitable for your requirements.

Regards,

Indhumathy L

[Markus]

Thanks for your reply, but that's not exactly what I need. I need to display the first levels (with all its children) in multiple columns like this:

Kind regards,

Markus

[Indhumathy Loganathan]

Markus, As requested, we have rendered TreeView nodes in two columns with below CSS level customization. To achieve this requirement, you need to set the fullRowSelect property as false. Check out the code snippets and sample for your reference.

[index.html]

    <style>

      ...

      #tree ul {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

      }

    </style>

[index.js]

var treeObj = new ej.navigations.TreeView({

  fields: {

    dataSource: continents,

    id: 'code',

    text: 'name',

    child: 'countries',

  },

  fullRowSelect: false,

});

treeObj.appendTo('#tree');

Sample: https://stackblitz.com/edit/z5y4ue-l3ythm?file=index.js,index.html

[Markus]

Thanks for the answer, this looks almost perfect. 

Do we have a chance to change the order from

A  B

C  D

to

A  C

B  D

?

Kind regards,

Markus

[Indhumathy Loganathan]

Markus, As explained earlier, we don’t have direct support. If you want to change the ordering of nodes rendered in columns you need to use some general customizations as done in the below bob.

https://stackoverflow.com/questions/45383042/reverse-order-of-columns-in-css-grid-layout

To meet your requirements, we have set grid-row, grid-column properties for each node in the TreeView using htmlAttributes property. Check out the below code snippet.

  {

    code: 'AF',

    name: 'Africa',

    htmlAttributes: { style: ' grid-row: 1;grid-column: 1;' },

    countries: [

      { code: 'NGA', name: 'Nigeria' },

      { code: 'EGY', name: 'Egypt' },

      { code: 'ZAF', name: 'South Africa' },

    ],

  },

  {

    code: 'AS',

    name: 'Asia',

    htmlAttributes: { style: ' grid-row: 2;grid-column: 1;' },

    countries: [

      { code: 'CHN', name: 'China' },

      { code: 'IND', name: 'India', selected: true },

      { code: 'JPN', name: 'Japan' },

    ],

  },

  {

    code: 'EU',

    name: 'Europe',

    htmlAttributes: { style: ' grid-row: 1;grid-column: 2;' },

    countries: [

      { code: 'DNK', name: 'Denmark' },

      { code: 'FIN', name: 'Finland' },

      { code: 'AUT', name: 'Austria' },

    ],

  },

  {

    code: 'NA',

    name: 'North America',

    htmlAttributes: { style: ' grid-row: 2;grid-column: 2;' },

    countries: [

      { code: 'USA', name: 'United States of America' },

      { code: 'CUB', name: 'Cuba' },

      { code: 'MEX', name: 'Mexico' },

    ],

  },

Sample: https://stackblitz.com/edit/z5y4ue-nd12jj?file=index.js,index.html

[Markus]

Perfect, thanks for your help!

Kind regards,

Markus

[Indhumathy Loganathan]

Hi Markus,

Glad to know your issue has been resolved. Please get back to us in future for further assistance.

Regards,

Indhumathy L