RESTful API: how can i use Handsontable methods (getData() i.e.) with ngHandsontable?

[Mintas]

I am trying to develop RESTful API using ngHandsontable. Can you tell me how can i use Handsontable methods (getData() i.e.) with ngHandsontable? It would be better to see some examples. I was trying to do this in simple Handsometable way (getting element by id and calling the function) but id didn't work.

[mkashifkhan]

Try table instance, attribute

[Mintas]

@mkashifkhan hi right now am doing this: < div id="mytable" > < here comes hottable >< /div > when i want to update datarows i do: $('#mytable').handsontable('refresh') but it doesnt work

[mkashifkhan]

@Mintas , hello, you have to bind instance with the actuall table instance, you cannot directly update table from JQuery when you use Angular,

$scope.bindedInstance; tag here

   < div id="table" hotInstance="bindedInstace" >

//now you have table instance , try to console it out, // you will get all internale functions through bindedInstance, console.log($scope.bindedInstance);

[Mintas]

@mkashifkhan
I'm sorry, but i didn't get it. I must do it like: $scope.bindedInstance = $('#mytable')\ ?? update: after that i must call the fuction i need like: $scope.bindedInstance.handsontable('getData') ? when im doing this i get no instance (it can be checked by debugging on the line 79 of handsontable.full.js: instance = $this.data.('handsontable') )

[Mintas]

i have a problems with updating data on my table: the control comes to ngHandsontable function INITIALIZE DATA where we have scope.$watch('datarows', function(newValue, oldValue) {}) so scope.datarows are actually updated, so do the scope.htSettings, but the changes are not rendered P.S. update: this problem can easily be solved by commenting call of "if" in this function/

[achyutjhunjhunwala]

@Mintas Yes even i am facing the same issue and only fix i could think of is commenting the if condition. But i want to understand why is the If condition present there in 1st place.

[ghost]

@Mintas - i have fixed the issue by doing this -

Initialize $scope.itemData = []; $scope.minSpareRows = 0;

Where itemData is the model binded to datarows

[asadabbas88]

@Mintas,

I figured out a way to do this

I created an afterChange listener and then called this.getData() over it.

<hot-table settings="{rowHeaders: false, contextMenu: true, afterChange: afterChange}" colHeaders="false" datarows="model.handsontableData" height="300" / > $scope.afterChange = function () { $scope.model.handsontableData = this.getData(); }

[Mintas]

@asadabbas88 , I've got new problem. But i don't know how to deal with it. While debugging i see the changes of my $scope.reportTable variable (it turns from [ ] into data, obtained from server), but in ngHandsontable workflow this variable is still an empty array [ ]

[asadabbas88]

Can you share further code of how you have used the directive and how the data is changed?

[Mintas]

sry, but i haven't web access permissions on the pc i'm working. In some words: I have a index.jsp as a wrap, then I placed into my home.html (HomeController.js) some buttons with routing (navbar from index.jsp is presented on every subpage). On index.jsp i have 2 buttons: calculate and export. Export button has ng-click="export()" from ReportController.js: it runs server logic and allows to download report. Calculate button has ng-click="show()" from same ReportController.js: it runs server logic, obtains json data from it, and parses it into format for datarows of my hot-table. So while debugging i see that data came, parsed correctly into right variable, but when ng-handsontable watches for the scope it can't see this changes for some reason (that I don't get at all), as a proof i can say that the controll doesn't come into $watch(datarows) section from ngHandsontable.js (yes, i set ng-controller="ReportController" for ng-click section)

But I have solved this problem by this cheat: I have created hidden number input, and made my Calculate button ng-click increase this number input value. I have also changed my ReportController to have $watch(myNumberInput) and it calls my show() function => PROFIT it works fine. I don't rly know why. But it helped. And when I saw that my mind has blown up.

[victorsosa]

Please use http://jsbin.com for you example code

[asafusan]

In the ngHandsontable.js file you can add your instance to refer to. I did it by adding the following code line on row 184 : row 183 scope.hotInstance = settingFactory.initializeHandsontable(element, scope.htSettings); row 184 window.handsTableInstance = scope.hotInstance;

Row 183 exists already. Then you can invoke all the regular methods. However, as you can see, this method is adding a global variable. Didn't find a better way yet. I'm sure there is though.

[mudassir0909]

Well, here is a better way after peeking into the source code

Add a hot-id attribute

<hot-table hot-id="foo"
                 ....
</hot-table>

inject the service hotRegisterer in your controller

You can now access your instance using

var hot_instance = hotRegisterer.getInstance("foo"); 
var data = hot_instance.getData();

[AMBudnik]

I think that we can close this issue as it hasn't been updated for a long time.