Complex data displayed on multiple lines in cell

[Victor]

I have a data object that looks like this:

[{
    'name': 'CEMC',
    'document': '1596',
    'amount': 3800,
    'payments': [{
                a1: ['29/06/2021', 1900],
                a2: ['29/06/2021', 1900],
              }],
 }
 ....
],

How can I display the payments field on a single cell in multiple lines. Kind of like this:

Document

Amount

Payments

1596

3800

29/06/2021	1900
29/06/2021	1900

1597

...

...

How could I use a template that works recursively through the data object to achieve the examples result?

Could it be exported to Excel as well?

Thanks!

[Balaji Sekar]

Hi Victor, 

Currently we are checking the feasibility of the reported query and we will update further details on November 25, 2021 

Until then we appreciate your valuable patience. 

Regards, 

Balaji Sekar. 

[Balaji Sekar]

Hi Victor, 

Query #1: How could I use a template that works recursively through the data object to achieve the examples result? 

Based on your query we have bound the table inside of the Grid cell and it will render the Table’s rows based on payments column(as you provided JSON data) value since we have achieved this requirement using queryCellnfo events of the Grid and we are created a table with data based on payments column value. 

Please refer the below code example and sample for more information. 

[index.js] 

function queryCellInfo(e) { 

  if (e.column.headerText == 'Payements') { 

    var payments = e.data['payments']; 

    var table = document.createElement('table'); 

    table.id = 'innerTable'; 

    payments.forEach(function (item) { 

      var tr1 = document.createElement('tr'); 

      item.a1.forEach((e) => { 

        var td = document.createElement('td'); 

        td.innerText = e; 

        tr1.appendChild(td); 

      }); 

      table.appendChild(tr1); 

      var tr2 = document.createElement('tr'); 

      item.a2.forEach((e) => { 

        var td = document.createElement('td'); 

        td.innerText = e; 

        tr2.appendChild(td); 

      }); 

      table.appendChild(tr2); 

    }); 

    e.cell.appendChild(table); 

  } 

} 

Sample link: https://stackblitz.com/edit/nkds4q?file=index.html 

Query #2: Could it be exported to Excel as well? 

No, we do not have support for HTML table rendering on Grid’s cell while excel exporting. 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar.