Save Button in a row

[pete.s...@googlemail.com]

At the moment I'm using auto save but I would rather have a button in a column to save a row when the user has finished entering.

I've tried adding custom html to have a button in a column but handsontable captures all the events.

Is there a way to have a save button in a column?

[Matt Vagnoni]

I don't think so.  I think the best you could do is place a button centered over a column.  There's a few events (e.g. afterColumnResize) that'd probably help with handling all that jaz.  I admit, its something I've been looking into myself for other reasons.  

https://github.com/handsontable/jquery-handsontable/wiki/Events

[trebuchetty]

I have a button renderer for this:

var buttonRenderer = function (instance, td, row, col, prop, value, cellProperties) {

                Handsontable.renderers.TextRenderer.apply(this, arguments);

                var $td = $(td);

                ...

                var rowData = instance.getDataAtRow(row);

                $td.html('<button class="btn btn-default btn-xs saveBtn" data-rowIndex="' + row + '" >Save</button>');

            }

then an onClick event handler for the "saveBtn" class.

[trebuchetty]

Mine's actually a bit more complicated than that, as I check to see if the item has already been saved and adjust the button accordingly, but that should give you the general idea.

[pete.s...@googlemail.com]

Thank you everyone for pointing me in the right direction.

I've added a column to the end of my handsontable:

{ data: "button", renderer: "html", readOnly: true }

In the "afterChange: function (change, source)"

I added:

row = change[0];
thisrow = row[0];
if (row[1] == "button") return
obj = data[thisrow];
var btn = '<input type="button" class="btn btn-primary btn-sm" value="save">'
$('#example1').handsontable("setDataAtCell", thisrow, 3, btn);

This adds a button to the last column when a cell is edited. I haven't bothered to check if the button is already there.

Finally, I capture the selection of the button cell:

Handsontable.PluginHooks.add('afterSelection', function (row, column) {
var current_td = this.getCell(row, column);
if (column != 3) return;
$('#example1').handsontable("setDataAtCell", row, 3, "");
// save a row here
});

You'll need to add the code to save the row.

[dmvi...@gmail.com]

do you happen to have a demo of this? JsFiddle or something?

[Pete Suffolk]

Hi

I don't have an example as I switched to using bootgrid and modal popups for the edits.

Regards

Pete

--
You received this message because you are subscribed to a topic in the Google Groups "Handsontable" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/handsontable/pEkDpJA3M3k/unsubscribe.
To unsubscribe from this group and all its topics, send an email to handsontable+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.