Handsontable loaded rows from database can not be changed but new rows and cells possible

Tags: #<Tag:0x00007efc61c2d670>
#1

Hello Handsontable Forum,

Iam loading data from a Database and hand it over to JS in Drupal with:
$build['#attached']['drupalSettings']['row'] = $row;
Everything is working fine (only the last row) but I cant change the Cells with the loaded data when the table is initialized.

The whole table freezes when I change something above the last empty row(see Screenshots).

With var $row = drupalSettings.row; I get an array as strings and hand them over to load the saved data and generate some predefined cells with

function getData() {
                        var $result=[];
                        var $count =1;
                        $.each($row, function (index,value) {
                            $count++;
                            $result.push([
                                [$row[index]['nr']],[$row[index]['fah']],[$row[index]['time']],[$row[index]['auto']],[$row[index]['fromo']],[$row[index]['from']],[$row[index]['targeto']],[$row[index]['target']]]]
                            ]);
                        });
$result.push([
                            [$count],getDate(),getTime()
                        ]);

                        return $result;

                        }

Iam changing the source of an cell when another cell has a specific value:

var example1 = document.getElementById('example');

 var config;
 config = {
     data: getData(),
     colHeaders: ['Nr', 'datum', 'Uhrzeit', 'Car', 'FromPlace', 'FromStr', 'Targetplace', 'Targetstr'],

     columns: [
         {type: 'numeric',editor: false},
         {type: 'date', dateFormat: 'D.M.YYYY'},
         {type: 'time', timeFormat: 'HH:MM'},
         {
             type: 'autocomplete',
             source: ['T1','T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8','M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'N1', 'N2', 'N3', 'N4', 'N5', 'N6', 'N7', 'N8'],
             strict: true
         },
         {
             type: 'autocomplete',
             source: ['Dietzenbach','Darmstadt','Frankfurt am Main','Offenbach am Main'],
             strict: true
         },
         {
             type: 'autocomplete',
             strict: true
         },
         {
             type: 'autocomplete',
             source: ['Dietzenbach','Darmstadt','Frankfurt am Main','Offenbach am Main'],
             strict: true
         },
         {
             type: 'autocomplete',
             strict: true
         }
        

     ],

     afterChange: function cellChange(changes, source) {


         if (!changes) {
             return;
         }

         var $countRow=hot1.countRows();
         var $lastRow=hot1.getDataAtRow($countRow-1);



         if(changes[0][1] === 4)
         {
             hot1.getCellMeta(changes[0][0],5).source=getStreets(changes[0][3]);
         }

         if(changes[0][1] === 6)
         {
             hot1.getCellMeta(changes[0][0],7).source=getStreets(changes[0][3]);
         }

         if($lastRow[4]!= null && $lastRow[5]!= null && $lastRow[6]!= null && $lastRow[7]!= null)
         {
             hot1.alter('insert_row');
             hot1.setDataAtCell([[$countRow,0,$countRow+1],[$countRow,1,getDate()],[$countRow,2,getTime()]]);
         }


            var hot1 = new Handsontable(example1, config);


    });
    }
}

Iam sure its some small problem I dont see but Iam struggling since hours

#2

Hi @hercules

afterChange is called for setDataAtCell so we get an infinite loop. If you still want to use the setDataAtCell I recommend using a helper flag that you can put inside an IF to break the loop.

#3

Thank you very much @aleksandra_budnik for the fast answer.

I deleted the setDataAtCell and still have the same issue (even deleted the whole afterChange Block, and yes of course deleted cache and checked the js with Dev Tools).
In Drupal you have to use once() because it will trigger JQuery multiple times and see two tables, but even then it freezes

    Drupal.behaviors.startTable = {
        attach: function () {

        var $row = drupalSettings.row;

            $(window).once().on('load', function () {

The problem is I even dont see any errors just an warning:
language is deprecated since version 1.6.0. Use culture instead although I use culture

Any other idea?

#4

The warning is set for the main .js file. It loads the en-US culture by default.
Is there any possibility to replicate the same behavior on JSFiddle?

#5

Hello aleksandra,

First of all thank you for the fast answer I found the solution and it was:

$result.push([
                            [$row[index]['nr']],[$row[index]['fah']],.....]

and should be
$result.push([ $row[index]['nr'],$row[index]['fah'],.....])
So there was an array in array in array, which defected my code, strange only that I did not get any warnings or errors.

#6

Oh, I see. Thank you for an update.
I guess that we can close the issue.

#7