Data Grid Selection

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

Documentation

Methods

Methods available to deal with the JavaScript grid selection

Method	Description

#### Main selection

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`

#### Secondary selections

setBorder	Create or update an existing selection with a defined color. `setBorder(x1: Number, y1: Number, x2: Number, y2: Number, selectionName: string, colorHex: string) : void`
getBorder	Get the selection border object. `getBorder(selectionName: string) : void`
resetBorders	Reset the selection by its name. `resetBorders(selectionName?: string, resetPosition: boolean) : void` Reset all exiting borders when selectionName is not defined.
refreshBorders	Refresh one or more selections. `refreshBorders(selectionName?: string) : void` Refresh all existing borders when selectionName is not defined.

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

Programmatic spreadsheet selection

Select all worksheet cells in the grid programmatically.

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

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

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZmJmZWRmZjE2ZThkMGM1Y2JhMGMwMGEwMjhkNjQ5MTVmYWQ1ZGMxODY1MDQwNGJhODFjNjlhZjMxZTIxYzNhOTNmNjRkNzQ3YTJmNjhmZDcxZDRjYjIwZDRlMzFhZDg3MjY0ZTYxOWYwMGJhNjJiNThiYzUwMGU4MDgwYzBjNDMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME5UZzJNVFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// 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>

Secondary borders

Create secondary borders on the spreasdheet.

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

<button id="createredbtn">Create new red selection</button>
<button id="createbluebtn">Create new blue selection</button>
<button id="resetbtn">Clear all selection</button>

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZmJmZWRmZjE2ZThkMGM1Y2JhMGMwMGEwMjhkNjQ5MTVmYWQ1ZGMxODY1MDQwNGJhODFjNjlhZjMxZTIxYzNhOTNmNjRkNzQ3YTJmNjhmZDcxZDRjYjIwZDRlMzFhZDg3MjY0ZTYxOWYwMGJhNjJiNThiYzUwMGU4MDgwYzBjNDMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME5UZzJNVFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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

document.getElementById("createredbtn").onclick = () => table[0].setBorder(1,1,2,2,'red-visit','#ff0000')
document.getElementById("createbluebtn").onclick = () => table[0].setBorder(3,3,4,4,'blue-visit','#0000ff')
document.getElementById("resetbtn").onclick = () => table[0].resetBorders()
</script>
</html>