I want to refresh a handsontable grid. I have some columns with a dropdown filled with data of my database. But in my page, I have a first grid which insert data in this database and I get them in my second grid. But as my second grid is not refresh, I can't get the last value I just insert in the first grid.

So how can I refresh the content of a handsontable please ?

EDIT :

I made a jsfiddle which illustrate my problem : / On my jsFiddle, it works and I can get the values when I push them in the array. But with my real application, and with a database, it doesn't work.

So instead of an array, I have this in my code (it works but it's not refreshed) :

columns:[
<?php 

    $conn_string = "host=localhost port=5432 dbname=test_postgre user=postgres password='1234'";
    $dbconn = pg_connect($conn_string);

    $sql = "SELECT ".$colonne." FROM public.".$tablevar."";
    $res = pg_query($sql) or die("Pb avec la requete: $sql");

    $data = pg_fetch_all($res);

    $indexedOnly = array();

    foreach ($data as $row) {
                $indexedOnly[] = array_values($row);
    }
    echo '{type:\'dropdown\',';
    echo 'source:'.json_encode($indexedOnly).'},';



?>]

I want to refresh a handsontable grid. I have some columns with a dropdown filled with data of my database. But in my page, I have a first grid which insert data in this database and I get them in my second grid. But as my second grid is not refresh, I can't get the last value I just insert in the first grid.

So how can I refresh the content of a handsontable please ?

EDIT :

I made a jsfiddle which illustrate my problem : http://jsfiddle.net/9onuhpn7/10/ On my jsFiddle, it works and I can get the values when I push them in the array. But with my real application, and with a database, it doesn't work.

So instead of an array, I have this in my code (it works but it's not refreshed) :

columns:[
<?php 

    $conn_string = "host=localhost port=5432 dbname=test_postgre user=postgres password='1234'";
    $dbconn = pg_connect($conn_string);

    $sql = "SELECT ".$colonne." FROM public.".$tablevar."";
    $res = pg_query($sql) or die("Pb avec la requete: $sql");

    $data = pg_fetch_all($res);

    $indexedOnly = array();

    foreach ($data as $row) {
                $indexedOnly[] = array_values($row);
    }
    echo '{type:\'dropdown\',';
    echo 'source:'.json_encode($indexedOnly).'},';



?>]

• javascript
• php
• handsontable

• i think what mpusarla makes sense. could you just us a jsfiddle? i'm not sure I understand what you're asking for – ZekeDroid Commented Jul 29, 2015 at 15:15
• @ZekeDroid I eddited my post – Erlaunis Commented Jul 30, 2015 at 7:38

4 Answers 4

Just call hot.render();, where hot refers to the Handsontable object.

Worked great for me.

I get it now. You want to dynamically update sources for dropdowns. That should be easy with the following code:

hot2.updateSettings({
    columns: [{
        type: 'dropdown',
        source: arrayTest
    }]
})

Make sure to add this after arrayTest has the new values and you should be set to go. Here's your fiddle with the line added in the right place.

Try setting the observeChanges option to true. This should detect the changes in the data source and render the grid again.

https://github.com/handsontable/handsontable/wiki/Options#constructor-options

Accepted answer didn't work for me, but following code worked fine.

let hot = new Handsontable(this.hotTableComponentTest.nativeElement, {
      data: [["","",""]]   ,
      ...
    });

if (value && value.length>0 && this.hot) {
      this.hot.getInstance().loadData(value);
      this.hot.getInstance().render();
    }