This section provides a comprehensive guide on the properties, events, and methods for managing the cell selection and selection borders in the JSS data grid.
Documentation
Methods
The following methods handle the selections in the JSS data grid.
Method
Description
Update the main selection
selectAll
Select all cells available in the data grid. selectAll() : void
updateSelection
Selects all cells based on the coordinates of the specified DOM elements. updateSelection(e1: DOMElement, e2: DOMElement) : void
updateSelectionFromCoords
Select all cells based on the given coordinates. updateSelectionFromCoords(x1: Number, y1: Number, x2: Number, y2: Number) : void
resetSelection
Remove the selection. resetSelection() : void
Get information from the main selection
isSelected
Verify if the coordinates given are included in the current selection. isSelected(x: Number, y: Number) : Boolean
getSelection
Get the coordinates of the main selection in order. getSelection() : Array | null
getHighlighted
Get the coordinates of the highlighted cells. getHighlighted() : Array | null
getRange
Get the range description of the highlighted cells. getRange() : String | null
getSelectedColumns
Get the selected columns. getSelectedColumns(visibleOnly: Boolean) => Array
getSelectedRows
Get the selected rows. getSelectedRows(visibleOnly: Boolean) => Array
getSelected
Get the worksheet selected cell names or objects.
@param {Boolean?} columnNameOnly: To get only the cell names as string (true). Get the cell objects (false).
@param {Boolean} ignoreHidden: Exclude hidden cells (true). Bring all cells (false) getSelected(columnNameOnly: Boolean, ignoreHidden: Boolean) => []
Borders or secondary selections
setBorder
Create or update an existing selection with a defined color. setBorder(x1: Number, y1: Number, x2: Number, y2: Number, name: string, colorHex: string) : void
getBorder
Get the selection border object. getBorder(selectionName: string) : void
resetBorders
Reset the selection by its name. Reset all exiting borders when selectionName is not defined. resetBorders(selectionName?: string, resetPosition: boolean) : void
refreshBorders
Refresh one or more selections. Refresh all existing borders when selectionName is not defined. refreshBorders(selectionName?: string) : void
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDUwN2VhMzdjNGU4MzMxYjM5NzhiNDQwN2MwZDRiY2YzNTJhMDZhYjFmODA4NjU0MWYwMTJmMGZlYzgxYWY4ZTViNzlmNTIzOTdjYmQ4ZGQxMTZkYTY4Mjg2YmJmMTljM2ZiNDIxMTM3YzljZTVmYjJkMGQ4ZWQxYzljNTExMzgsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTkRZeU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `
<div #spreadsheet></div>
<input type="button" value="Select all"
(click)="this.worksheets[0].selectAll()} />
<input type="button" value="Select coords (2,2,3,3)"
(click)="this.worksheets[0].updateSelectionFromCoords(2,2,3,3)} />`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
minDimensions: [6,6],
}
]
});
}
}
Secondary borders
Create secondary borders on the spreadsheet.
JavaScript example
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/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 onclick="table[0].setBorder(1,1,2,2,'red-visit','#ff0000')">Create new red selection</button>
<button onclick="table[0].setBorder(3,3,4,4,'blue-visit','#0000ff')">Create new blue selection</button>
<button onclick="table[0].resetBorders()">Clear all selection</button>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDUwN2VhMzdjNGU4MzMxYjM5NzhiNDQwN2MwZDRiY2YzNTJhMDZhYjFmODA4NjU0MWYwMTJmMGZlYzgxYWY4ZTViNzlmNTIzOTdjYmQ4ZGQxMTZkYTY4Mjg2YmJmMTljM2ZiNDIxMTM3YzljZTVmYjJkMGQ4ZWQxYzljNTExMzgsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTkRZeU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
var table = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [6,6],
}],
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'MDUwN2VhMzdjNGU4MzMxYjM5NzhiNDQwN2MwZDRiY2YzNTJhMDZhYjFmODA4NjU0MWYwMTJmMGZlYzgxYWY4ZTViNzlmNTIzOTdjYmQ4ZGQxMTZkYTY4Mjg2YmJmMTljM2ZiNDIxMTM3YzljZTVmYjJkMGQ4ZWQxYzljNTExMzgsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTkRZeU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<>
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet minDimensions={[6,6]} />
</Spreadsheet>
<button value="Create new red selection"
onClick={() => spreadsheet.current[0].setBorder(1,1,2,2,'test1','#ff0000')} />
<button value="Create new blue selection"
onClick={() => spreadsheet.current[0].setBorder(3,3,4,4,'test2','#0000ff')} />
<button value="Clear all selection"
onClick={() => spreadsheet.current[0].resetBorders()} />
</>
);
}
Vue example
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :minDimensions="[6,6]" />
</Spreadsheet>
<input type="button" @click="setBorder(1,1,2,2,'test1','#ff0000')" value="Create a new red selection" />
<input type="button" @click="setBorder(3,3,4,4,'test2','#0000ff')" value="Create a new blue selection" />
<input type="button" @click="resetBorders" value="Clear all selection" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'MDUwN2VhMzdjNGU4MzMxYjM5NzhiNDQwN2MwZDRiY2YzNTJhMDZhYjFmODA4NjU0MWYwMTJmMGZlYzgxYWY4ZTViNzlmNTIzOTdjYmQ4ZGQxMTZkYTY4Mjg2YmJmMTljM2ZiNDIxMTM3YzljZTVmYjJkMGQ4ZWQxYzljNTExMzgsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTkRZeU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
setBorder() {
this.$refs.spreadsheet.current[0].setBorder(...arguments);
},
resetBorders() {
this.$refs.spreadsheet.current[0].resetBorders();
},
},
data() {
return {
// License
license: license,
};
}
}
</script>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MDUwN2VhMzdjNGU4MzMxYjM5NzhiNDQwN2MwZDRiY2YzNTJhMDZhYjFmODA4NjU0MWYwMTJmMGZlYzgxYWY4ZTViNzlmNTIzOTdjYmQ4ZGQxMTZkYTY4Mjg2YmJmMTljM2ZiNDIxMTM3YzljZTVmYjJkMGQ4ZWQxYzljNTExMzgsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTkRZeU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `
<div #spreadsheet></div>
<input type="button"
(click)="this.worksheets[0].setBorder(1,1,2,2,'test1','#ff0000')" value="Create a new red selection" />
<input type="button"
(click)="this.worksheets[0].setBorder(3,3,4,4,'test2','#0000ff')" value="Create a new blue selection" />
<input type="button"
(click)="this.worksheets[0].resetBorders()" value="Clear all selection" />`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
minDimensions: [6,6],
}
]
});
}
}
Create applications with spreadsheet-like controls