Data Grid Notifications
This section explains using the onerror
event in Jspreadsheet to customize the data grid notifications, better integrate with different application needs, and improve UI consistency.
Documentation
The default notification on the most recent version uses the jSuites toast plugin.
Events
Shortcut | Description |
---|---|
onerror | onerror(spreadsheet: object, result: object) => void |
Default Errors and Translations
jspreadsheet.setDictionary({
'Cursor not in the viewport': 'Le curseur n\'est pas dans la zone visible',
'This column is part of a merged cell.': 'Cette colonne fait partie d\'une cellule fusionnée.',
'This row is part of a merged cell': 'Cette ligne fait partie d\'une cellule fusionnée',
'Please clear your search before perform this action': 'Veuillez effacer votre recherche avant d\'exécuter cette action',
'Worksheet not found': 'Feuille de calcul introuvable',
})
Examples
The next example shows how to customize the error messages from Jspreadsheet and present that to the user in a custom way.
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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>
<p><input type='button' value='Try to change page...' id="btn1" /></p>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NDI3OTY3OWY1MmM3OTIwMjNjNTQ2OWU0YTBkYzkyZWY3YThjZWJmNmE0NzgzYjhlNTc3YTQ3ZjUxMmM3NzlhMTZhZDc5OTZlZTBhNzBiNDk0MzJmODk0M2QxOWJjNzUzMDc0NDZiZTJjMzFlNTdlMzYwODBkYzk1MWFjYjE1M2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTBOVFU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
minDimensions: [5,5],
}],
onerror: function(spreadsheet, result) {
// Customize the alerts
jSuites.notification(result);
}
});
document.getElementById("btn1").onclick = () => spreadsheet[0].page(1);
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import jSuites from "jsuites";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'NDI3OTY3OWY1MmM3OTIwMjNjNTQ2OWU0YTBkYzkyZWY3YThjZWJmNmE0NzgzYjhlNTc3YTQ3ZjUxMmM3NzlhMTZhZDc5OTZlZTBhNzBiNDk0MzJmODk0M2QxOWJjNzUzMDc0NDZiZTJjMzFlNTdlMzYwODBkYzk1MWFjYjE1M2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTBOVFU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const onError = function(spreadsheet, result) {
// Customize the alerts
jSuites.notification(result);
}
// Render component
return (<>
<Spreadsheet ref={spreadsheet} license={license} onerror={onError}>
<Worksheet minDimensions={[5, 5]} />
</Spreadsheet>
<p><input type='button' value='Try to change page...' onClick={() => spreadsheet.current[0].page(1)} /></p>
</>);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" :onerror="onError">
<Worksheet :minDimensions="[5, 5]" />
</Spreadsheet>
<p><input type="button" value="Try to change page..." @click="changePage" /></p>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import jSuites from "jsuites";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = "NDI3OTY3OWY1MmM3OTIwMjNjNTQ2OWU0YTBkYzkyZWY3YThjZWJmNmE0NzgzYjhlNTc3YTQ3ZjUxMmM3NzlhMTZhZDc5OTZlZTBhNzBiNDk0MzJmODk0M2QxOWJjNzUzMDc0NDZiZTJjMzFlNTdlMzYwODBkYzk1MWFjYjE1M2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTBOVFU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==";
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
changePage: function() {
this.$refs.spreadsheet.current[0].page(1)
},
onError: function(spreadsheet, result) {
// Customize the alerts
jSuites.notification(result);
}
},
data() {
// Data
const data = [['101.00']];
return {
data,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import jSuites from "jsuites";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NDI3OTY3OWY1MmM3OTIwMjNjNTQ2OWU0YTBkYzkyZWY3YThjZWJmNmE0NzgzYjhlNTc3YTQ3ZjUxMmM3NzlhMTZhZDc5OTZlZTBhNzBiNDk0MzJmODk0M2QxOWJjNzUzMDc0NDZiZTJjMzFlNTdlMzYwODBkYzk1MWFjYjE1M2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTBOVFU0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
standalone: true,
selector: "app-root",
template: `
<div #spreadsheet></div>
<p><input type='button' value='Try to change page...' (click)="changePage()" /></p>
`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
minDimensions: [5,5],
}],
onerror: function(spreadsheet, result) {
// Customize the alerts
jSuites.notification(result);
}
});
}
changePage() {
this.worksheets[0].page(1)
}
}