UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

1,021 lines (1,020 loc) • 70.2 kB
/** * DevExtreme (esm/__internal/grids/grid_core/validating/module.js) * Version: 22.1.9 * Build date: Tue Apr 18 2023 * * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import { getOuterWidth, getWidth, getOuterHeight, setHeight } from "../../../../core/utils/size"; import $ from "../../../../core/renderer"; import eventsEngine from "../../../../events/core/events_engine"; import { createObjectWithChanges } from "../../../../data/array_utils"; import { deferUpdate, equalByValue, getKeyHash } from "../../../../core/utils/common"; import { each } from "../../../../core/utils/iterator"; import { isDefined, isEmptyObject, isObject } from "../../../../core/utils/type"; import { extend } from "../../../../core/utils/extend"; import { focused } from "../../../../ui/widget/selectors"; import messageLocalization from "../../../../localization/message"; import Button from "../../../../ui/button"; import pointerEvents from "../../../../events/pointer"; import ValidationEngine from "../../../../ui/validation_engine"; import Validator from "../../../../ui/validator"; import Overlay from "../../../../ui/overlay/ui.overlay"; import errors from "../../../../ui/widget/ui.errors"; import { Deferred, when, fromPromise } from "../../../../core/utils/deferred"; import LoadIndicator from "../../../../ui/load_indicator"; import { encodeHtml } from "../../../../core/utils/string"; import browser from "../../../../core/utils/browser"; import gridCoreUtils from "../module_utils"; import modules from "../modules"; const INVALIDATE_CLASS = "invalid"; const REVERT_TOOLTIP_CLASS = "revert-tooltip"; const INVALID_MESSAGE_CLASS = "dx-invalid-message"; const WIDGET_INVALID_MESSAGE_CLASS = "invalid-message"; const INVALID_MESSAGE_ALWAYS_CLASS = "dx-invalid-message-always"; const REVERT_BUTTON_CLASS = "dx-revert-button"; const VALIDATOR_CLASS = "validator"; const PENDING_INDICATOR_CLASS = "dx-pending-indicator"; const VALIDATION_PENDING_CLASS = "dx-validation-pending"; const CONTENT_CLASS = "content"; const INSERT_INDEX = "__DX_INSERT_INDEX__"; const PADDING_BETWEEN_TOOLTIPS = 2; const EDIT_MODE_ROW = "row"; const EDIT_MODE_FORM = "form"; const EDIT_MODE_BATCH = "batch"; const EDIT_MODE_CELL = "cell"; const EDIT_MODE_POPUP = "popup"; const GROUP_CELL_CLASS = "dx-group-cell"; const FORM_BASED_MODES = ["popup", "form"]; const COMMAND_TRANSPARENT = "transparent"; const VALIDATION_STATUS = { valid: "valid", invalid: "invalid", pending: "pending" }; const EDIT_DATA_INSERT_TYPE = "insert"; const EDIT_DATA_REMOVE_TYPE = "remove"; const VALIDATION_CANCELLED = "cancel"; const validationResultIsValid = function(result) { return isDefined(result) && "cancel" !== result }; const cellValueShouldBeValidated = function(value, rowOptions) { return void 0 !== value || void 0 === value && rowOptions && !rowOptions.isNewRow }; const ValidatingController = modules.Controller.inherit({ init() { this._editingController = this.getController("editing"); this.createAction("onRowValidating"); if (!this._validationState) { this.initValidationState() } }, initValidationState() { this._validationState = []; this._validationStateCache = {} }, _rowIsValidated(change) { const validationData = this._getValidationData(null === change || void 0 === change ? void 0 : change.key); return !!validationData && !!validationData.validated }, _getValidationData(key, create) { const keyHash = getKeyHash(key); const isObjectKeyHash = isObject(keyHash); let validationData; if (isObjectKeyHash) { validationData = this._validationState.filter(data => equalByValue(data.key, key))[0] } else { validationData = this._validationStateCache[keyHash] } if (!validationData && create) { validationData = { key: key, isValid: true }; this._validationState.push(validationData); if (!isObjectKeyHash) { this._validationStateCache[keyHash] = validationData } } return validationData }, _getBrokenRules(validationData, validationResults) { let brokenRules; if (validationResults) { brokenRules = validationResults.brokenRules || validationResults.brokenRule && [validationResults.brokenRule] } else { brokenRules = validationData.brokenRules || [] } return brokenRules }, _rowValidating(validationData, validationResults) { const deferred = new Deferred; const change = this._editingController.getChangeByKey(null === validationData || void 0 === validationData ? void 0 : validationData.key); const brokenRules = this._getBrokenRules(validationData, validationResults); const isValid = validationResults ? validationResults.isValid : validationData.isValid; const parameters = { brokenRules: brokenRules, isValid: isValid, key: change.key, newData: change.data, oldData: this._editingController._getOldData(change.key), promise: null, errorText: this.getHiddenValidatorsErrorText(brokenRules) }; this.executeAction("onRowValidating", parameters); when(fromPromise(parameters.promise)).always(() => { validationData.isValid = parameters.isValid; validationData.errorText = parameters.errorText; deferred.resolve(parameters) }); return deferred.promise() }, getHiddenValidatorsErrorText(brokenRules) { const brokenRulesMessages = []; each(brokenRules, (_, brokenRule) => { const { column: column } = brokenRule; const isGroupExpandColumn = column && void 0 !== column.groupIndex && !column.showWhenGrouped; const isVisibleColumn = column && column.visible; if (!brokenRule.validator.$element().parent().length && (!isVisibleColumn || isGroupExpandColumn)) { brokenRulesMessages.push(brokenRule.message) } }); return brokenRulesMessages.join(", ") }, validate(isFull) { let isValid = true; const editingController = this._editingController; const deferred = new Deferred; const completeList = []; const editMode = editingController.getEditMode(); isFull = isFull || "row" === editMode; if (this._isValidationInProgress) { return deferred.resolve(false).promise() } this._isValidationInProgress = true; if (isFull) { editingController.addDeferred(deferred); const changes = editingController.getChanges(); each(changes, (index, { type: type, key: key }) => { if ("remove" !== type) { const validationData = this._getValidationData(key, true); const validationResult = this.validateGroup(validationData); completeList.push(validationResult); validationResult.done(validationResult => { validationData.validated = true; isValid = isValid && validationResult.isValid }) } }) } else if (this._currentCellValidator) { const validationResult = this.validateGroup(this._currentCellValidator._findGroup()); completeList.push(validationResult); validationResult.done(validationResult => { isValid = validationResult.isValid }) } when(...completeList).done(() => { this._isValidationInProgress = false; deferred.resolve(isValid) }); return deferred.promise() }, validateGroup(validationData) { const result = new Deferred; const validateGroup = validationData && ValidationEngine.getGroupConfig(validationData); let validationResult; if (null === validateGroup || void 0 === validateGroup ? void 0 : validateGroup.validators.length) { this.resetRowValidationResults(validationData); validationResult = ValidationEngine.validateGroup(validationData) } when((null === validationResult || void 0 === validationResult ? void 0 : validationResult.complete) || validationResult).done(validationResult => { when(this._rowValidating(validationData, validationResult)).done(result.resolve) }); return result.promise() }, isRowDataModified: change => !isEmptyObject(change.data), updateValidationState(change) { const editMode = this._editingController.getEditMode(); const { key: key } = change; const validationData = this._getValidationData(key, true); if (!FORM_BASED_MODES.includes(editMode)) { if ("insert" === change.type && !this.isRowDataModified(change)) { validationData.isValid = true; return } this.setDisableApplyValidationResults(true); const groupConfig = ValidationEngine.getGroupConfig(validationData); if (groupConfig) { const validationResult = ValidationEngine.validateGroup(validationData); when(validationResult.complete || validationResult).done(validationResult => { validationData.isValid = validationResult.isValid; validationData.brokenRules = validationResult.brokenRules }) } else if (!validationData.brokenRules || !validationData.brokenRules.length) { validationData.isValid = true } this.setDisableApplyValidationResults(false) } else { validationData.isValid = true } }, setValidator(validator) { this._currentCellValidator = validator }, renderCellPendingIndicator($container) { let $indicator = $container.find(".dx-pending-indicator"); if (!$indicator.length) { const $indicatorContainer = $container; $indicator = $("<div>").appendTo($indicatorContainer).addClass("dx-pending-indicator"); this._createComponent($indicator, LoadIndicator); $container.addClass("dx-validation-pending") } }, disposeCellPendingIndicator($container) { const $indicator = $container.find(".dx-pending-indicator"); if ($indicator.length) { const indicator = LoadIndicator.getInstance($indicator); if (indicator) { indicator.dispose(); indicator.$element().remove() } $container.removeClass("dx-validation-pending") } }, validationStatusChanged(result) { const { validator: validator } = result; const validationGroup = validator.option("validationGroup"); const { column: column } = validator.option("dataGetter")(); this.updateCellValidationResult({ rowKey: validationGroup.key, columnIndex: column.index, validationResult: result }) }, validatorInitialized(arg) { arg.component.on("validating", this.validationStatusChanged.bind(this)); arg.component.on("validated", this.validationStatusChanged.bind(this)) }, validatorDisposing(arg) { const validator = arg.component; const validationGroup = validator.option("validationGroup"); const { column: column } = validator.option("dataGetter")(); const result = this.getCellValidationResult({ rowKey: null === validationGroup || void 0 === validationGroup ? void 0 : validationGroup.key, columnIndex: column.index }); if (validationResultIsValid(result) && result.status === VALIDATION_STATUS.pending) { this.cancelCellValidationResult({ change: validationGroup, columnIndex: column.index }) } }, applyValidationResult($container, result) { const { validator: validator } = result; const validationGroup = validator.option("validationGroup"); const { column: column } = validator.option("dataGetter")(); result.brokenRules && result.brokenRules.forEach(rule => { rule.columnIndex = column.index; rule.column = column }); if ($container) { const validationResult = this.getCellValidationResult({ rowKey: validationGroup.key, columnIndex: column.index }); const requestIsDisabled = validationResultIsValid(validationResult) && validationResult.disabledPendingId === result.id; if (this._disableApplyValidationResults || requestIsDisabled) { return } if (result.status === VALIDATION_STATUS.invalid) { const $focus = $container.find(":focus"); if (!focused($focus)) { eventsEngine.trigger($focus, "focus"); eventsEngine.trigger($focus, pointerEvents.down) } } const editor = !column.editCellTemplate && this.getController("editorFactory").getEditorInstance($container); if (result.status === VALIDATION_STATUS.pending) { if (editor) { editor.option("validationStatus", VALIDATION_STATUS.pending) } else { this.renderCellPendingIndicator($container) } } else if (editor) { editor.option("validationStatus", VALIDATION_STATUS.valid) } else { this.disposeCellPendingIndicator($container) } $container.toggleClass(this.addWidgetPrefix("invalid"), result.status === VALIDATION_STATUS.invalid) } }, _syncInternalEditingData(parameters) { var _a; const editingController = this._editingController; const change = editingController.getChangeByKey(parameters.key); const oldDataFromState = editingController._getOldData(parameters.key); const oldData = null === (_a = parameters.row) || void 0 === _a ? void 0 : _a.oldData; if (change && oldData && !oldDataFromState) { editingController._addInternalData({ key: parameters.key, oldData: oldData }) } }, createValidator(parameters, $container) { var _a, _b; const editingController = this._editingController; const { column: column } = parameters; let { showEditorAlways: showEditorAlways } = column; if (isDefined(column.command) || !column.validationRules || !Array.isArray(column.validationRules) || !column.validationRules.length) { return } const editIndex = editingController.getIndexByKey(parameters.key, editingController.getChanges()); let needCreateValidator = editIndex > -1; if (!needCreateValidator) { if (!showEditorAlways) { const columnsController = this.getController("columns"); const visibleColumns = (null === columnsController || void 0 === columnsController ? void 0 : columnsController.getVisibleColumns()) || []; showEditorAlways = visibleColumns.some(column => column.showEditorAlways) } const isEditRow = equalByValue(this.option("editing.editRowKey"), parameters.key); const isCellOrBatchEditingAllowed = editingController.isCellOrBatchEditMode() && editingController.allowUpdating({ row: parameters.row }); needCreateValidator = isEditRow || isCellOrBatchEditingAllowed && showEditorAlways; if (isCellOrBatchEditingAllowed && showEditorAlways) { editingController._addInternalData({ key: parameters.key, oldData: null !== (_b = null === (_a = parameters.row) || void 0 === _a ? void 0 : _a.oldData) && void 0 !== _b ? _b : parameters.data }) } } if (needCreateValidator) { if ($container && !$container.length) { errors.log("E1050"); return } this._syncInternalEditingData(parameters); const validationData = this._getValidationData(parameters.key, true); const getValue = () => { const change = editingController.getChangeByKey(null === validationData || void 0 === validationData ? void 0 : validationData.key); const value = column.calculateCellValue((null === change || void 0 === change ? void 0 : change.data) || {}); return void 0 !== value ? value : parameters.value }; const useDefaultValidator = $container && $container.hasClass("dx-widget"); $container && $container.addClass(this.addWidgetPrefix("validator")); const validator = new Validator($container || $("<div>"), { name: column.caption, validationRules: extend(true, [], column.validationRules), validationGroup: validationData, adapter: useDefaultValidator ? null : { getValue: getValue, applyValidationResults: result => { this.applyValidationResult($container, result) } }, dataGetter() { const key = null === validationData || void 0 === validationData ? void 0 : validationData.key; const change = editingController.getChangeByKey(key); const oldData = editingController._getOldData(key); return { data: createObjectWithChanges(oldData, null === change || void 0 === change ? void 0 : change.data), column: column } }, onInitialized: this.validatorInitialized.bind(this), onDisposing: this.validatorDisposing.bind(this) }); if (useDefaultValidator) { const adapter = validator.option("adapter"); if (adapter) { const originBypass = adapter.bypass; const defaultAdapterBypass = () => parameters.row.isNewRow && !this._isValidationInProgress && !editingController.isCellModified(parameters); adapter.getValue = getValue; adapter.validationRequestsCallbacks = []; adapter.bypass = () => originBypass.call(adapter) || defaultAdapterBypass() } } return validator } return }, setDisableApplyValidationResults(flag) { this._disableApplyValidationResults = flag }, getDisableApplyValidationResults() { return this._disableApplyValidationResults }, isCurrentValidatorProcessing({ rowKey: rowKey, columnIndex: columnIndex }) { return this._currentCellValidator && equalByValue(this._currentCellValidator.option("validationGroup").key, rowKey) && this._currentCellValidator.option("dataGetter")().column.index === columnIndex }, validateCell(validator) { const cellParams = { rowKey: validator.option("validationGroup").key, columnIndex: validator.option("dataGetter")().column.index }; let validationResult = this.getCellValidationResult(cellParams); const stateRestored = validationResultIsValid(validationResult); const adapter = validator.option("adapter"); if (!stateRestored) { validationResult = validator.validate() } else { const currentCellValue = adapter.getValue(); if (!equalByValue(currentCellValue, validationResult.value)) { validationResult = validator.validate() } } const deferred = new Deferred; if (stateRestored && validationResult.status === VALIDATION_STATUS.pending) { this.updateCellValidationResult(cellParams); adapter.applyValidationResults(validationResult) } when(validationResult.complete || validationResult).done(validationResult => { stateRestored && adapter.applyValidationResults(validationResult); deferred.resolve(validationResult) }); return deferred.promise() }, updateCellValidationResult({ rowKey: rowKey, columnIndex: columnIndex, validationResult: validationResult }) { const validationData = this._getValidationData(rowKey); if (!validationData) { return } if (!validationData.validationResults) { validationData.validationResults = {} } let result; if (validationResult) { result = extend({}, validationResult); validationData.validationResults[columnIndex] = result; if (validationResult.status === VALIDATION_STATUS.pending) { if ("cell" === this._editingController.getEditMode()) { result.deferred = new Deferred; result.complete.always(() => { result.deferred.resolve() }); this._editingController.addDeferred(result.deferred) } if (this._disableApplyValidationResults) { result.disabledPendingId = validationResult.id; return } } } else { result = validationData.validationResults[columnIndex] } if (result && result.disabledPendingId) { delete result.disabledPendingId } }, getCellValidationResult({ rowKey: rowKey, columnIndex: columnIndex }) { var _a; const validationData = this._getValidationData(rowKey, true); return null === (_a = null === validationData || void 0 === validationData ? void 0 : validationData.validationResults) || void 0 === _a ? void 0 : _a[columnIndex] }, removeCellValidationResult({ change: change, columnIndex: columnIndex }) { const validationData = this._getValidationData(null === change || void 0 === change ? void 0 : change.key); if (validationData && validationData.validationResults) { this.cancelCellValidationResult({ change: change, columnIndex: columnIndex }); delete validationData.validationResults[columnIndex] } }, cancelCellValidationResult({ change: change, columnIndex: columnIndex }) { const validationData = this._getValidationData(change.key); if (change && validationData.validationResults) { const result = validationData.validationResults[columnIndex]; if (result) { result.deferred && result.deferred.reject("cancel"); validationData.validationResults[columnIndex] = "cancel" } } }, resetRowValidationResults(validationData) { if (validationData) { validationData.validationResults && delete validationData.validationResults; delete validationData.validated } }, isInvalidCell({ rowKey: rowKey, columnIndex: columnIndex }) { const result = this.getCellValidationResult({ rowKey: rowKey, columnIndex: columnIndex }); return validationResultIsValid(result) && result.status === VALIDATION_STATUS.invalid }, getCellValidator({ rowKey: rowKey, columnIndex: columnIndex }) { const validationData = this._getValidationData(rowKey); const groupConfig = validationData && ValidationEngine.getGroupConfig(validationData); const validators = groupConfig && groupConfig.validators; return validators && validators.filter(v => { const { column: column } = v.option("dataGetter")(); return column ? column.index === columnIndex : false })[0] }, setCellValidationStatus(cellOptions) { const validationResult = this.getCellValidationResult({ rowKey: cellOptions.key, columnIndex: cellOptions.column.index }); if (isDefined(validationResult)) { cellOptions.validationStatus = "cancel" !== validationResult ? validationResult.status : "cancel" } else { delete cellOptions.validationStatus } } }); export const validatingModule = { defaultOptions: () => ({ editing: { texts: { validationCancelChanges: messageLocalization.format("dxDataGrid-validationCancelChanges") } } }), controllers: { validating: ValidatingController }, extenders: { controllers: { editing: { _addChange(changeParams) { const change = this.callBase.apply(this, arguments); const validatingController = this.getController("validating"); if (change && "remove" !== changeParams.type) { validatingController.updateValidationState(change) } return change }, _handleChangesChange(args) { this.callBase.apply(this, arguments); const validatingController = this.getController("validating"); args.value.forEach(change => { if (void 0 === validatingController._getValidationData(change.key)) { validatingController.updateValidationState(change) } }) }, _updateRowAndPageIndices() { const that = this; const startInsertIndex = that.getView("rowsView").getTopVisibleItemIndex(); let rowIndex = startInsertIndex; each(that.getChanges(), (_, { key: key, type: type }) => { const validationData = this.getController("validating")._getValidationData(key); if (validationData && !validationData.isValid && validationData.pageIndex !== that._pageIndex) { validationData.pageIndex = that._pageIndex; if ("insert" === type) { validationData.rowIndex = startInsertIndex } else { validationData.rowIndex = rowIndex } rowIndex++ } }) }, _getValidationGroupsInForm(detailOptions) { const validatingController = this.getController("validating"); const validationData = validatingController._getValidationData(detailOptions.key, true); return { validationGroup: validationData } }, _validateEditFormAfterUpdate(row, isCustomSetCellValue) { if (isCustomSetCellValue && this._editForm) { this._editForm.validate() } this.callBase.apply(this, arguments) }, _prepareEditCell(params) { const isNotCanceled = this.callBase.apply(this, arguments); const validatingController = this.getController("validating"); if (isNotCanceled && params.column.showEditorAlways) { validatingController.updateValidationState({ key: params.key }) } return isNotCanceled }, processItems(items, changeType) { const changes = this.getChanges(); const dataController = this.getController("data"); const validatingController = this.getController("validating"); items = this.callBase(items, changeType); const itemsCount = items.length; const addInValidItem = function(change, validationData) { const data = { key: change.key }; const index = function(change, items) { let index = -1; const isInsert = "insert" === change.type; const { key: key } = change; each(items, (i, item) => { if (equalByValue(key, isInsert ? item.key : dataController.keyOf(item))) { index = i; return false } return }); return index }(change, items); if (index >= 0) { return } validationData.rowIndex = validationData.rowIndex > itemsCount ? validationData.rowIndex % itemsCount : validationData.rowIndex; const { rowIndex: rowIndex } = validationData; data[INSERT_INDEX] = 1; items.splice(rowIndex, 0, data) }; if ("batch" === this.getEditMode() && "prepend" !== changeType && "append" !== changeType) { changes.forEach(change => { const { key: key } = change; const validationData = validatingController._getValidationData(key); if (validationData && change.type && validationData.pageIndex === this._pageIndex && (null === change || void 0 === change ? void 0 : change.pageIndex) !== this._pageIndex) { addInValidItem(change, validationData) } }) } return items }, processDataItem(item) { const isInserted = item.data[INSERT_INDEX]; const key = isInserted ? item.data.key : item.key; const editMode = this.getEditMode(); if ("batch" === editMode && isInserted && key) { const changes = this.getChanges(); const editIndex = gridCoreUtils.getIndexByKey(key, changes); if (editIndex >= 0) { const change = changes[editIndex]; if ("insert" !== change.type) { const oldData = this._getOldData(change.key); item.data = extend(true, {}, oldData, change.data); item.key = key } } } this.callBase.apply(this, arguments) }, _createInvisibleColumnValidators(changes) { const that = this; const validatingController = this.getController("validating"); const columnsController = this.getController("columns"); const columns = columnsController.getColumns(); const invisibleColumns = columnsController.getInvisibleColumns().filter(column => !column.isBand); const groupColumns = columnsController.getGroupColumns().filter(column => !column.showWhenGrouped && -1 === invisibleColumns.indexOf(column)); const invisibleColumnValidators = []; const isCellVisible = (column, rowKey) => this._dataController.getRowIndexByKey(rowKey) >= 0 && invisibleColumns.indexOf(column) < 0; invisibleColumns.push(...groupColumns); if (!FORM_BASED_MODES.includes(this.getEditMode())) { each(columns, (_, column) => { changes.forEach(change => { let data; if (isCellVisible(column, change.key)) { return } if ("insert" === change.type) { data = change.data } else if ("update" === change.type) { const oldData = that._getOldData(change.key); data = createObjectWithChanges(oldData, change.data) } if (data) { const validator = validatingController.createValidator({ column: column, key: change.key, value: column.calculateCellValue(data) }); if (validator) { invisibleColumnValidators.push(validator) } } }) }) } return function() { invisibleColumnValidators.forEach(validator => { validator.dispose() }) } }, _beforeSaveEditData(change, editIndex) { let result = this.callBase.apply(this, arguments); const validatingController = this.getController("validating"); const validationData = validatingController._getValidationData(null === change || void 0 === change ? void 0 : change.key); if (change) { const isValid = "remove" === change.type || validationData.isValid; result = result || !isValid } else { const disposeValidators = this._createInvisibleColumnValidators(this.getChanges()); result = new Deferred; this.executeOperation(result, () => { validatingController.validate(true).done(isFullValid => { disposeValidators(); this._updateRowAndPageIndices(); switch (this.getEditMode()) { case "cell": if (!isFullValid) { this._focusEditingCell() } break; case "batch": if (!isFullValid) { this._resetEditRowKey(); this._resetEditColumnName(); this.getController("data").updateItems() } } result.resolve(!isFullValid) }) }) } return result.promise ? result.promise() : result }, _beforeEditCell(rowIndex, columnIndex, item) { const result = this.callBase(rowIndex, columnIndex, item); if ("cell" === this.getEditMode()) { const $cell = this._rowsView._getCellElement(rowIndex, columnIndex); const validator = $cell && $cell.data("dxValidator"); const rowOptions = $cell && $cell.closest(".dx-row").data("options"); const value = validator && validator.option("adapter").getValue(); if (validator && cellValueShouldBeValidated(value, rowOptions)) { const validatingController = this.getController("validating"); const deferred = new Deferred; when(validatingController.validateCell(validator), result).done((validationResult, result) => { deferred.resolve(validationResult.status === VALIDATION_STATUS.valid && result) }); return deferred.promise() } if (!validator) { return result } } }, _afterSaveEditData(cancel) { let $firstErrorRow; const isCellEditMode = "cell" === this.getEditMode(); each(this.getChanges(), (_, change) => { const $errorRow = this._showErrorRow(change); $firstErrorRow = $firstErrorRow || $errorRow }); if ($firstErrorRow) { const scrollable = this._rowsView.getScrollable(); if (scrollable) { scrollable.update(); scrollable.scrollToElement($firstErrorRow) } } if (cancel && isCellEditMode && this._needUpdateRow()) { const editRowIndex = this.getEditRowIndex(); this._dataController.updateItems({ changeType: "update", rowIndices: [editRowIndex] }); this._focusEditingCell() } else if (!cancel) { let shouldResetValidationState = true; if (isCellEditMode) { const columns = this.getController("columns").getColumns(); const columnsWithValidatingEditors = columns.filter(col => { var _a; return col.showEditorAlways && (null === (_a = col.validationRules) || void 0 === _a ? void 0 : _a.length) > 0 }).length > 0; shouldResetValidationState = !columnsWithValidatingEditors } if (shouldResetValidationState) { this.getController("validating").initValidationState() } } }, _handleDataChanged(args) { const validationState = this.getController("validating")._validationState; if ("standard" === this.option("scrolling.mode")) { this.resetRowAndPageIndices() } if ("prepend" === args.changeType) { each(validationState, (_, validationData) => { validationData.rowIndex += args.items.length }) } this.callBase(args) }, resetRowAndPageIndices() { const validationState = this.getController("validating")._validationState; each(validationState, (_, validationData) => { if (validationData.pageIndex !== this._pageIndex) { delete validationData.pageIndex; delete validationData.rowIndex } }) }, _beforeCancelEditData() { this.getController("validating").initValidationState(); this.callBase() }, _showErrorRow(change) { let $popupContent; const errorHandling = this.getController("errorHandling"); const items = this.getController("data").items(); const rowIndex = this.getIndexByKey(change.key, items); const validationData = this.getController("validating")._getValidationData(change.key); if (!(null === validationData || void 0 === validationData ? void 0 : validationData.isValid) && (null === validationData || void 0 === validationData ? void 0 : validationData.errorText) && rowIndex >= 0) { $popupContent = this.getPopupContent(); return errorHandling && errorHandling.renderErrorRow(null === validationData || void 0 === validationData ? void 0 : validationData.errorText, rowIndex, $popupContent) } }, updateFieldValue(e) { const validatingController = this.getController("validating"); const deferred = new Deferred; validatingController.removeCellValidationResult({ change: this.getChangeByKey(e.key), columnIndex: e.column.index }); this.callBase.apply(this, arguments).done(() => { const currentValidator = validatingController.getCellValidator({ rowKey: e.key, columnIndex: e.column.index }); when(currentValidator && validatingController.validateCell(currentValidator)).done(validationResult => { this.getController("editorFactory").refocus(); deferred.resolve(validationResult) }) }); return deferred.promise() }, highlightDataCell($cell, parameters) { this.callBase.apply(this, arguments); const validatingController = this.getController("validating"); validatingController.setCellValidationStatus(parameters); const isEditableCell = !!parameters.setValue; const cellModified = this.isCellModified(parameters); const isValidated = isDefined(parameters.validationStatus); const needValidation = cellModified && parameters.column.setCellValue || isEditableCell && !cellModified && !(parameters.row.isNewRow || !isValidated); if (needValidation) { const validator = $cell.data("dxValidator"); if (validator) { when(this.getController("validating").validateCell(validator)).done(() => { validatingController.setCellValidationStatus(parameters) }) } } }, getChangeByKey(key) { const changes = this.getChanges(); return changes[gridCoreUtils.getIndexByKey(key, changes)] }, isCellModified(parameters) { const cellModified = this.callBase(parameters); const change = this.getChangeByKey(parameters.key); const isCellInvalid = !!parameters.row && this.getController("validating").isInvalidCell({ rowKey: parameters.key, columnIndex: parameters.column.index }); return cellModified || this.getController("validating")._rowIsValidated(change) && isCellInvalid } }, editorFactory: { _showRevertButton($container) { var _a; let $tooltipElement = null === (_a = this._revertTooltip) || void 0 === _a ? void 0 : _a.$element(); if (!$container || !$container.length) { null === $tooltipElement || void 0 === $tooltipElement ? void 0 : $tooltipElement.remove(); this._revertTooltip = void 0; return } if ($container.find($tooltipElement).length) { return } const $overlayContainer = $container.closest("." + this.addWidgetPrefix("content")); null === $tooltipElement || void 0 === $tooltipElement ? void 0 : $tooltipElement.remove(); $tooltipElement = $("<div>").addClass(this.addWidgetPrefix("revert-tooltip")).appendTo($container); const tooltipOptions = { animation: null, visible: true, width: "auto", height: "auto", shading: false, container: $overlayContainer, propagateOutsideClick: true, hideOnOutsideClick: false, copyRootClassesToWrapper: true, _ignoreCopyRootClassesToWrapperDeprecation: true, contentTemplate: () => { const $buttonElement = $("<div>").addClass("dx-revert-button"); const buttonOptions = { icon: "revert", hint: this.option("editing.texts.validationCancelChanges"), onClick: () => { this._editingController.cancelEditData() } }; return new Button($buttonElement, buttonOptions).$element() }, position: { my: "left top", at: "right top", offset: "1 0", collision: "flip", boundaryOffset: "0 0", boundary: this._rowsView.element(), of: $container }, onPositioned: this._positionedHandler.bind(this) }; this._revertTooltip = new Overlay($tooltipElement, tooltipOptions) }, _hideFixedGroupCell($cell, overlayOptions) { let $nextFixedRowElement; let $groupCellElement; const isFixedColumns = this._rowsView.isFixedColumns(); const isFormOrPopupEditMode = this._editingController.isFormOrPopupEditMode(); if (isFixedColumns && !isFormOrPopupEditMode) { const nextRowOptions = $cell.closest(".dx-row").next().data("options"); if (nextRowOptions && "group" === nextRowOptions.rowType) { $nextFixedRowElement = $(this._rowsView.getRowElement(nextRowOptions.rowIndex)).last(); $groupCellElement = $nextFixedRowElement.find(".dx-group-cell"); if ($groupCellElement.length && "hidden" !== $groupCellElement.get(0).style.visibility) {