Refresh a handsontable
Asked Answered
T

4

7

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



?>]
Totem answered 29/7, 2015 at 13:44 Comment(2)
i think what mpusarla makes sense. could you just us a jsfiddle? i'm not sure I understand what you're asking forUtoaztecan
@Utoaztecan I eddited my postTotem
R
10

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

Worked great for me.

Rocketry answered 31/12, 2015 at 5:16 Comment(1)
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).Rosol
U
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.

Utoaztecan answered 30/7, 2015 at 16:37 Comment(1)
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.Totem
C
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

Creepy answered 29/7, 2015 at 13:56 Comment(6)
It doesn't seems to work even if it seems to be the thing that I'm looking for.Totem
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,Totem
Can you try setting ColumnSorting to true. By default observeChanges is false but setting ColumnSorting to true is going to enable observeChanges.Creepy
Do you mean erase "observeChanges" and add "ColumnSorting" ? Or set both ? With the both of them, it doesn't work :/Totem
If you can prepare a jsfiddle, that will help.Creepy
This option no longer appears in the new documentation, please provide a fiddle proof of concept.Rocketry
C
0

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();
    }
Casaubon answered 17/8, 2018 at 4:38 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.