Usage of nestedRows with dynamically loaded data?

Tags: #<Tag:0x00007efc6052a720>
#1

I try to build an app with by ajax laoded data:

  const hot = new Handsontable(document.getElementById(settings.Elem), {
            nestedRows: true,
            contextMenu: true,
            colHeaders: ['Erstell-Datum', 'Import-Datum', 'VKNR', 'FileIdent', 'Fehler', 'Zeile', 'Spalte', 'Ist-Wert', 'Soll-Wert', 'Fehlertext'],
            licenseKey: 'non-commercial-and-evaluation',
            preventOverflow: 'horizontal',
            rowHeaders: true,
        });

The data are coming by:

  $.ajax({
            url: settings.DataUrl,
            dataType: 'json',
            success: foo => {
                let bar = [];
                foo.forEach(d => {
                    let children = [];
                    d.errors.forEach(e => {
                        children.push({
                            row: e.row,
                            col: e.col,
                            expectVal: e.expectVal,
                            storedVal: e.storedVal,
                            text: e.text,
                        });
                    });
                    bar.push({
                        createDate: d.createDate,
                        importDate: d.importDate,
                        vknr: d.vknr,
                        fileIdent: d.fileIdent,
                        fehleranzahl: d.fehleranzahl,
                        row : null,
                        col : null,
                        expectVal: null,
                        storedVal: null,
                        text: null,
                        __children : children
                    });
                });
                hot.getInstance().loadData(bar);  //  <--
                hot.getInstance().render();
            }, 
        });

But on error Isee: this.data is null. Does it is possible to fill data array by ajax?

#2

I guess the rowHeaders feature aspects data at constructor time. Thatswhy I have moved the constructor into ajax success node:

$.ajax({
   url: settings.DataUrl,
   success: _data => {
        let data = [];
             _data.forEach(d => {
          // some resorts like above
             });
       new Handsontable(document.getElementById(settings.Elem), {
            data,
            preventOverflow: 'horizontal',
            rowHeaders: true,
            colHeaders: ['Erstell-Datum', 'Import-Datum', 'VKNR', 'FileIdent', 'Fehler', 'Zeile', 'Spalte', 'Ist-Wert', 'Soll-Wert', 'Fehlertext'],
            nestedRows: true,
            contextMenu: true,
            licenseKey: 'non-commercial-and-evaluation'
     });
  }
 });

Result: an empty screen, no table. no errors.
In your example ist only one “main”. column. Does it is am issue?

#3

Weird:
In your example (https://handsontable.com/docs/row-parent-child/#preparing-the-data-source) only the first object in array has these null entries. Is it right?

#4

Hi @Knoeterich

In the newest Handsontable when you use nestedRows and data is a single empty array you should get the top-left corner element like here https://jsfiddle.net/pLv4ofzw/

When it comes to null values in that demo, you do not need to pass null in all of the parents if you already declared the same keys in the first row. If columns are not used then each column inherits data accordingly to what is declared in the first row.

#5

I’m using currently v9.* and if I use in constructor

 data : []

it works, but the table starts with full expanded rows and if I scroll down the bottom part will not rendered.

This is my code:

 $.ajax({
            url: settings.DataUrl,
            dataType: 'json',
            success: _data => {
                let data = [];
                _data.forEach((d,i) => {
                    var __children = [];
                    d.errors.forEach(e => {
                        __children.push({
                            row: e.row,
                            col: e.col,
                            colname : e.colname,
                            text: e.text,
                            expectVal: e.expectVal,
                            storedVal: e.storedVal.substr(0,50),
                        });
                    });
                    data.push({
                        createDate: d.createDate,
                        importDate: d.importDate,
                        vknr: d.vknr,
                        fileIdent: d.fileIdent,
                        fehleranzahl: d.fehleranzahl,
                        row : null,
                        col: null,
                        colname:null,
                        text: null,
                        expectVal: null,
                        storedVal: null,
                        __children 
                    } );
                });
                hot.getInstance().loadData(data);
                hot.getInstance().render();
            }
        });
#6

Sorry for keeping you waiting, @Knoeterich
I think that the issue is related to https://github.com/handsontable/handsontable/issues/8838 as it is documented and tested that nestedRows when declared need to be provided with a nested structure of data.

#7

No problem, I was in holidays and back today.
I have understood this: if I’m using nestedRows then the data structur must be exist - i cannot set data structur later. Do you have an other idea of implemantation? Maybe dynamically filling of added rows?

My main issue: after scrolling the tabel will not rerendered.

#8

Hi @Knoeterich

Can you share any demo where the issue can be replicable? It seems that every issue related to missing parts of data is already solved.

#9

I’m using nestedRows then the data structur must be exist - i cannot set data structur later.

#10

HI @kenna178015crook

Yes, that’s correct. Unfortunately at the moment you have to set data structure at the beginning, otherwise the table won’t be rendered.

This issue is already reported here, so you can check when it will be fixed: https://github.com/handsontable/handsontable/issues/7017

#12

Hi @mariyahkaitlynnmefo

If you could share code example with us it would be great help.

#13