logo
down
shadow

Meteor Handsontable example


Meteor Handsontable example

By : user2951893
Date : November 18 2020, 03:49 PM
Hope this helps The following example works as a reactive table that reads and writes data, including paste and autofill.
I'm not aware of a Meteor smartpackage that makes available the standard Handsontable API. (There is one smartpackage by Olragon, but it's for the jQuery API of Handsontable). You can add the files to your project directly fairly easily:
code :
// Remove "var" from Handsontable declaration to add to global scope
var Handsontable = function (rootElement, userSettings) {
 ...

// New code
Handsontable = function (rootElement, userSettings) {
 ...
<template name="handsontable">
<div class="handsontable" id="hot"></div>
</template>
Meteor.isClient {
 Template.handsontable.rendered = function () {
  var myData = [];  // Need this to create instance
  var container = document.getElementById("hot"); 
  var hot = new Handsontable(container,{  // Create Handsontable instance
    data: myData,
    startRows: 5,
    startCols: 5,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    afterChange: function (change, source) {  // "change" is an array of arrays. 
      if (source !== "loadData") {  // Don't need to run this when data is loaded
        for (i = 0; i < change.length; i++) {   // For each change, get the change info and update the record
            var rowNum = change[i][0]; // Which row it appears on Handsontable
            var row = myData[rowNum];  // Now we have the whole row of data, including _id
            var key = change[i][1];  // Handsontable docs calls this "prop"
            var oldVal = change[i][2];
            var newVal = change[i][3];
            var setModifier = {$set: {}};   // Need to build $set object
            setModifier.$set[key] = newVal; // So that we can assign 'key' dynamically using bracket notation of JavaScript object
            MyCollection.update(row._id,setModifier); 
        }               
      }
    }
  });  

  Tracker.autorun( function () {  // Tracker function for reactivity
      myData = MyCollection.find().fetch();  // Tie in our data
      hot.loadData(myData);
  });
 };
}
{_id: 'Hneb7LxFRptXCiL49',
 title: 'The Name of the Wind',
 author: 'Patrick Rothfuss',
 copies: 3 }
// replace at "colHeaders":
colHeaders: ['Title','Author','Copies'],
columns: [
  {data: 'title'},
  {data: 'author:},
  {data: 'copies'}
],
// ...


Share : facebook icon twitter icon
Meteor error, Handsontable not defined

Meteor error, Handsontable not defined


By : Daniel Tellez
Date : March 29 2020, 07:55 AM
should help you out This is likely a bug in the Handsontable package.
This line: https://github.com/olragon/meteor-handsontable/blob/master/lib/jquery.handsontable.full.js#L13
code :
var Handsontable = {
Handsontable = {
api.export("Handsontable");
Loading data correctly on handsontable with Meteor and blaze

Loading data correctly on handsontable with Meteor and blaze


By : Pieter Hillewaert
Date : March 29 2020, 07:55 AM
will help you The way I managed to do what I needed is by stopping the computation after the matrix gets rendered. The code is as follows:
code :
Template.connectivityMatrix.onRendered(function () {    
  this.autorun((computation) => {
    if (this.subscriptionsReady()) {    
      const currentScenario = Scenarios.findOne({_id: activeScenario});
      const currentTurn = currentScenario.turn;
      const numObj = ConnectivityMatrix.find({scenario_id: activeScenario, user_id: Meteor.userId(), turn: currentTurn}).count();

      var myData = [];  // Need this to create instance
      var container = document.getElementById('connectivity-matrix');

      var hot = new Handsontable(container, { // Create Handsontable instance
        data: myData,
        colHeaders: arrayRowsCols,
        rowHeaders: arrayRowsCols,
        height: '450',
        maxRows: numObj,
        maxCols: numObj,
        columns: columns,
        afterChange: function (change, source) {  // 'change' is an array of arrays.
          if (source !== 'loadData') {  // Don't need to run this when data is loaded
            for (i = 0; i < change.length; i++) {   // For each change, get the change info and update the record
              var rowNum = change[i][0]; // Which row it appears on Handsontable
              var row = myData[rowNum];  // Now we have the whole row of data, including _id
              var key = change[i][1];  // Handsontable docs calls this 'prop'
              var oldVal = change[i][2];
              var newVal = change[i][3];
              var setModifier = {$set: {}};   // Need to build $set object
              setModifier.$set[key] = newVal; // So that we can assign 'key' dynamically using bracket notation of JavaScript object
              ConnectivityMatrix.update(row._id, setModifier);
            }
          }
        }
      });

      myData = ConnectivityMatrix.find({scenario_id: activeScenario, turn: currentTurn, user_id: Meteor.userId()}, {sort: {created_at: 1}}).fetch();  // Tie in our data
      hot.loadData(myData);
      computation.stop();
    }
  });
});
HOT-in-HOT dynamic handsontable in handsontable getValue() function expression issue

HOT-in-HOT dynamic handsontable in handsontable getValue() function expression issue


By : mrahil
Date : March 29 2020, 07:55 AM
I hope this helps you . I figured that since the expression was dynamically created the issue lies in how the expression was created and how its scope was setup. After a good bit of research, I found a solution. The solution uses what is called a JavaScript Closure, which is a self-invoking function. Please add to, or make better if you can, I hope this helps someone along the way. I also asked Handsontable to add too their documentation.
You can see in the code below that the outer function is assigned the dynamic variable, and thus the scope changes so the inner function uses the otter variable instead of the variable in the scope of the dynamic Handsontable options configuration loop.
code :
if(data_arr[0][key][2]['cell_type'] == "handsontable" && data_table_1_col_headers_options_arr[key][0] != "NA")
{
    data_table_1_columns_arr[count]['handsontable'] = new Array();

    data_table_1_columns_arr[count]['handsontable']['colHeaders'] = data_arr[3][key][1][0];
    data_table_1_columns_arr[count]['handsontable']['autoColumnSize'] = true;
    data_table_1_columns_arr[count]['handsontable']['data'] = data_arr[3][key][0];

    var temp_field_value_to_use = data_arr[3][key][1][1];
    //// JavaScript Closure expression below. ////
    var hot_in_hot_function = (function ()
    {
        var field_use = temp_field_value_to_use;
        return function ()
        {
            var selection = this.getSelected();
            return this.getSourceDataAtRow(selection[0])[field_use];
        }
    })();

    data_table_1_columns_arr[count]['handsontable']['getValue'] = hot_in_hot_function;
}
Handsontable in Handsontable Dropdown Height Adjustment

Handsontable in Handsontable Dropdown Height Adjustment


By : cscheer
Date : March 29 2020, 07:55 AM
it should still fix some issue How to allow fixed height in this dropdown menu? (Column Car)
@handsontable/angular: how to create autocomplete or handsontable type with hot-column

@handsontable/angular: how to create autocomplete or handsontable type with hot-column


By : reena
Date : March 29 2020, 07:55 AM
With these it helps It might look something like this to get a basic autocomplete in your template
code :
<hot-table>
    <hot-column type="autocomplete"
                [source]="['somevalues','here']"
                [strict]="true/false"
    >
    </hot-column>
</hot-table>
shadow
Privacy Policy - Terms - Contact Us © ourworld-yourmove.org