We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Display TreeView in multiple columns


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.



7 Replies

IL Indhumathy Loganathan Syncfusion Team February 14, 2023 02:26 PM UTC

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.


Indhumathy L

MA Markus February 14, 2023 04:16 PM UTC

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,


IL Indhumathy Loganathan Syncfusion Team February 16, 2023 01:25 PM UTC

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.




      #tree ul {






var treeObj = new ej.navigations.TreeView({

  fields: {

    dataSource: continents,

    id: 'code',

    text: 'name',

    child: 'countries',


  fullRowSelect: false,



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

MA Markus February 19, 2023 01:36 PM UTC

Thanks for the answer, this looks almost perfect. 

Do we have a chance to change the order from

A  B

C  D


A  C

B  D


Kind regards,


IL Indhumathy Loganathan Syncfusion Team February 22, 2023 11:32 AM UTC

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.


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

MA Markus February 22, 2023 12:03 PM UTC

Perfect, thanks for your help!

Kind regards,


IL Indhumathy Loganathan Syncfusion Team February 24, 2023 09:57 AM UTC

Hi Markus,

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


Indhumathy L

Live Chat Icon For mobile
Up arrow icon