Star
Back to Examples

Handling events


Various tracking javascript methods

Binding events on your javascript spreadsheet.

See a list of all event handlers




Log:



Source code

<html>
<script src="https://bossanova.uk/jspreadsheet/v4/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var changed = function(instance, cell, x, y, value) {
    var cellName = jspreadsheet.getColumnNameFromId([x,y]);
    $('#log').append('New change on cell ' + cellName + ' to: ' + value + '
');
}

var beforeChange = function(instance, cell, x, y, value) {
    var cellName = jspreadsheet.getColumnNameFromId([x,y]);
    $('#log').append('The cell ' + cellName + ' will be changed
');
}

var insertedRow = function(instance) {
    $('#log').append('Row added
');
}

var insertedColumn = function(instance) {
    $('#log').append('Column added
');
}

var deletedRow = function(instance) {
    $('#log').append('Row deleted
');
}

var deletedColumn = function(instance) {
    $('#log').append('Column deleted
');
}

var sort = function(instance, cellNum, order) {
    var order = (order) ? 'desc' : 'asc';
    $('#log').append('The column  ' + cellNum + ' sorted by ' + order + '
');
}

var resizeColumn = function(instance, cell, width) {
    $('#log').append('The column  ' + cell + ' resized to width ' + width + ' px
');
}

var resizeRow = function(instance, cell, height) {
    $('#log').append('The row  ' + cell + ' resized to height ' + height + ' px
');
}

var selectionActive = function(instance, x1, y1, x2, y2, origin) {
    var cellName1 = jspreadsheet.getColumnNameFromId([x1, y1]);
    var cellName2 = jspreadsheet.getColumnNameFromId([x2, y2]);
    $('#log').append('The selection from ' + cellName1 + ' to ' + cellName2 + '
');
}

var loaded = function(instance) {
    $('#log').append('New data is loaded
');
}

var moveRow = function(instance, from, to) {
    $('#log').append('The row ' + from + ' was move to the position of ' + to + ' 
');
}

var moveColumn = function(instance, from, to) {
    $('#log').append('The col ' + from + ' was move to the position of ' + to + ' 
');
}

var blur = function(instance) {
    $('#log').append('The table ' + $(instance).prop('id') + ' is blur
');
}

var focus = function(instance) {
    $('#log').append('The table ' + $(instance).prop('id') + ' is focus
');
}

var paste = function(data) {
    $('#log').append('Paste on the table ' + $(instance).prop('id') + '
');
}

var data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data:data,
    rowResize:true,
    columnDrag:true,
    columns: [
        { type: 'text', width:'200' },
        { type: 'text', width:'100' },
        { type: 'text', width:'100' },
        { type: 'calendar', width:'100' },
    ],
    onchange: changed,
    onbeforechange: beforeChange,
    oninsertrow: insertedRow,
    oninsertcolumn: insertedColumn,
    ondeleterow: deletedRow,
    ondeletecolumn: deletedColumn,
    onselection: selectionActive,
    onsort: sort,
    onresizerow: resizeRow,
    onresizecolumn: resizeColumn,
    onmoverow: moveRow,
    onmovecolumn: moveColumn,
    onload: loaded,
    onblur: blur,
    onfocus: focus,
    onpaste: paste,
});
</script>
</html>

Global Super event

One method to handle all events on the online spreadsheet.

NOTE: Open the console to see the events.