EzDevInfo.com

Scrollbar does not show up in the new HandsOnTable version

I have recently upgraded from 0.8.23 to 0.10.3 and I am facing a strange problem - the vertical scrollbar is not showing up.

I have attached 2 screenshots from the same page (one is running 0.8.23 and the other 0.10.3)

0.8.23

0.10.3

The code is the same.

How to set dropdown width in handsontable

I am trying to set width of handsontable dropdown to be according to the lookup data width, not column width. How can this be achieved?

See picture below please. Dropdown is too narrow to fit lookup data.

Retrieve data from handsontable to Struts2 Action via JSON not working

I am using struts2-json plugin to generate JSON data and Ajax to populate table (handsontable) with data from that JSON (according to the source).

Now, I need to retrieve data from table to Struts2 Action using Ajax by JSON. First I've implemented populating table with data passed by JSON from Struts2 Action to Handsontable, that was quite easy and it works. But why save do not work as you can see in attached code below?

As I see in a firebug the POST is sent and in debug the request is retrieved in my JSONSaveAction action but the field data is not being populated with JSON data, why? Data shouldn't be binded to java object automatically by struts2-json plugin? What am I doing wrong?

In handsontable part the function handsontable.getData() is responsible for getting whole data from table. So I am using it like this but without success:

$.ajax({
        url: "../json/saveJSONDataAction.action",
        data: {data: handsontable.getData()}, //returns all cells' data
        dataType: 'json',
        type: 'POST',
        success: function (res) {
            if (res.result === 'ok') {
                $console.text('Data saved');
            }
            else {
                $console.text('Save error');
            }
        }
    });

The function handsontable.getData() really retrieve all data what I checked but instead of that the data is not binded to java object List<Report> data in my JSONSaveAction action. Do you know why?

Here is screenshot with my table and firebug info after POST request:

Action sending JSON to handsontable (working fine):

@ParentPackage("json-default")
@Action(value="getJSONDataAction")
@Result(name="success", type="json")
public class JSONDataAction extends ActionSupport {
    private static final long serialVersionUID = 1L;

    private List<Report> data = new ArrayList<Report>();

    public JSONDataAction(){
        data.add(new Report(1, "Chris", true, "2008-01-01", "orange"));
        data.add(new Report(2, "Kate", false, "2013-03-03", "blue"));
        data.add(new Report(3, "Blade", true, "2013-05-03", "black"));
        data.add(new Report(4, "Zack", false, "2013-01-01", "yellow"));
    }

    public String execute() {
        return SUCCESS;
    }

    public List<Report> getData() {
        return data;
    }

    public void setData(List<Report> data) {
        this.data = data;
    }
}

JSON which is sent to populate table generated automatically:

{"data":[
    {"active":true,"color":"orange","date":"2008-01-01","id":1,"name":"Chris"},
    {"active":false,"color":"blue","date":"2013-03-03","id":2,"name":"Kate"},
    {"active":true,"color":"black","date":"2013-05-03","id":3,"name":"Blade"},
    {"active":false,"color":"yellow","date":"2013-01-01","id":4,"name":"Zack"}]
}

Action retrieving data from table via JSON (not working):

