Question

My Problem

I want an interactive datagrid (like Excel/Numbers) within my RoR-app. The data being put in, should update a db-table-record.

Did some research and found a lot of Excel(/CSV) processors for importing and exporting .xls(x) and .csv files. Finally I found a data grid view based on JS, JQuery and html. Here. This is exactly what I need. The only thing is, I can’t get it to work within RoR.

What I tried:

Application.html.erb
I checked the file paths with ‘Safari Inspector’

<script src="assets/lib/jquery.min.js"></script>
<script src="assets/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="assets/dist/jquery.handsontable.full.css">

View

%div#exampleGrid

%script
  var myData = [
  ["", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
  ];

  $("#exampleGrid").handsontable({
  data: myData,
  startRows: 5,
  startCols: 5,
  minSpareCols: 1,
  //always keep at least 1 spare row at the right
  minSpareRows: 1,
  //always keep at least 1 spare row at the bottom,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
  });​

I tried the JS also in the Application.js but didn’t work either.

I’m using:
Ruby: 1.9.3p194
Rails: 3.2.8

Can someone point me in the right direction / help me out?
I’ve been trying for hours and just cannot get it to work.

A plain index.html with the same handsontable files did work for me.

Answer 1

Can you please specify what exactly doesn’t work and provide an error message? When I copy you code in my test app I get error Uncaught SyntaxError: Unexpected token ILLEGAL This happened because in you script there are some strange symbols. I retype this code manually and everything works fine for me. Here are my files(jquery.handsontable.full.js I place is assets/javascripts and jquery.handsontable.full.css I place in assets/stylesheets):
application.js:

//= require jquery
//= require jquery_ujs
//= require jquery.handsontable.full

application.css:

*= require_self
*= require jquery.handsontable.full

in index.html.erb:

<div id="exampleGrid"></div>
<script type="text/javascript">
var myData = [
   ["", "Kia", "Nissan", "Toyota", "Honda"],
   ["2008", 10, 11, 12, 13],
   ["2009", 20, 11, 14, 13],
   ["2010", 30, 15, 12, 13]
   ];

   $("#exampleGrid").handsontable({
   data: myData,
   startRows: 5,
   startCols: 5,
   minSpareCols: 1,
   //always keep at least 1 spare row at the right
   minSpareRows: 1,
   //always keep at least 1 spare row at the bottom,
   rowHeaders: true,
   colHeaders: true,
   contextMenu: true
   });
  </script>