Refresh a handsontable

Question

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).'},';



?>]

i think what mpusarla makes sense. could you just us a jsfiddle? i'm not sure I understand what you're asking for — ZekeDroid, Jul 29 '15 at 15:15

score 10 · Answer 1 · answered Dec 31 '15 at 05:16

10

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

Worked great for me.

answered Dec 31 '15 at 05:16

Shimmy Weitzhandler

101,809
122
424
632

2

I'd also add that sometimes hot.render() may need to be called twice. (In my use case, the 1st call resized the HOT but the header columns and record columns were misaligned, so the 2nd call forced alignment). – KareemElashmawy Mar 12 '18 at 19:43

score 1 · Answer 2 · answered Jul 30 '15 at 16:37

1

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.

answered Jul 30 '15 at 16:37

ZekeDroid

7,089
5
33
59

Thanks, but I found what was wrong. As I get the data from a database with a sql request, even if I refresh the hot, the request doesn't execute twice. So I had to create an array with the data, like in the fiddle. And it works now. – Erlaunis Jul 31 '15 at 12:52

score 0 · Answer 3 · answered Jul 29 '15 at 13:56

0

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

answered Jul 29 '15 at 13:56

mpusarla

487
4
14

It doesn't seems to work even if it seems to be the thing that I'm looking for. – Erlaunis Jul 29 '15 at 14:04
I have this code, do you see where am I doing wrong ? var hot = new Handsontable(container, { data: data_parcelle_elementaire, stretchH: 'all', minSpareRows: 1, observeChanges : true, rowHeaders: false, colHeaders: false, contextMenu: true, height: 550, – Erlaunis Jul 29 '15 at 14:04
Can you try setting ColumnSorting to true. By default observeChanges is false but setting ColumnSorting to true is going to enable observeChanges. – mpusarla Jul 29 '15 at 14:17
Do you mean erase "observeChanges" and add "ColumnSorting" ? Or set both ? With the both of them, it doesn't work :/ – Erlaunis Jul 29 '15 at 14:21
If you can prepare a jsfiddle, that will help. – mpusarla Jul 29 '15 at 14:43
This option no longer appears in the [new documentation](http://docs.handsontable.com/Options.html#observeChanges), please provide a fiddle proof of concept. – Shimmy Weitzhandler Dec 31 '15 at 05:24

score 0 · Answer 4 · answered Aug 17 '18 at 04:38

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();
    }

Refresh a handsontable

4 Answers4

Linked