Here the field List<Report> data is always null, is not populated with data from JSON :(

@ParentPackage("json-default")
@Action(value="saveJSONDataAction")
@Result(name="success", type="json")
public class JSONSaveAction extends ActionSupport {
    private static final long serialVersionUID = 1L;

    private List<Report> data;

    public JSONSaveAction(){
    }

    public String execute() {
        try {
            JSONObject jsonData = (JSONObject) JSONSerializer.toJSON(data);
            String name = jsonData.getString("name");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return SUCCESS;
    }

    public List<Report> getData() {
        return data;
    }

    public void setData(List<Report> data) {
        this.data = data;
    }
}

Report class:

public class Report {
    private int id;
    private String name;
    private boolean active;
    private String date;
    private String color;

    //getters and setters
}

Load & Save data into and from table via JSON:

<div id="spreadsheet">
    <p>
        <button type="button" name="load">Load</button>
        <button type="button" name="save">Save</button>
    </p>
</div>
<div id="console" class="console"></div>

<script>
    var $container = $("#spreadsheet");
    var $console = $("#console");
    var $parent = $container.parent();
    $container.handsontable({
        startRows: 4,
        startCols: 20,
        rowHeaders: true,
        colHeaders: true,
        contextMenu: true,
        columns: [
            {data: "id", type: 'text'},
            {data: "name", type: 'text'},
            {data: "active", type: 'checkbox'},
            {data: "date", type: 'date'},
            {data: "color",
                type: 'autocomplete',
                source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
            }
        ]
    });
    var handsontable = $container.data('handsontable');

    $parent.find('button[name=load]').click(function () {
        $.ajax({
            url: "../json/getJSONDataAction.action",
            dataType: 'json',
            type: 'GET',
            success: function (res) {
                handsontable.loadData(res.data);
                $console.text('Data loaded');
            }
        });
    });

    $parent.find('button[name=save]').click(function () {     
        $.ajax({
            url: "../json/saveJSONDataAction.action",
            data: {data: handsontable.getData()}, //returns all cells' data
            dataType: 'json',
            type: 'POST',
            success: function (res) {
                if (res.result === 'ok') {
                    $console.text('Data saved');
                }
                else {
                    $console.text('Save error');
                }
            },
            error: function () {
                $console.text('Save error.');
            }
        });
    });
</script>

Please help me how to retrieve data from table to java object correctly, because it really blocked me. I do not know what I am doing wrong...

Big thanks for any input!

AngularJS and Handsontable: How to think about data binding between datacolumn elements

I am trying to rewrite a JS/jQuery SPA using AngularJS. The SPA is an item editing grid using the amazing Handsontable. I was delighted to see that there is an AngularJS version in the works, and that, for the most part, it works just as expected.

However, I'm having a hard time figuring out how to do something I am doing in jQuery in AngularJS. The grid has (among others) 3 columns, one of which is dependent on the other two. The three columns are cost, selling price and margin ( which is (1 - (cost / price)) * 100 ). I can do the math in the controller and pass the margins into the $scope.items variable for the initial loading, but it obviously does not update when you change the cost or price columns. It seems like the perfect place to do two-way data binding, but I can't figure out how to bind the datacolumn value of margin to the value of two other rows. I feel like there is an obvious way to do this, but since I'm new to AngularJS, I thought I might throw it out to the community.

Thanks in advance!

Edit:

So after playing around with some of the answers, I want to refine my question a bit to get to the heart of the matter. I have a REST API serving a JSON document that contains arrays of items from an online point of sale service. Here is a sample with dummy data:

{ '@attributes': {'count':10}, 'Item': [
  { 'customSku':'sampleItem1'
  , 'description':'Sample Item, first'
  , 'defaultCost':'10.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'17.99', 'useType':'Default'}
    , {'amount':'19.99', 'useType':'MSRP'}
    ]}
  }
, { 'customSku':'sampleItem2'
  , 'description':'Item, Sample, 2nd'
  , 'defaultCost':'20.00'
  , 'Prices': {'ItemPrice':[
      {'amount':'29.99', 'useType':'Default'}
    , {'amount':'39.99', 'useType':'MSRP'}
    ]}
  }
]}

I'm not joking that the data is structured like this, it totally is. Anyway.

Right now, I am passing this to the view in my controller like this: $scope.items = JSON.parse(request.responseText);. How do I pass the function: $scope.getMargin = function() { return (1 - (cost / price)) * 100 } to the view in such a way that cost and price are scoped to the correct item? I feel like I am really close to getting it, but I haven't quite gotten there. Thanks to the answerers so far!

Edit 2:

Plunker here, as requested!

Writing compound editors in handsontable

In this example you can cancompound cell editors driving multiple fields from one cell.
http://mleibman.github.com/SlickGrid/examples/example3a-compound-editors.html

I am wondering if ti is possible to make it also for jquery-handsontable.

Any hints how to make it by using handsontable?

Thanks

Conditionally highlight row in handsontable based on a cell value

I have several rows of data. One of the columns is an error flag. If the error flag is true, I want to change the background color of the entire row. How would i do that?

Upload jQuery Handsontable input

What is the best way to upload data entered by user in jQuery Handsontable back to Server to be saved into database?

The existing onChange callback seems to be very verbose to save input data using AJAX especially if user insert new data row above existing one. Looking for functionality to upload input data after complete the editing using Handsontable or jQuery

Here is the full code using jQuery to loop the input data and dump into text box in JSON format then submit to server. This process look ugly. looking for a cleaner way..

$('#btnGo').click(function() {

    var rowList = new Array();
    $("table tr").each(function() {
        var colList = new Array();
        $("td", this).each(function() {
            colList.push($(this).text());
        });
        rowList.push(colList);
    });
    $('#simple').val(JSON.stringify(rowList));
    console.log(rowList);
});​

Select entire Handsontable column with icon click?

I want each column in my table to have an icon that when clicked, will select the entire column. I have this working for the first (not fixed) column with a button, but cannot get the for each icon working. Also, any idea why the last column (2018) has more width and the horizontal scroll never seems to meet the end? Thanks in advance.

jQuery

container.handsontable("loadData", getData());

$("button#selectFirst").on('click', function () {
    //container.handsontable("selectCell", 0, 4)
    container.handsontable("selectCell", 0, 4, 5, 4)
});

http://jsfiddle.net/D4Kx3/5/

Make Handsontable autocomplete popup wider than the column

The Customer ID column is setup to use autocomplete. The autocomplete values concatenates various customer information together, to aid the user in selecting the correct one. Once selected, the Customer ID is put into the grid.

I cannot figure out how to make the autocomplete popup wider so that it fits the concatenated information.

