Data Grid Selection

This section is dedicated to all properties, events and methods for handling selection on the JavaScript data grid.

Documentation

Methods

Methods available to deal with the JavaScript grid selection

Method	Description
getHighlighted	Get the coordinates of the highlighted cells. `getHighlighted() : Array \| null`
getRange	Get the range description of the highlighted cells. `getRange() : String \| null`
selectAll	Select all cells. `selectAll() : void`
updateSelection	Select the cells from the coordinates of a DOM element. `updateSelection(e1: DOMElement, e2: DOMElement) : void`
updateSelectionFromCoords	Select the cells by coordinates. `updateSelectionFromCoords(x1: Number, y1: Number, x2: Number, y2: Number) : void`
resetSelection	Remove the selection. `resetSelection() : void`
isSelected	Verify if the coordinates given are included in the current selection. `isSelected(x: Number, y: Number) : Boolean`

Data Grid Events

Event	Description
onblur	`onblur(worksheet: Object) : void`
onfocus	`onfocus(worksheet: Object) : void`
onselection	`onselection(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, e: MouseEvent) : void`

Initial Settings

Property	Description
selectionCopy: boolean	Disable the clone selection.

Examples

Select all worksheet cells in the data grid programmatically.

<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

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

<br/>
<button id="selectallbtn">Select all</button>
<button id="updateselectionbtn">updateSelectionFromCoords(2,2,3,3)</button>

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('YTIzYzk5ODJiNDdkYmRjMjNkYjMzOWZmMzFjZmE3M2FhYTliMzA5MzZjODgyNjFjYjk1OWE3MDM1NTVkNWNhNzUyY2Q2ZWQ2MGYwMzA0MWJlODAwMmFiMzliYjc2MjMwY2M0MmUzZGNkNmNkYWQ5ZmUyZTk4NTg4MmYyZmQ1ODUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU1UWTBOREV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0ltTm9ZWEowY3lJc0ltWnZjbTF6SWl3aVptOXliWFZzWVNJc0luQmhjbk5sY2lJc0luSmxibVJsY2lJc0ltTnZiVzFsYm5Seklpd2lhVzF3YjNKMFpYSWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0lzSW5CeWFXNTBJaXdpYzJobFpYUnpJaXdpWTJ4cFpXNTBJaXdpYzJWeWRtVnlJaXdpYzJoaGNHVnpJaXdpWm05eWJXRjBJbDBzSW1SbGJXOGlPblJ5ZFdWOQ==');

// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
    }],
});

document.getElementById("selectallbtn").onclick = () => table[0].selectAll();
document.getElementById("updateselectionbtn").onclick = () => table[0].updateSelectionFromCoords(2,2,3,3);
</script>
</html>

Edit this page on GitHub