61
Views
6
Comments
Solved
[OutSystems Data Grid] How to show tree in column
outsystems-data-grid
Reactive icon
Forge asset by OutSystems

Hi everyone,

I'm working with Outsystems DataGrid. It seem to be there is no Column Component supports this kind of case. 

Does anyone has idea to implement this treeview in one column, I've tried to make grouping but the displaying looks different.

Expecting:

thank you very much !!

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Kiet Phan 

Starting from the example you shared and fixing some small issues I'm sharing a working example with the community for future notice.

Cheers,
GM

SolutionConcept_Sample.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hi @Kiet Phan 

That use case is not currently supported and not on the product roadmap.
You can add this to the Ideas since the product team never received requests for this since in terms of use case it doesn't fit the product scope defined.

Cheers,
GM

2025-12-04 09-01-03
Kiet Phan
Champion

Thank you for your answer, perhap I will try to customize the DataGrid first.

then I will add this to Ideas after. 

Thank you !

2022-11-12 11-28-30
Gonçalo Martins
Staff

Remember that the biggest challenge is that the data source would need to follow a structure that is not what the Data Grid expects. 
Other than that it would be a bit simpler since it would be a matter of defining the attribute childItemsPath.

2025-12-04 09-01-03
Kiet Phan
Champion

Thank you for your suggestion

I have looked into the document but found it so hard to add a new GridTree columnType to Outsystems DataGrid. :(

Can you recommend for me the step I need to do to get the expected result.

https://developer.mescius.com/wijmo/demos/Grid/TreeGrid/ChildItems/purejs

2025-12-04 09-01-03
Kiet Phan
Champion

thank you, atleast I'm able to init the Tree by their sample JS, the very first step :D

var workers = [

{

    name: 'Jack Smith',

    checks: [{

      name: 'check1',

      earnings: [

          { name: 'hourly', hours: 30.0, rate: 15.0 },

        { name: 'overtime', hours: 10.0, rate: 20.0 },

        { name: 'bonus', hours: 5.0, rate: 30.0}

      ]

    }, {

      name: 'check2',

      earnings: [

          { name: 'hourly', hours: 20.0, rate: 18.0 },

        { name: 'overtime', hours: 20.0, rate: 24.0 }

      ]

    }]

  }, {

    name: 'Jack Smith',

    checks: [{

      name: 'check1',

      earnings: [

        { name: 'hourly', hours: 30.0, rate: 15.0 },

        { name: 'overtime', hours: 10.0, rate: 20.0 }, 

        { name: 'bonus', hours: 5.0, rate: 30.0 }

      ]

    }, {

      name: 'check2',

      earnings: [

        { name: 'hourly', hours: 20.0, rate: 18.0 },

        { name: 'overtime', hours: 20.0, rate: 24.0 }

      ]

    }]

  }, {

    name: 'Jane Smith',

    checks: [{

      name: 'check1',

      earnings: [

        { name: 'hourly', hours: 30.0, rate: 15.0 },

        { name: 'overtime', hours: 10.0, rate: 20.0 },

        { name: 'bonus', hours: 5.0, rate: 30.0 }

      ]

    }, {

      name: 'check2',

      earnings: [

        { name: 'hourly', hours: 20.0, rate: 18.0 },

        { name: 'overtime', hours: 20.0, rate: 24.0 }

      ]

    }]

  }];


var workersGrid = new wijmo.grid.FlexGrid('#MyGrid', {

    headersVisibility: 'Column',

    childItemsPath: ['checks','earnings'],

    autoGenerateColumns: false,

    columns: [

        { binding: 'name' },

        { binding: 'hours', dataType: 'Number' },

        { binding: 'rate', dataType: 'Number' }

    ],

    itemsSource: workers

});

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Kiet Phan 

Starting from the example you shared and fixing some small issues I'm sharing a working example with the community for future notice.

Cheers,
GM

SolutionConcept_Sample.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.