This is what it needs to look like, which I achieved by tinkering with the elements after they were rendered. Ideally, it would be just wide enough to fit the content.

how to disable a particular column using handsontable in handsontable

How to disable a particular column using handsontable in handsontable.I want first column only editable other three columns get disable.I'm using readonly true for three columns but it's not work how to disable....

     columns: [
              {
     type:'handsontable',
     handsontable: {

      colHeaders: ['EmployeeNo','EmployeeName','Department','Designation'],
      data: manufacturerData,
      columns:[{},{readOnly: true},
          {
         readOnly: true
            },
          {
        readOnly: true
          }]
         }

         },
         {}]

Handsontable Replace autocomplete values with key before posting

I am using HandsOnTable to make editing database tables more interactive on my site.

HandsOnTable fulfils nearly all my requirements except that some columns in my database actually store foreign keys rather than local string values.

In the UI I would like these columns to appear as dropdown menus where the user selects a readable value mapped to the previously mentioned foreign key (I.e. something like an HTML name/value select).

Unfortunately HandsOnTable does not have such a cell type. The closest thing to it is autocomplete. This allows me to create a dropdown, but it only contains values; no corresponding keys. Here is how it is created:

"source": ["Jebediah", "Bob", "Bill", "Buzz"]

So what I am planning is to send two Json strings from the server:

One containing the parameters needed by HandsOnTable to render the table:

{
    "data": [
        { "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
        { "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
        { "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
        { "ID": 4, "Description": "Wood", "Volume": '513',  "Customer": "Buzz" }
    ],
    "columns": [
        { "data": "ID", "type": "numeric" },
        { "data": "Description", "type": "text"},
        { "data: "Volume", "type": "numeric" },
        { "data": "color", "type": "autocomplete", "strict": "true",
            "source": ["Jebediah", "Bob", "Bill", "Buzz"]}
    ]
}

The second mapping keys to values

{
    "mappings": [
        {"key": 0, "value": "Jebediah"}, 
        {"key": 0, "value": "Bob"},
        {"key": 0, "value": "Bill"}, 
        {"key": 0, "value": "Buzz"}
    ]
}

So far so good. Now for the tricky part:

HandsOnTable has a function (getData()) that allows me to retrieve the tables data as a Json string ready to be sent back to the server:

var jdata = myHandsOnTable.getData();

Where jdata would look something like this:

"data": [
    { "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
    { "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
    { "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
    { "ID": 4, "Description": "Wood", "Volume": '513',  "Customer": "Buzz" }
]

Now before posting, I would like to replace that values for the Customer node with their matching pair key within the mappings json string.

How can I best achieve this in JavaScript/JQuery?

Is there a function that works something as follows?:

jdata.replaceNode('node', mappings)

Thanks

Not able to delete rows using HandsOnTable

I am not able to remove rows with the latest version. I am using version 0.9.9.

This is what I do:

var $container = $("#add-table");
$container.handsontable(options);

var handsontable = $container.data('handsontable');
var data = handsontable.getData();
if(data.length > 1 && handsontable.isEmptyRow(data.length-1)) {
    handsontable.alter('remove_row', parseInt(data.length-1));
}

There was a similar question on Handsontable delete multiple rows but that does not solve my purpose. The fiddle on this link does not work with the solution provided.

Any help would be appreciated.

When using Handsontable how to force a selected cell into edit mode?

Handsontable provides some nice hooks for when a cell is selected but I can't seem to figure out way to get it to allow me to force a cell into edit mode when it has been selected.

I can detect the cell selection like this:

Handsontable.PluginHooks.add( 'afterSelection', function( row, column ) {
    var current_td = this.getCell( row, column );
});

And from there I can even obtain the cell element that was selected. But from there I can't seem to trigger the cell into edit mode (where it has an actively selected textarea field inside of it). This is normally triggered by a double click. Doing the obvious doesn't seem to work:

Handsontable.PluginHooks.add( 'afterSelection', function( row, column ) {
    var current_td = this.getCell( row, column );

    $(current_td).dblclick();
});

Anyone else ever done this or have thoughts on how I might get it to work?

Disabled inputs in bootstrap. How to apply it to a different TAG?

By using disabled attribute on an input is possible to prevent user input and trigger a slightly different look.
Here is the demo http://jsfiddle.net/D2RLR/3023/

Let's suppose I want to apply the same style to a different TAG like a table.
In fact, I am using handsontable to generate an Excel-like data grid editor.
How can I apply disabled attribute in the following context (TAG like a table)?

Here is the demo using handsontable and bootstrap http://jsfiddle.net/D2RLR/3025/

Is there any excel-like grid solution for AngularJS

I found ngHandsontable very satisfying.

http://handsontable.com/

However, it does not support inserting columns which Handsontable supports. So I'm wondering if there is any other solution that is similar to ngHandsontable but also supports dynamic columns.

Thanks in advance.