handsontableangularjs-watch

Let handsontable treat numeric as numeric type

I have a piece of code which stringifies a handsontable: JSBin. Changing a cell value in the handsontable will change its corresponding string.

<html ng-app="app">
  <head>
    <script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
    <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
    <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
    <script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <hot-table hot-id="mytable" datarows="db"></hot-table>
      <br><br>
      <span>{{ data }}</span>
    </div>
  </body>
</html>

JavaScript:

function MainCtrl($scope, hotRegisterer) {
  $scope.db = [[5, 6], [7, 8]];

  $scope.$watch("db", function (newValue, oldValue) {
    console.log("$watch");
    var hot_instance = hotRegisterer.getInstance("mytable"); 
    $scope.data = hot_instance.getData();
  }, true)
}
MainCtrl.$inject = ['$scope', 'hotRegisterer'];

angular.module('app', ['ngHandsontable'])
  .controller('MainCtrl', MainCtrl)

However, if we put a new numeric value in the table, it will be considered as string in the array, which does not align with other value format of the array.

I don't know why handsontbale treats all cell values as string type by default. Is there a way of setting up such that new numeric cell value is treated as numeric type?

Edit 1: Following the answer of @acesmndr, I have done this. And I wanted to add a watcher to db to update setting.columns according to the number of the columns. However, I realise that if we set settings.columns, we could not add/remove columns any more by the contexte menu:

enter image description here

Does anyone have a solution?

Solution

  • You must set the settings for the columns to be numeric. Here is a working snapshot of your jsbin

    Apparently setting the type and invalidCellClassName setting in the main setting object applies for the entire table allowing you to add or remove columns unlike the column level setting that I suggested prior to this edit which disabled adding or removing columns. Updated snapshot of your jsbin with setting for entire table is here 

     function MainCtrl($scope, hotRegisterer) {
  $scope.db = [[5, 6], [7, 8]];
  $scope.settings = {
    type:  'numeric',
    invalidCellClassName: 'someCssClass'
  };
  $scope.$watch("db", function (newValue, oldValue) {
    console.log("$watch");
    var hot_instance = hotRegisterer.getInstance("mytable"); 
    $scope.data = hot_instance.getData();
  }, true)
}
MainCtrl.$inject = ['$scope', 'hotRegisterer'];

angular.module('app', ['ngHandsontable'])
  .controller('MainCtrl', MainCtrl)

    And add the settings to the hot-table

      <hot-table hot-id="mytable" datarows="db" settings="settings"></hot-table>