Using Handsontable with Ember

Question

I'm able to fetch Ember-Data models to Handsontable but I'm not sure how to save data put into a Handsontable back to Ember-Data. This is what I came up with to fetch Ember-Data to a Handsontable:

App.ChapterView = Ember.View.extend({
  templateName : 'statVals',
  tagName: 'div',
  classNames: ['dataTable'],
  insertTable: function(){
    var data = this.get('controller.model.content');
    var divElement = jQuery('.dataTable');
    divElement.handsontable({ 
      startRows: 3,
      data: data,
      columns: [
        {data: "id"},
        {data: "_data.location"},
        {data: "_data.page"},
      ],
      minSpareRows: 1
    });
  }.on('didInsertElement')
});

I find the following on gitHub: https://github.com/bradparker/ember-handsontable

My goal is to have a spreadsheet like way to show and save data in my web app. Handsontable seems to fit the bill but maybe I should use something else with Ember?

Answer 1

Here my component. It is working but I need to modify it so it does not access Ember Data Store nor save records directly. I plan to update this post once I have a true component.

App.HandsOnComponent = Ember.Component.extend({
  tagName: 'div',
  classNames: ['dataTable'],

  //create a unique Div ID for each chart
  tableDivID: function() {
      var rand = String(Math.random());
      var randMod = rand.split('.').join("");
      return 'table' + randMod + 'div';
  }.property(),


  //Insert the Handsontable
  insertTable: function(){
    var chapter = this.get('chapter');
    var statData = this.get('chapter.statData');        
    var divID = this.get('tableDivID');
    var divIDSelector = '#' + divID;
    var divElement = jQuery(divIDSelector);
    var _this = this;

    if (typeof(chapter.get('statData')) == 'undefined') {
      chapter.set('statData', [
          [0, 0],
        ]);
      chapter.save();
    }


    //Constructor for the Handsontable
    divElement.handsontable({ 
      startRows: 2,
      data: statData,
      stretchH: 'last',
      fixedRowsTop: 0,
      colHeaders: ['Date', 'Value'],


      cells: function (row, col, prop) {
        var cellProperties = {};
        var RowRenderer = function(instance, td, row, col, prop, value, cellProperties) {
          Handsontable.renderers.TextRenderer.apply(this, arguments);
          td.style.fontWeight = 'normal';
          td.style.color = '#FFFFFF';
          td.style.background = 'rgba(255, 255, 255, 0.3)';
          //td.style.border-color = '#FFFFFF';
        };
        return cellProperties;
      },

      columns: [
        {
          //column options for the first column
          type: 'date',
          dateFormat: 'yy/mm/dd',
          allowInvalid : false,
        },
        {
          type: 'numeric',
          Format: '0,0.00',
          allowInvalid : false,
        },
      ],

      minSpareRows: 1,

      afterChange: function (change, source) {
        if (source === 'loadData') {
          return; //don't save this change
        }
        var htInstance = $(divIDSelector).handsontable('getInstance');
        //var statData = chapter.get('statData');
        var statData = htInstance.getData();
        chapter.set('statData', statData);
        chapter.save();
      },


    });
  }.on('didInsertElement'),

  actions: {
    saveStatVals: function() {
      var store = this.get('storeName');
      var chapter = store.getById('chapter', chapterId);
      var handsontable = $('.dataTable').handsontable('getInstance');
      var dataTable = handsontable.getData();
      var _chapter = this.get('controllers.chapter');
      var _chapterId = _chapter.get('id');
      var chapter = this.store.getById('chapter', _chapterId);
          chapter.get('cont').pushObject(dataTable);
          chapter.save();
    },
  },      
});