@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,335 lines (1,334 loc) • 194 kB
JavaScript
//#region ../src/spreadsheet/dialogs.js
(function(kendo) {
var $ = kendo.jQuery;
var ObservableObject = kendo.data.ObservableObject;
var MESSAGES = kendo.spreadsheet.messages.dialogs = {
apply: "Apply",
save: "Save",
cancel: "Cancel",
remove: "Remove",
retry: "Retry",
revert: "Revert",
okText: "OK",
formatCellsDialog: {
title: "Format",
categories: {
number: "Number",
currency: "Currency",
date: "Date"
}
},
fontFamilyDialog: { title: "Font" },
fontSizeDialog: { title: "Font size" },
bordersDialog: { title: "Borders" },
alignmentDialog: {
title: "Alignment",
buttons: {
justifyLeft: "Align left",
justifyCenter: "Center",
justifyRight: "Align right",
justifyFull: "Justify",
alignTop: "Align top",
alignMiddle: "Align middle",
alignBottom: "Align bottom"
}
},
mergeDialog: {
title: "Merge cells",
buttons: {
mergeCells: "Merge all",
mergeHorizontally: "Merge horizontally",
mergeVertically: "Merge vertically",
unmerge: "Unmerge"
}
},
freezeDialog: {
title: "Freeze panes",
buttons: {
freezePanes: "Freeze panes",
freezeRows: "Freeze rows",
freezeColumns: "Freeze columns",
unfreeze: "Unfreeze panes"
}
},
confirmationDialog: {
text: "Are you sure you want to remove this sheet?",
title: "Sheet remove"
},
validationDialog: {
title: "Data Validation",
hintMessage: "Please enter a valid {0} value {1}.",
hintTitle: "Validation {0}",
criteria: {
any: "Any value",
number: "Number",
text: "Text",
date: "Date",
custom: "Custom Formula",
list: "List"
},
comparers: {
greaterThan: "greater than",
lessThan: "less than",
between: "between",
notBetween: "not between",
equalTo: "equal to",
notEqualTo: "not equal to",
greaterThanOrEqualTo: "greater than or equal to",
lessThanOrEqualTo: "less than or equal to"
},
comparerMessages: {
greaterThan: "greater than {0}",
lessThan: "less than {0}",
between: "between {0} and {1}",
notBetween: "not between {0} and {1}",
equalTo: "equal to {0}",
notEqualTo: "not equal to {0}",
greaterThanOrEqualTo: "greater than or equal to {0}",
lessThanOrEqualTo: "less than or equal to {0}",
custom: "that satisfies the formula: {0}"
},
labels: {
criteria: "Criteria",
comparer: "Comparer",
min: "Min",
max: "Max",
value: "Value",
start: "Start",
end: "End",
onInvalidData: "On invalid data",
rejectInput: "Reject input",
showWarning: "Show warning",
showHint: "Show hint",
hintTitle: "Hint title",
hintMessage: "Hint message",
ignoreBlank: "Ignore blank",
showListButton: "Display button to show list",
showCalendarButton: "Display button to show calendar"
},
placeholders: {
typeTitle: "Type title",
typeMessage: "Type message"
}
},
exportAsDialog: {
title: "Export...",
defaultFileName: "Workbook",
xlsx: { description: "Excel Workbook (.xlsx)" },
pdf: {
description: "Portable Document Format (.pdf)",
area: {
workbook: "Entire Workbook",
sheet: "Active Sheet",
selection: "Selection"
},
paper: {
a2: "A2 (420 mm × 594 mm)",
a3: "A3 (297 mm x 420 mm)",
a4: "A4 (210 mm x 297 mm)",
a5: "A5 (148 mm x 210 mm)",
b3: "B3 (353 mm × 500 mm)",
b4: "B4 (250 mm x 353 mm)",
b5: "B5 (176 mm x 250 mm)",
folio: "Folio (8.5\" x 13\")",
legal: "Legal (8.5\" x 14\")",
letter: "Letter (8.5\" x 11\")",
tabloid: "Tabloid (11\" x 17\")",
executive: "Executive (7.25\" x 10.5\")"
},
margin: {
normal: "Normal",
narrow: "Narrow",
wide: "Wide"
}
},
labels: {
scale: "Scale",
fit: "Fit to page",
fileName: "File name",
saveAsType: "Save as type",
exportArea: "Export",
paperSize: "Paper size",
margins: "Margins",
orientation: "Orientation",
print: "Print",
guidelines: "Guidelines",
center: "Center",
horizontally: "Horizontally",
vertically: "Vertically"
}
},
modifyMergedDialog: { errorMessage: "Cannot change part of a merged cell." },
rangeDisabledDialog: { errorMessage: "Destination range contains disabled cells." },
intersectsArrayDialog: { errorMessage: "You cannot alter part of an array" },
incompatibleRangesDialog: { errorMessage: "Incompatible ranges" },
noFillDirectionDialog: { errorMessage: "Cannot determine fill direction" },
duplicateSheetNameDialog: { errorMessage: "Duplicate sheet name" },
overflowDialog: { errorMessage: "Cannot paste, because the copy area and the paste area are not the same size and shape." },
useKeyboardDialog: {
title: "Copying and pasting",
errorMessage: "These actions cannot be invoked through the menu. Please use the keyboard shortcuts instead:",
labels: {
forCopy: "for copy",
forCut: "for cut",
forPaste: "for paste"
}
},
unsupportedSelectionDialog: { errorMessage: "That action cannot be performed on multiple selection." },
linkDialog: {
title: "Hyperlink",
labels: {
text: "Text",
url: "Address",
removeLink: "Remove link"
}
},
sheetRenameDialog: {
title: "Rename Sheet",
labels: {
text: "Rename Sheet",
rename: "Rename"
}
},
insertCommentDialog: {
title: "Insert comment",
labels: {
comment: "Comment",
removeComment: "Remove comment"
}
},
insertImageDialog: {
title: "Insert image",
info: "Drag an image here, or click to select",
typeError: "Please select a JPEG, PNG or GIF image"
}
};
var registry = {};
kendo.spreadsheet.dialogs = {
register: function(name, dialogClass) {
registry[name] = dialogClass;
},
registered: function(name) {
return !!registry[name];
},
create: function(name, options) {
var dialogClass = registry[name];
if (dialogClass) {
return new dialogClass(options);
}
}
};
var SpreadsheetDialog = kendo.spreadsheet.SpreadsheetDialog = kendo.Observable.extend({
init: function(options) {
kendo.Observable.fn.init.call(this, options);
this.options = translate($.extend(true, {}, this.options, options));
this.bind(this.events, options);
},
events: ["close", "activate"],
options: { autoFocus: true },
dialog: function() {
if (!this._dialog) {
var options = {
autoFocus: false,
scrollable: false,
resizable: false,
modal: true,
visible: false,
width: this.options.width || 320,
title: this.options.title,
open: function() {
this.center();
},
close: this._onDialogClose.bind(this),
activate: this._onDialogActivate.bind(this),
deactivate: this._onDialogDeactivate.bind(this)
};
this._dialog = $("<div class='k-spreadsheet-window k-action-window k-popup-edit-form' />").addClass(this.options.className || "").append(kendo.template(this.options.template)({
messages: kendo.spreadsheet.messages.dialogs || MESSAGES,
ns: kendo.ns,
errors: this.options.errors
})).kendoWindow(options).data("kendoWindow");
}
return this._dialog;
},
_onDialogClose: function() {
this.trigger("close", { action: this._action });
},
_onDialogActivate: function() {
this.trigger("activate");
},
_onDialogDeactivate: function() {
this.trigger("deactivate");
this.destroy();
},
destroy: function() {
if (this._dialog) {
this._dialog.destroy();
this._dialog = null;
}
},
open: function() {
this.dialog().open();
this.dialog().element.find(".k-button-primary").trigger("focus");
},
apply: function() {
this.close();
},
close: function() {
this._action = "close";
this.dialog().close();
}
});
function formattedValue(value, format) {
return kendo.spreadsheet.formatting.text(value, format);
}
var FormatCellsViewModel = kendo.spreadsheet.FormatCellsViewModel = ObservableObject.extend({
init: function(options) {
ObservableObject.fn.init.call(this, options);
this.useCategory(this.category);
},
useCategory: function(category) {
var type = category && category.type || "number";
var formatCurrency = type == "currency";
this.category = category;
this.set("showCurrencyFilter", formatCurrency && this.currencies.length > 1);
if (!formatCurrency) {
this.set("formats", this.allFormats[type + "Formats"]);
} else {
this.currency(this.currencies[0]);
}
this.useFirstFormat();
},
useFirstFormat: function() {
if (this.formats.length) {
this.set("format", this.formats[0].value);
}
},
currency: function(currency) {
if (currency !== undefined) {
this._currency = currency;
var info = currency.value;
var formats = [
{
currency: info,
decimals: true
},
{
currency: info,
decimals: true,
iso: true
},
{
currency: info,
decimals: false
}
];
formats = formats.map(function(format) {
format = FormatCellsViewModel.convert.currency(format);
return {
value: format,
name: formattedValue(1e3, format)
};
});
this.set("formats", formats);
this.useFirstFormat();
}
return this._currency || this.currencies[0];
},
categoryFilter: function(category) {
if (category !== undefined) {
this.useCategory(category);
}
return this.category;
},
preview: function() {
var format = this.get("format");
var value = this.value || 0;
if (format && format.length) {
return formattedValue(value, format);
} else {
return value;
}
}
});
FormatCellsViewModel.convert = {
currency: function(options) {
function repeat(token, n) {
return new Array(n + 1).join(token);
}
var info = options.currency;
var format = info.pattern[1];
if (options.decimals) {
format = format.replace(/n/g, "n" + info["."] + repeat("0", info.decimals));
}
if (options.iso) {
format = "\"" + info.abbr + "\" " + format.replace(/\s*\$\s*/g, "");
} else {
format = format.replace(/\$/g, JSON.stringify(info.symbol));
}
format = format.replace(/n/g, "?");
return format;
},
date: function(format) {
if (/T|Z/.test(format)) {
return "";
}
return format.toLowerCase().replace(/tt/g, "AM/PM").replace(/'/g, "\"");
}
};
function uniqueBy(field, array) {
var result = [];
var values = [];
for (var i = 0; i < array.length; i++) {
if ($.inArray(array[i][field], values) == -1) {
result.push(array[i]);
values.push(array[i][field]);
}
}
return result;
}
var FormatCellsDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.formatCellsDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
categories: [
{
type: "number",
name: messages.categories.number
},
{
type: "currency",
name: messages.categories.currency
},
{
type: "date",
name: messages.categories.date
}
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._generateFormats();
},
options: {
className: "k-spreadsheet-format-cells",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-edit-form-container'><div class='k-root-tabs' data-${kendo.htmlEncode(data.ns)}role='tabstrip' data-${kendo.htmlEncode(data.ns)}text-field='name' data-${kendo.htmlEncode(data.ns)}bind='source: categories, value: categoryFilter' data-${kendo.htmlEncode(data.ns)}animation='false'></div>
<div class='k-spreadsheet-preview' data-${kendo.htmlEncode(data.ns)}bind='text: preview'></div><select data-${kendo.htmlEncode(data.ns)}role='dropdownlist' class='k-format-filter' data-${kendo.htmlEncode(data.ns)}text-field='description' data-${kendo.htmlEncode(data.ns)}value-field='value.name' data-${kendo.htmlEncode(data.ns)}bind='visible: showCurrencyFilter, value: currency, source: currencies'></select><ul data-${kendo.htmlEncode(data.ns)}role='staticlist' tabindex='0' id='formats-list' aria-label='formats list' class='k-list k-reset' bind:data-${kendo.htmlEncode(data.ns)}template='formatItemTemplate' data-${kendo.htmlEncode(data.ns)}value-primitive='true' data-${kendo.htmlEncode(data.ns)}value-field='value' data-${kendo.htmlEncode(data.ns)}bind='source: formats, value: format'></ul>
<div class='k-actions'><button class='k-button k-button-primary' data-${kendo.htmlEncode(data.ns)}bind='click: apply'><span class='k-button-text'>${kendo.htmlEncode(data.messages.apply)}</span></button><button class='k-button' data-${kendo.htmlEncode(data.ns)}bind='click: close'><span class='k-button-text'>${kendo.htmlEncode(data.messages.cancel)}</span></button></div>
</div>`;
return $kendoOutput;
}
},
_generateFormats: function() {
var options = this.options;
if (!options.currencies) {
options.currencies = FormatCellsDialog.currenciesFrom(kendo.cultures);
}
if (!options.numberFormats) {
options.numberFormats = [
{
value: "#.00%",
name: "100.00%"
},
{
value: "#%",
name: "100%"
},
{
value: "#.00",
name: "1024.00"
},
{
value: "#,###.00",
name: "1,024.00"
}
];
}
if (!options.dateFormats) {
var calendarPatterns = kendo.cultures.current.calendars.standard.patterns;
options.dateFormats = uniqueBy("value", $.map(calendarPatterns, function(format) {
format = FormatCellsViewModel.convert.date(format);
if (!format) {
return;
}
return {
value: format,
name: formattedValue(34567.7678, format)
};
}));
}
},
open: function(range) {
var options = this.options;
var value = range.value();
var categories = options.categories.slice(0);
var element;
this.viewModel = new FormatCellsViewModel({
currencies: options.currencies.slice(0),
allFormats: {
numberFormats: options.numberFormats.slice(0),
dateFormats: options.dateFormats.slice(0)
},
categories,
format: range.format(),
category: value instanceof Date ? categories[2] : categories[0],
apply: this.apply.bind(this),
close: this.close.bind(this),
value,
formatItemTemplate: (data) => kendo.htmlEncode(data.name)
});
SpreadsheetDialog.fn.open.call(this);
element = this.dialog().element;
kendo.bind(element, this.viewModel);
var currencyFilter = element.find("select.k-format-filter").data("kendoDropDownList");
if (options.currencies.length > 10) {
currencyFilter.setOptions({ filter: "contains" });
}
element.find(kendo.roleSelector("staticlist")).parent().addClass("k-list-wrapper");
element.find(".k-tabstrip-item").attr("aria-controls", "formats-list");
},
apply: function() {
var format = this.viewModel.format;
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: "format",
value: format
}
});
}
});
FormatCellsDialog.currenciesFrom = function(cultures) {
return uniqueBy("description", $.map(cultures, function(culture, name) {
if (!/-/.test(name)) {
return;
}
var currency = culture.numberFormat.currency;
var description = kendo.format("{0} ({1}, {2})", currency.name, currency.abbr, currency.symbol);
return {
description,
value: currency
};
}));
};
kendo.spreadsheet.dialogs.register("formatCells", FormatCellsDialog);
kendo.spreadsheet.dialogs.FormatCellsDialog = FormatCellsDialog;
var MessageDialog = SpreadsheetDialog.extend({
options: {
className: "k-spreadsheet-message",
title: "",
messageId: "",
text: "",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-spreadsheet-message-content' data-${kendo.htmlEncode(data.ns)}bind='text: text'></div>
<div class='k-actions'><button class='k-button k-button-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: close'><span
class='k-button-text'>${data.messages.okText}</span></button></div>`;
return $kendoOutput;
}
},
open: function() {
SpreadsheetDialog.fn.open.call(this);
var options = this.options;
var text = options.text;
if (options.messageId) {
text = kendo.getter(options.messageId, true)(kendo.spreadsheet.messages.dialogs);
}
kendo.bind(this.dialog().element, {
text,
close: this.close.bind(this)
});
}
});
kendo.spreadsheet.dialogs.register("message", MessageDialog);
var ConfirmationDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.confirmationDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
text: messages.text
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
},
options: {
className: "k-spreadsheet-message",
messageId: "",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-spreadsheet-message-content' data-${kendo.htmlEncode(data.ns)}bind='text: text'></div>
<div class='k-actions'><button class='k-button k-button-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: confirm'><span
class='k-button-text'>${data.messages.okText}</span></button><button
class='k-button'
data-${kendo.htmlEncode(data.ns)}bind='click: cancel'><span
class='k-button-text'>${data.messages.cancel}</span></button></div>`;
return $kendoOutput;
}
},
open: function() {
SpreadsheetDialog.fn.open.call(this);
var options = this.options;
var text = options.text;
if (options.messageId) {
text = kendo.getter(options.messageId, true)(kendo.spreadsheet.messages.dialogs);
}
kendo.bind(this.dialog().element, {
text,
confirm: this.confirm.bind(this),
cancel: this.close.bind(this)
});
},
isConfirmed: function() {
return this._confirmed;
},
confirm: function() {
this._confirmed = true;
this.close();
}
});
kendo.spreadsheet.dialogs.register("confirmation", ConfirmationDialog);
var ValidationErrorDialog = SpreadsheetDialog.extend({
options: {
className: "k-spreadsheet-message",
title: "",
messageId: "",
text: "",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-spreadsheet-message-content' data-${kendo.htmlEncode(data.ns)}bind='text: text'></div><div class='k-actions'><button class='k-button k-button-primary' data-${kendo.htmlEncode(data.ns)}bind='click: retry'><span class='k-button-text'>${data.messages.retry}</span></button><button class='k-button' data-${kendo.htmlEncode(data.ns)}bind='click: cancel'><span class='k-button-text'>${data.messages.cancel}</span></button></div>`;
return $kendoOutput;
}
},
open: function() {
SpreadsheetDialog.fn.open.call(this);
var options = this.options;
var text = options.text;
if (options.messageId) {
text = kendo.getter(options.messageId, true)(kendo.spreadsheet.messages.dialogs);
}
kendo.bind(this.dialog().element, {
text,
retry: this.retry.bind(this),
cancel: this.close.bind(this)
});
},
retry: function() {
this._retry = true;
this.close();
}
});
kendo.spreadsheet.dialogs.register("validationError", ValidationErrorDialog);
var FontFamilyDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.fontFamilyDialog || MESSAGES;
SpreadsheetDialog.fn.init.call(this, $.extend({ title: messages.title }, options));
this._list();
},
options: { template: () => "<ul class='k-list k-reset'></ul>" },
_list: function() {
var ul = this.dialog().element.find("ul");
var fonts = this.options.options;
var defaultFont = this.options.default;
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: fonts }),
template: (data) => kendo.htmlEncode(data),
value: defaultFont,
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: "fontFamily",
value: e.sender.value()[0]
}
});
}
});
kendo.spreadsheet.dialogs.register("fontFamily", FontFamilyDialog);
var FontSizeDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.fontSizeDialog || MESSAGES;
SpreadsheetDialog.fn.init.call(this, $.extend({ title: messages.title }, options));
this._list();
},
options: { template: () => "<ul class='k-list k-reset'></ul>" },
_list: function() {
var ul = this.dialog().element.find("ul");
var sizes = this.options.options;
var defaultSize = this.options.default;
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: sizes }),
template: (data) => kendo.htmlEncode(data),
value: defaultSize,
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: "fontSize",
value: kendo.parseInt(e.sender.value()[0])
}
});
}
});
kendo.spreadsheet.dialogs.register("fontSize", FontSizeDialog);
var BordersDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.bordersDialog || MESSAGES;
SpreadsheetDialog.fn.init.call(this, $.extend({ title: messages.title }, options));
this.element = this.dialog().element;
this._borderPalette();
this.viewModel = kendo.observable({
apply: this.apply.bind(this),
close: this.close.bind(this)
});
kendo.bind(this.element.find(".k-actions"), this.viewModel);
},
options: { template: (data) => {
let $kendoOutput;
$kendoOutput = `<div></div>
<div class='k-actions'><button class='k-button k-button-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: apply'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.apply)}</span></button><button
class='k-button'
data-${kendo.htmlEncode(data.ns)}bind='click: close'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.cancel)}</span></button></div>`;
return $kendoOutput;
} },
apply: function() {
SpreadsheetDialog.fn.apply.call(this);
var state = this.borderPalette.value();
if (state.color && state.type) {
this.trigger("action", {
command: "BorderChangeCommand",
options: {
border: state.type,
style: {
size: 1,
color: state.color
}
}
});
}
},
_borderPalette: function() {
var element = this.dialog().element.find("div").first();
this.borderPalette = new kendo.spreadsheet.BorderPalette(element, { change: this.value.bind(this) });
},
value: function(state) {
if (state === undefined) {
return this._state;
} else {
this._state = state;
}
}
});
kendo.spreadsheet.dialogs.register("borders", BordersDialog);
var ColorChooser = SpreadsheetDialog.extend({
init: function(options) {
SpreadsheetDialog.fn.init.call(this, options);
this.element = this.dialog().element;
this.property = options.property;
this.options.title = options.title;
this.viewModel = kendo.observable({
apply: this.apply.bind(this),
close: this.close.bind(this)
});
kendo.bind(this.element.find(".k-actions"), this.viewModel);
},
options: { template: (data) => {
let $kendoOutput;
$kendoOutput = `<div></div>
<div class='k-actions'><button class='k-button k-button-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: apply'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.apply)}</span></button><button
class='k-button'
data-${kendo.htmlEncode(data.ns)}bind='click: close'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.cancel)}</span></button></div>`;
return $kendoOutput;
} },
apply: function() {
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: this.property,
value: this.value()
}
});
},
value: function(e) {
if (e === undefined) {
return this._value;
} else {
this._value = e.value;
}
}
});
var ColorPickerDialog = ColorChooser.extend({
init: function(options) {
options.width = 177;
ColorChooser.fn.init.call(this, options);
this._colorPalette();
},
_colorPalette: function() {
var element = this.dialog().element.find("div").first();
this.colorPalette = element.kendoColorPalette({
palette: [
"#ffffff",
"#000000",
"#d6ecff",
"#4e5b6f",
"#7fd13b",
"#ea157a",
"#feb80a",
"#00addc",
"#738ac8",
"#1ab39f",
"#f2f2f2",
"#7f7f7f",
"#a7d6ff",
"#d9dde4",
"#e5f5d7",
"#fad0e4",
"#fef0cd",
"#c5f2ff",
"#e2e7f4",
"#c9f7f1",
"#d8d8d8",
"#595959",
"#60b5ff",
"#b3bcca",
"#cbecb0",
"#f6a1c9",
"#fee29c",
"#8be6ff",
"#c7d0e9",
"#94efe3",
"#bfbfbf",
"#3f3f3f",
"#007dea",
"#8d9baf",
"#b2e389",
"#f272af",
"#fed46b",
"#51d9ff",
"#aab8de",
"#5fe7d5",
"#a5a5a5",
"#262626",
"#003e75",
"#3a4453",
"#5ea226",
"#af0f5b",
"#c58c00",
"#0081a5",
"#425ea9",
"#138677",
"#7f7f7f",
"#0c0c0c",
"#00192e",
"#272d37",
"#3f6c19",
"#750a3d",
"#835d00",
"#00566e",
"#2c3f71",
"#0c594f"
],
change: this.value.bind(this)
}).data("kendoColorPalette");
}
});
kendo.spreadsheet.dialogs.register("colorPicker", ColorPickerDialog);
var CustomColorDialog = ColorChooser.extend({
init: function(options) {
options.width = 268;
ColorChooser.fn.init.call(this, options);
this.dialog().setOptions({ animation: false });
this.dialog().one("activate", this._colorPicker.bind(this));
},
_colorPicker: function() {
var element = this.dialog().element.find("div").first();
this.colorPicker = element.kendoFlatColorPicker({ change: this.value.bind(this) }).data("kendoFlatColorPicker");
}
});
kendo.spreadsheet.dialogs.register("customColor", CustomColorDialog);
var AlignmentDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.alignmentDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
buttons: [
{
property: "textAlign",
value: "left",
iconClass: "align-left",
text: messages.buttons.justifyLeft
},
{
property: "textAlign",
value: "center",
iconClass: "align-center",
text: messages.buttons.justifyCenter
},
{
property: "textAlign",
value: "right",
iconClass: "align-right",
text: messages.buttons.justifyRight
},
{
property: "textAlign",
value: "justify",
iconClass: "align-justify",
text: messages.buttons.justifyFull
},
{
property: "verticalAlign",
value: "top",
iconClass: "align-top",
text: messages.buttons.alignTop
},
{
property: "verticalAlign",
value: "center",
iconClass: "align-middle",
text: messages.buttons.alignMiddle
},
{
property: "verticalAlign",
value: "bottom",
iconClass: "align-bottom",
text: messages.buttons.alignBottom
}
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._list();
},
options: { template: () => "<ul class='k-list k-reset'></ul>" },
_list: function() {
var ul = this.dialog().element.find("ul");
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: this.options.buttons }),
template: (data) => `<a role='button' title='${data.text}' data-property='${data.property}' data-value='${data.value}'>
${kendo.ui.icon(data.iconClass)} ${data.text}
</a>`,
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
var dataItem = e.sender.value()[0];
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: dataItem.property,
value: dataItem.value
}
});
}
});
kendo.spreadsheet.dialogs.register("alignment", AlignmentDialog);
var MergeDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.mergeDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
buttons: [
{
value: "cells",
iconClass: "cells-merge",
text: messages.buttons.mergeCells
},
{
value: "horizontally",
iconClass: "cells-merge-horizontally",
text: messages.buttons.mergeHorizontally
},
{
value: "vertically",
iconClass: "cells-merge-vertically",
text: messages.buttons.mergeVertically
},
{
value: "unmerge",
iconClass: "table-unmerge",
text: messages.buttons.unmerge
}
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._list();
},
options: { template: () => "<ul class='k-list k-reset'></ul>" },
_list: function() {
var ul = this.dialog().element.find("ul");
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: this.options.buttons }),
template: (data) => `<a role='button' title='${data.text}' data-value='${data.value}'>` + `${kendo.ui.icon(data.iconClass)}${data.text}` + "</a>",
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
var dataItem = e.sender.value()[0];
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "MergeCellCommand",
options: { value: dataItem.value }
});
}
});
kendo.spreadsheet.dialogs.register("merge", MergeDialog);
var FreezeDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.freezeDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
buttons: [
{
value: "panes",
iconClass: "pane-freeze",
text: messages.buttons.freezePanes
},
{
value: "rows",
iconClass: "row-freeze",
text: messages.buttons.freezeRows
},
{
value: "columns",
iconClass: "column-freeze",
text: messages.buttons.freezeColumns
},
{
value: "unfreeze",
iconClass: "table-unmerge",
text: messages.buttons.unfreeze
}
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._list();
},
options: { template: () => "<ul class='k-list k-reset'></ul>" },
_list: function() {
var ul = this.dialog().element.find("ul");
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: this.options.buttons }),
template: (data) => `<a role='button' title='${data.text}' data-value='${data.value}'>` + `${kendo.ui.icon(data.iconClass)}${data.text}` + "</a>",
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
var dataItem = e.sender.value()[0];
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "FreezePanesCommand",
options: { value: dataItem.value }
});
}
});
kendo.spreadsheet.dialogs.register("freeze", FreezeDialog);
var ValidationViewModel = kendo.spreadsheet.ValidationCellsViewModel = ObservableObject.extend({
init: function(options) {
ObservableObject.fn.init.call(this, options);
this.bind("change", (function(e) {
if (e.field === "criterion") {
this.reset();
if (this.criterion === "custom" || this.criterion === "list") {
this.setHintMessageTemplate();
}
}
if (e.field === "comparer") {
this.setHintMessageTemplate();
}
if ((e.field == "hintMessage" || e.field == "hintTitle") && !this._mute) {
this.shouldBuild = false;
}
if ((e.field == "from" || e.field == "to" || e.field == "hintMessageTemplate" || e.field == "type") && this.shouldBuild) {
this.buildMessages();
}
}).bind(this));
this.reset();
},
buildMessages: function() {
this._mute = true;
this.set("hintTitle", this.hintTitleTemplate ? kendo.format(this.hintTitleTemplate, this.type) : "");
this.set("hintMessage", this.hintMessageTemplate ? kendo.format(this.hintMessageTemplate, this.from, this.to) : "");
this._mute = false;
},
reset: function() {
this.setComparers();
this.set("comparer", this.comparers[0].type);
this.set("from", null);
this.set("to", null);
this.set("useCustomMessages", false);
this.shouldBuild = true;
this.hintTitleTemplate = this.defaultHintTitle;
this.buildMessages();
},
setComparers: function() {
var all = this.defaultComparers;
var comparers = [];
if (this.criterion === "text") {
var text_comparers = ["equalTo", "notEqualTo"];
for (var idx = 0; idx < all.length; idx++) {
if (text_comparers[0] == all[idx].type) {
comparers.push(all[idx]);
text_comparers.shift();
}
}
} else {
comparers = all.slice();
}
this.set("comparers", comparers);
},
setHintMessageTemplate: function() {
if (this.criterion !== "custom" && this.criterion !== "list") {
this.set("hintMessageTemplate", kendo.format(this.defaultHintMessage, this.criterion, this.comparerMessages[this.comparer]));
} else {
this.set("hintMessageTemplate", "");
this.set("hintMessage", "");
}
},
isAny: function() {
return this.get("criterion") === "any";
},
isNumber: function() {
return this.get("criterion") === "number";
},
showToForNumber: function() {
return this.showTo() && this.isNumber();
},
showToForDate: function() {
return this.showTo() && this.isDate();
},
isText: function() {
return this.get("criterion") === "text";
},
isDate: function() {
return this.get("criterion") === "date";
},
isList: function() {
return this.get("criterion") === "list";
},
isCustom: function() {
return this.get("criterion") === "custom";
},
showRemove: function() {
return this.get("hasValidation");
},
showTo: function() {
return this.get("comparer") == "between" || this.get("comparer") == "notBetween";
},
update: function(validation) {
this.set("hasValidation", !!validation);
if (validation) {
this.fromValidationObject(validation);
}
},
fromValidationObject: function(validation) {
this.set("criterion", validation.dataType);
this.set("comparer", validation.comparerType);
this.set("from", validation.from);
this.set("to", validation.to);
this.set("type", validation.type);
this.set("ignoreBlank", validation.allowNulls);
this.set("showButton", validation.showButton);
if (validation.messageTemplate || validation.titleTemplate) {
this.hintMessageTemplate = validation.messageTemplate;
this.hintMessage = validation.messageTemplate;
this.hintTitleTemplate = validation.titleTemplate;
this.hintTitle = validation.titleTemplate;
this.useCustomMessages = true;
this.buildMessages();
} else {
this.useCustomMessages = false;
}
},
toValidationObject: function() {
if (this.criterion === "any") {
return null;
}
var options = {
type: this.type,
dataType: this.criterion,
comparerType: this.comparer,
from: this.from,
to: this.to,
allowNulls: this.ignoreBlank,
showButton: this.showButton
};
if (this.useCustomMessages) {
options.messageTemplate = this.shouldBuild ? this.hintMessageTemplate : this.hintMessage;
options.titleTemplate = this.hintTitle;
}
return options;
}
});
var ValidationDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.validationDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
hintMessage: messages.hintMessage,
hintTitle: messages.hintTitle,
criteria: [
{
type: "any",
name: messages.criteria.any
},
{
type: "number",
name: messages.criteria.number
},
{
type: "text",
name: messages.criteria.text
},
{
type: "date",
name: messages.criteria.date
},
{
type: "custom",
name: messages.criteria.custom
},
{
type: "list",
name: messages.criteria.list
}
],
comparers: [
{
type: "greaterThan",
name: messages.comparers.greaterThan
},
{
type: "lessThan",
name: messages.comparers.lessThan
},
{
type: "between",
name: messages.comparers.between
},
{
type: "notBetween",
name: messages.comparers.notBetween
},
{
type: "equalTo",
name: messages.comparers.equalTo
},
{
type: "notEqualTo",
name: messages.comparers.notEqualTo
},
{
type: "greaterThanOrEqualTo",
name: messages.comparers.greaterThanOrEqualTo
},
{
type: "lessThanOrEqualTo",
name: messages.comparers.lessThanOrEqualTo
}
],
comparerMessages: messages.comparerMessages
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
},
options: {
width: 450,
criterion: "any",
type: "reject",
ignoreBlank: true,
showButton: true,
useCustomMessages: false,
errorTemplate: (data) => `<div class="k-tooltip k-tooltip-error k-validator-tooltip">
${kendo.ui.icon({
icon: "exclamation-circle",
iconClass: "k-tooltip-icon"
})}
<span class="k-tooltip-content">${data.message}</span>
<span class="k-callout k-callout-n"></span>
</div>`,
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class="k-edit-form-container">
<div class="k-edit-label"><label for="criteria">${kendo.htmlEncode(data.messages.validationDialog.labels.criteria)}:</label></div>
<div class="k-edit-field"><select id="criteria" data-${kendo.htmlEncode(data.ns)}role="dropdownlist" title="${kendo.htmlEncode(data.messages.validationDialog.labels.criteria)}" data-${kendo.htmlEncode(data.ns)}text-field="name" data-${kendo.htmlEncode(data.ns)}value-field="type" data-${kendo.htmlEncode(data.ns)}bind="value: criterion, source: criteria"></select></div>
<div data-${kendo.htmlEncode(data.ns)}bind="visible: isNumber">
<div class="k-edit-label"><label for="number-comparer">${kendo.htmlEncode(data.messages.validationDialog.labels.comparer)}:</label></div>
<div class="k-edit-field"><select id="number-comparer" data-${kendo.htmlEncode(data.ns)}role="dropdownlist" title="${kendo.htmlEncode(data.messages.validationDialog.labels.comparer)}" data-${kendo.htmlEncode(data.ns)}text-field="name" data-${kendo.htmlEncode(data.ns)}value-field="type" data-${kendo.htmlEncode(data.ns)}bind="value: comparer, source: comparers"></select></div>
<div class="k-edit-label"><label for="comparer-min">${kendo.htmlEncode(data.messages.validationDialog.labels.min)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="comparer-min" name="${kendo.htmlEncode(data.messages.validationDialog.labels.min)}" title="${kendo.htmlEncode(data.messages.validationDialog.labels.min)}" placeholder="e.g. 10" class="k-input-inner" data-${kendo.htmlEncode(data.ns)}bind="value: from, enabled: isNumber" required="required" /></span></div>
<div data-${kendo.htmlEncode(data.ns)}bind="visible: showTo">
<div class="k-edit-label"><label for="comparer-max">${kendo.htmlEncode(data.messages.validationDialog.labels.max)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="comparer-max" name="${kendo.htmlEncode(data.messages.validationDialog.labels.max)}" title="${kendo.htmlEncode(data.messages.validationDialog.labels.max)}" placeholder="e.g. 100" class="k-input-inner" data-${kendo.htmlEncode(data.ns)}bind="value: to, enabled: showToForNumber" required="required" /></span></div>
</div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="visible: isText">
<div class="k-edit-label"><label for="text-comparer">${kendo.htmlEncode(data.messages.validationDialog.labels.comparer)}:</label></div>
<div class="k-edit-field"><select id="text-comparer" data-${kendo.htmlEncode(data.ns)}role="dropdownlist" title="${kendo.htmlEncode(data.messages.validationDialog.labels.comparer)}" data-${kendo.htmlEncode(data.ns)}text-field="name" data-${kendo.htmlEncode(data.ns)}value-field="type" data-${kendo.htmlEncode(data.ns)}bind="value: comparer, source: comparers"></select></div>
<div class="k-edit-label"><label for="text-comparer-value">${kendo.htmlEncode(data.messages.validationDialog.labels.value)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="text-comparer-value" name="${kendo.htmlEncode(data.messages.validationDialog.labels.value)}" title="${kendo.htmlEncode(data.messages.validationDialog.labels.value)}" class="k-input-inner" data-${kendo.htmlEncode(data.ns)}bind="value: from, enabled: isText" required="required" /></span></div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="visible: isDate">
<div class="k-edit-label"><label for="date-comparer">${kendo.htmlEncode(data.messages.validationDialog.labels.comparer)}:</label></div>
<div class="k-edit-field"><select id="date-comparer" data-${kendo.htmlEncode(data.ns)}role="dropdownlist" title="${kendo.htmlEncode(data.messages.validationDialog.labels.comparer)}" data-${kendo.htmlEncode(data.ns)}text-field="name" data-${kendo.htmlEncode(data.ns)}value-field="type" data-${kendo.htmlEncode(data.ns)}bind="value: comparer, source: comparers"></select></div>
<div class="k-edit-label"><label for="date-comparer-start">${kendo.htmlEncode(data.messages.validationDialog.labels.start)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="date-comparer-start" name="${kendo.htmlEncode(data.messages.validationDialog.labels.start)}" title="${kendo.htmlEncode(data.messages.validationDialog.labels.start)}" class="k-input-inner" data-${kendo.htmlEncode(data.ns)}bind="value: from, enabled: isDate" required="required" /></span></div>
<div data-${kendo.htmlEncode(data.ns)}bind="visible: showTo">
<div class="k-edit-label"><label for="date-comparer-end">${kendo.htmlEncode(data.messages.validationDialog.labels.end)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="date-comparer-end" name="${kendo.htmlEncode(data.messages.validationDialog.labels.end)}" title="${kendo.htmlEncode(data.messages.validationDialog.labels.end)}" class="k-input-inner" data-${kendo.htmlEncode(data.ns)}bind="value: to, enabled: showToForDate" required="required" /></span></div>
</div></div><div data-${kendo.htmlEncode(data.ns)}bind="visible: isCustom">
<div class="k-edit-label"><label for="custom-comparer-value">${kendo.htmlEncode(data.messages.validationDialog.labels.value)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="custom-comparer-value" name="${kendo.htmlEncode(data.messages.validationDialog.labels.value)}" title="${kendo.htmlEncode(data.messages.validationDialog.labels.value)}" class="k-input-inner" data-${kendo.htmlEncode(data.ns)}bind="value: from, enabled: isCustom" required="required" /></span></div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="visible: isList">
<div class="k-edit-label"><label for="list-comparer-value">${kendo.htmlEncode(data.messages.validationDialog.labels.value)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="list-comparer-value" name="${kendo.htmlEncode(data.messages.validationDialog.labels.value)}" title="${kendo.htmlEncode(data.messages.validationDialog.labels.value)}" class="k-input-inner" data-${kendo.htmlEncode(data.ns)}bind="value: from, enabled: isList" required="required" /></span></div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="visible: isList">
<div class="k-edit-field"><input type="checkbox" name="showButton" id="listShowButton" class="k-checkbox" data-${kendo.htmlEncode(data.ns)}bind="checked: showButton" /><label for="listShowButton" class="k-checkbox-label"> ${kendo.htmlEncode(data.messages.validationDialog.labels.showListButton)}</label></div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="visible: isDate">
<div class="k-edit-field"><input type="checkbox" name="showButton" id="dateShowButton" class="k-checkbox" data-${kendo.htmlEncode(data.ns)}bind="checked: showButton" /><label for="dateShowButton" class="k-checkbox-label"> ${kendo.htmlEncode(data.messages.validationDialog.labels.showCalendarButton)}</label></div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="invisible: isAny">
<div class="k-edit-field"><input type="checkbox" title="${kendo.htmlEncode(data.messages.validationDialog.labels.ignoreBlank)}" name="ignoreBlank" id="ignoreBlank" class="k-checkbox" data-${kendo.htmlEncode(data.ns)}bind="checked: ignoreBlank" /><label for="ignoreBlank" class="k-checkbox-label"> ${kendo.htmlEncode(data.messages.validationDialog.labels.ignoreBlank)}</label></div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="invisible: isAny">
<div class="k-hr"></div>
<div class="k-edit-label"><label>${kendo.htmlEncode(data.messages.validationDialog.labels.onInvalidData)}:</label></div>
<div class="k-edit-field"><input type="radio" title="${kendo.htmlEncode(data.messages.validationDialog.labels.rejectInput)}" id="validationTypeReject" name="validationType" value="reject" data-${kendo.htmlEncode(data.ns)}bind="checked: type" class="k-radio" /><label for="validationTypeReject" class="k-radio-label">${kendo.htmlEncode(data.messages.validationDialog.labels.rejectInput)}</label> <input type="radio" title="${kendo.htmlEncode(data.messages.validationDialog.labels.showWarning)}" id="validationTypeWarning" name="validationType" value="warning" data-${kendo.htmlEncode(data.ns)}bind="checked: type" class="k-radio" /><label for="validationTypeWarning" class="k-radio-label">${kendo.htmlEncode(data.messages.validationDialog.labels.showWarning)}</label></div>
</div><div data-${kendo.htmlEncode(data.ns)}bind="invisible: isAny" class="hint-wrapper">
<div class="k-edit-field"><input type="checkbox" title="${kendo.htmlEncode(data.messages.validationDialog.labels.showHint)}" name="useCustomMessages" id="useCustomMessages" class="k-checkbox" data-${kendo.htmlEncode(data.ns)}bind="checked: useCustomMessages" /><label class="k-checkbox-label" for="useCustomMessages"> ${kendo.htmlEncode(data.messages.validationDialog.labels.showHint)}</label></div>
<div data-${kendo.htmlEncode(data.ns)}bind="visible: useCustomMessages">
<div class="k-edit-label"><label for="hint-title">${kendo.htmlEncode(data.messages.validationDialog.labels.hintTitle)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="hint-title" name="hint-title" class="k-input-inner" title="${kendo.htmlEncode(data.messages.validationDialog.labels.hintTitle)}" placeholder="${kendo.htmlEncode(data.messages.validationDialog.placeholders.typeTitle)}" data-${kendo.htmlEncode(data.ns)}bind="value: hintTitle" /></span></div>
<div class="k-edit-label"><label for="hint-message">${kendo.htmlEncode(data.messages.validationDialog.labels.hintMessage)}:</label></div>
<div class="k-edit-field"><span class="k-textbox k-input"><input id="hint-message" class="k-input-inner" title="${kendo.htmlEncode(data.messages.validationDialog.labels.hintMessage)}" placeholder="${kendo.htmlEncode(data.messages.validationDialog.placeholders.typeMessage)}" data-${kendo.htmlEncode(data.ns)}bind="value: hintMessage" /></span></div>
</div></div>
<div class="k-actions"><button class="k-button" data-${kendo.htmlEncode(data.ns)}bind="visible: showRemove, click: remove"><span class="k-button-text">${kendo.htmlEncode(data.messages.remove)}</span></button><button class="k-button k-button-primary" data-${kendo.htmlEncode(data.ns)}bind="click: apply"><span class="k-button-text">${kendo.htmlEncode(data.messages.apply)}</span></button><button class="k-button" data-${kendo.htmlEncode(data.ns)}bind="click: close"><span class="k-button-text">${kendo.htmlEncode(data.messages.cancel)}</span></button></div>
</div>`;
return $kendoOutput;
}
},
open: function(range) {
var options = this.options;
var element;
this.viewModel = new ValidationViewModel({
type: options.type,
defaultHintMessage: options.hintMessage,
defaultHintTitle: opti