mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 09:25:40 +00:00
477 lines
16 KiB
HTML
Executable File
477 lines
16 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Events</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
<div id="example">
|
|
<button type="button" class="k-primary" id="exportButton">Export Spreadsheet sheet to PDF</button>
|
|
<div id="spreadsheet" style="width: 100%"></div>
|
|
|
|
<script>
|
|
function onRender(arg) {
|
|
kendoConsole.log("Spreadsheet is rendered");
|
|
}
|
|
|
|
function onSelect(arg) {
|
|
kendoConsole.log("New range selected. New value: " + arg.range.value());
|
|
}
|
|
|
|
function onChanging(arg) {
|
|
kendoConsole.log("Spreadsheet changing. The changing operation type is: " + arg.changeType);
|
|
}
|
|
|
|
function onChange(arg) {
|
|
kendoConsole.log("Spreadsheet change. New value: " + arg.range.value());
|
|
}
|
|
|
|
function onChangeFormat(arg) {
|
|
kendoConsole.log("Format of the range with value " + arg.range.value() + " changed to " + arg.range.format());
|
|
}
|
|
|
|
function onExcelExport(arg) {
|
|
kendoConsole.log("Spreadsheet is exported to Excel");
|
|
}
|
|
|
|
function onExcelImport(arg) {
|
|
kendoConsole.log(arg.file.name + " file is about to be imported in the Spreadsheet");
|
|
}
|
|
|
|
function onPdfExport(arg) {
|
|
kendoConsole.log("Spreadsheet is exported to PDF");
|
|
}
|
|
|
|
function onInsertSheet(arg) {
|
|
kendoConsole.log("Inserted new Sheet");
|
|
}
|
|
|
|
function onRemoveSheet(arg) {
|
|
kendoConsole.log(arg.sheet.name() + " sheet removed");
|
|
}
|
|
|
|
function onRenameSheet(arg) {
|
|
kendoConsole.log(arg.sheet.name() + " renamed to " + arg.newSheetName);
|
|
}
|
|
|
|
function onSelectSheet(arg) {
|
|
kendoConsole.log(arg.sheet.name() + " sheet is selected");
|
|
}
|
|
|
|
function onUnhideColumn(arg) {
|
|
kendoConsole.log("The column at index " + arg.index + " on sheet " + arg.sheet.name() + " is unhidden");
|
|
}
|
|
|
|
function onUnhideRow(arg) {
|
|
kendoConsole.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " is unhidden");
|
|
}
|
|
|
|
function onHideColumn(arg) {
|
|
kendoConsole.log("The column at index " + arg.index + " on sheet " + arg.sheet.name() + " is hidden");
|
|
}
|
|
|
|
function onHideRow(arg) {
|
|
kendoConsole.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " is hidden");
|
|
}
|
|
|
|
function onDeleteColumn(arg) {
|
|
kendoConsole.log("The column at index " + arg.index + " on sheet " + arg.sheet.name() + " is deleted");
|
|
}
|
|
|
|
function onDeleteRow(arg) {
|
|
kendoConsole.log("The row at index " + arg.index + " on sheet " + arg.sheet.name() + " is deleted");
|
|
}
|
|
|
|
function onInsertColumn(arg) {
|
|
kendoConsole.log("New column at index " + arg.index + " on sheet " + arg.sheet.name() + " is inserted");
|
|
}
|
|
|
|
function onInsertRow(arg) {
|
|
kendoConsole.log("New row at index " + arg.index + " on sheet " + arg.sheet.name() + " is inserted");
|
|
}
|
|
|
|
function onCopy(arg) {
|
|
kendoConsole.log("Copy content. The values to be copied are: " + arg.range.values());
|
|
}
|
|
|
|
function onCut(arg) {
|
|
kendoConsole.log("Cut content. The values to be cut are: " + arg.range.values());
|
|
}
|
|
|
|
function onPaste(arg) {
|
|
var values = arg.clipboardContent.data.map(function (row) {
|
|
return row.map(function (cell) {
|
|
return cell.value;
|
|
});
|
|
});
|
|
|
|
kendoConsole.log("Paste content. The values to be pasted are: " + values);
|
|
}
|
|
|
|
function exportSpreadsheet() {
|
|
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
|
|
spreadsheet.saveAsPDF();
|
|
}
|
|
|
|
$(function () {
|
|
$("#exportButton").kendoButton({
|
|
click: exportSpreadsheet
|
|
});
|
|
|
|
$("#spreadsheet").kendoSpreadsheet({
|
|
render: onRender,
|
|
select: onSelect,
|
|
changing: onChanging,
|
|
change: onChange,
|
|
changeFormat: onChangeFormat,
|
|
excelImport: onExcelImport,
|
|
pdfExport: onPdfExport,
|
|
excelExport: onExcelExport,
|
|
insertSheet: onInsertSheet,
|
|
removeSheet: onRemoveSheet,
|
|
renameSheet: onRenameSheet,
|
|
selectSheet: onSelectSheet,
|
|
unhideColumn: onUnhideColumn,
|
|
unhideRow: onUnhideRow,
|
|
hideColumn: onHideColumn,
|
|
hideRow: onHideRow,
|
|
deleteColumn: onDeleteColumn,
|
|
deleteRow: onDeleteRow,
|
|
insertColumn: onInsertColumn,
|
|
insertRow: onInsertRow,
|
|
copy: onCopy,
|
|
cut: onCut,
|
|
paste: onPaste,
|
|
pdf: {
|
|
area: "sheet"
|
|
},
|
|
sheets: [
|
|
{
|
|
name: "Invoices",
|
|
mergedCells: [
|
|
"A1:F1",
|
|
"C15:E15"
|
|
],
|
|
rows: [
|
|
{
|
|
height: 50,
|
|
cells: [
|
|
{
|
|
value: "Invoice #1", fontSize: 25,
|
|
textAlign: "center"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
height: 25,
|
|
cells: [
|
|
{
|
|
value: "ID", textAlign: "center"
|
|
},
|
|
{
|
|
value: "Product", textAlign: "center"
|
|
},
|
|
{
|
|
value: "Quantity", textAlign: "center"
|
|
},
|
|
{
|
|
value: "Price", textAlign: "center"
|
|
},
|
|
{
|
|
value: "Tax", textAlign: "center"
|
|
},
|
|
{
|
|
value: "Amount", textAlign: "center"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 216321, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Calzone"
|
|
},
|
|
{
|
|
value: 1, textAlign: "center"
|
|
},
|
|
{
|
|
value: 12.39, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C3*D3*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C3*D3+E3", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 546897, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Margarita"
|
|
},
|
|
{
|
|
value: 2, textAlign: "center"
|
|
},
|
|
{
|
|
value: 8.79, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C4*D4*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C4*D4+E4", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 456231, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Pollo Formaggio"
|
|
},
|
|
{
|
|
value: 1, textAlign: "center"
|
|
},
|
|
{
|
|
value: 13.99, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C5*D5*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C5*D5+E5", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 455873, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Greek Salad"
|
|
},
|
|
{
|
|
value: 1, textAlign: "center"
|
|
},
|
|
{
|
|
value: 9.49, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C6*D6*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C6*D6+E6", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 456892, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Spinach and Blue Cheese"
|
|
},
|
|
{
|
|
value: 3, textAlign: "center"
|
|
},
|
|
{
|
|
value: 11.49, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C7*D7*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C7*D7+E7", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 546564, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Rigoletto"
|
|
},
|
|
{
|
|
value: 1, textAlign: "center"
|
|
},
|
|
{
|
|
value: 10.99, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C8*D8*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C8*D8+E8", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 789455, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Creme Brulee"
|
|
},
|
|
{
|
|
value: 5, textAlign: "center"
|
|
},
|
|
{
|
|
value: 6.99, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C9*D9*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C9*D9+E9", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 123002, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Radeberger Beer"
|
|
},
|
|
{
|
|
value: 4, textAlign: "center"
|
|
},
|
|
{
|
|
value: 4.99, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C10*D10*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C10*D10+E10", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
cells: [
|
|
{
|
|
value: 564896, textAlign: "center"
|
|
},
|
|
{
|
|
value: "Budweiser Beer"
|
|
},
|
|
{
|
|
value: 3, textAlign: "center"
|
|
},
|
|
{
|
|
value: 4.49, format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C11*D11*0.2", format: "$#,##0.00"
|
|
},
|
|
{
|
|
formula: "C11*D11+E11", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
index: 13,
|
|
cells: [
|
|
{
|
|
|
|
},
|
|
{
|
|
|
|
},
|
|
{
|
|
|
|
},
|
|
{
|
|
|
|
},
|
|
{
|
|
value: "Tip", textAlign: "right"
|
|
},
|
|
{
|
|
formula: "SUM(F3:F11)*0.1", format: "$#,##0.00"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
height: 50,
|
|
index: 14,
|
|
cells: [
|
|
{
|
|
index: 0
|
|
},
|
|
{
|
|
index: 1
|
|
},
|
|
{
|
|
index: 2, fontSize: 20, value: "Total Amount", textAlign: "right"
|
|
},
|
|
{
|
|
index: 5, formula: "SUM(F3:F14)",
|
|
format: "$#,##0.00"
|
|
}
|
|
]
|
|
}
|
|
],
|
|
columns: [
|
|
{
|
|
width: 100
|
|
},
|
|
{
|
|
width: 215
|
|
},
|
|
{
|
|
width: 115
|
|
},
|
|
{
|
|
width: 115
|
|
},
|
|
{
|
|
width: 115
|
|
},
|
|
{
|
|
width: 155
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|