Validation | Features | MESCIUS DataViewsJS JavaScript Demos

This example demonstrates how to use editing validation in the DataViews grid. Before starting editing, Spread.Views fires the editing event. There are four states in the editing life cycle in a normal case. They include beforeStartEditing, startEditing, beforeEndEditing, and endEditing. If the user cancels editing, there are only three states, since beforeEndEditing and endEditing are replaced by cancelEditing. These states offer the opportunity for users to do what they want. This demo sets the validation on the Country and Amount columns during the beforeEndEditing and cancelEditing states. If the committed value does not satisfy the validation, then editing is not stopped by setting args.cancel=true.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Editing/Validation/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="editing, editor, data editor, data editing, validation" />
<meta name="description" content="This example demonstrates how to use editing validation in the DataViews grid." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Validation | Features | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="grid" class="grid"></div>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var cols = [
{
id: 'id',
caption: 'Id',
dataField: 'id',
width: 80,
allowEditing: false,
},
{
id: 'country',
caption: 'Country',
dataField: 'country',
width: 150,
dataType: 'string',
},
{
id: 'date',
caption: 'Date',
dataField: 'date',
width: 150,
dataType: 'date',
},
{
id: 'amount',
caption: 'Amount',
dataField: 'amount',
width: 80,
format: '$#,##',
dataType: 'number',
},
{
id: 'active',
caption: 'Active',
dataField: 'active',
width: 80,
dataType: 'boolean',
},
];
var layout = new GC.DataViews.GridLayout({
allowEditing: true,
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
dataView.editing.addHandler(function (e) {
var status = e.status;
if (status === 'beforeStartEditing') {
unInstallValidationUI('country');
unInstallValidationUI('amount');
}
if (e.status === 'beforeEndEditing' || e.status === 'cancelEditing') {
var cancel = checkValidation('country', e.newItem, countryRule);
cancel = checkValidation('amount', e.newItem, amountRule) || cancel;
e.cancel = cancel;
}
});
function checkValidation(colID, item, rule) {
if (item) {
var ruleInfo = rule(item);
if (ruleInfo.validate) {
installValidationUI(colID, ruleInfo.message);
return true;
}
}
unInstallValidationUI(colID);
return false;
}
function amountRule(item) {
var amount = item.amount;
if (amount < 0) {
return {
validate: true,
message: 'Amount field should be a positive number.',
};
}
return {
validate: false,
};
}
function countryRule(item) {
var country = item.country;
if (!country) {
return {
validate: true,
message: 'Country field could not be emptry string.',
};
}
var matchStr = /[a-zA-Z]+/.exec(country);
if (!matchStr || matchStr[0] !== country) {
return {
validate: true,
message: 'Country field could be a string contains a-z or A-Z.',
};
}
if (country[0].toUpperCase() !== country[0]) {
return {
validate: true,
message: 'Country field first letter should be uppercase.',
};
}
return {
validate: false,
};
}
function installValidationUI(colID, message) {
unInstallValidationUI(colID);
var editCol = document.querySelector('.gc-popup-dialog [data-column="'.concat(colID, '"]'));
var rect = editCol && getElementRect(editCol);
var eleLeft = rect.left;
var eleTop = rect.top + rect.height;
var html = '<div class="v-container '
.concat(colID, '" style="position:absolute;left:')
.concat(eleLeft, 'px;top:')
.concat(eleTop, 'px;">\n  <div class="v-arrow"></div>\n  <div class="v-content">\n    <span class="v-message">')
.concat(message, '</span>\n  </div>\n</div>');
var element = createElement(html);
document.body.appendChild(element);
}
function unInstallValidationUI(colID) {
var element = document.querySelector('.v-container.'.concat(colID));
if (element) {
element.parentNode.removeChild(element);
}
}
function getElementRect(e) {
var rc = e.getBoundingClientRect();
return {
left: rc.left + window.pageXOffset,
top: rc.top + window.pageYOffset,
width: rc.width,
height: rc.height,
};
}
function createElement(html) {
var div = document.createElement('div');
div.innerHTML = html;
return div.children[0];
}

var countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];
var data = [];
for (var i = 0; i < 100; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2019, i % 12, i % 28 + 1),
amount: Math.floor(Math.random() * 10000),
active: i % 4 === 0
});
}

.v-container {
display: inline-block;
font-size: 13px;
}
.v-content {
background: #ffe95d;
border-radius: 5px;
margin: 5px 3px;
padding: 5px;
position: relative;
width: 135px;
}
.v-arrow {
border: solid transparent;
border-bottom: solid #ffe95d;
border-width: 5px;
left: 25px;
position: absolute;
top: -5px;
}
.gc-editing-template-field input[type=checkbox] {
width: auto;
}
@media only screen and (max-width: 768px) {
.gc-popup-editing-area {
width: 300px;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0VkaXRpbmcvVmFsaWRhdGlvbi9wdXJlanMvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9FZGl0aW5nL1ZhbGlkYXRpb24vcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxxQkFBQTtFQUNBLGVBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0Esa0JBQUE7RUFDQSxlQUFBO0VBQ0EsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7RUFDQSw0QkFBQTtFQUNBLGlCQUFBO0VBQ0EsVUFBQTtFQUNBLGtCQUFBO0VBQ0EsU0FBQTtBQ0NGOztBREVBO0VBQ0UsV0FBQTtBQ0NGOztBREVBO0VBQ0U7SUFDRSxZQUFBO0VDQ0Y7QUFDRiIsImZpbGUiOiJGZWF0dXJlcy9FZGl0aW5nL1ZhbGlkYXRpb24vcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIudi1jb250YWluZXIge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGZvbnQtc2l6ZTogMTNweDtcbn1cblxuLnYtY29udGVudCB7XG4gIGJhY2tncm91bmQ6ICNmZmU5NWQ7XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgbWFyZ2luOiA1cHggM3B4O1xuICBwYWRkaW5nOiA1cHg7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgd2lkdGg6IDEzNXB4O1xufVxuXG4udi1hcnJvdyB7XG4gIGJvcmRlcjogc29saWQgdHJhbnNwYXJlbnQ7XG4gIGJvcmRlci1ib3R0b206IHNvbGlkICNmZmU5NWQ7XG4gIGJvcmRlci13aWR0aDogNXB4O1xuICBsZWZ0OiAyNXB4O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogLTVweDtcbn1cblxuLmdjLWVkaXRpbmctdGVtcGxhdGUtZmllbGQgaW5wdXRbdHlwZT0nY2hlY2tib3gnXSB7XG4gIHdpZHRoOiBhdXRvO1xufVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC5nYy1wb3B1cC1lZGl0aW5nLWFyZWEge1xuICAgIHdpZHRoOiAzMDBweDtcbiAgfVxufVxuIiwiLnYtY29udGFpbmVyIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBmb250LXNpemU6IDEzcHg7XG59XG5cbi52LWNvbnRlbnQge1xuICBiYWNrZ3JvdW5kOiAjZmZlOTVkO1xuICBib3JkZXItcmFkaXVzOiA1cHg7XG4gIG1hcmdpbjogNXB4IDNweDtcbiAgcGFkZGluZzogNXB4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMzVweDtcbn1cblxuLnYtYXJyb3cge1xuICBib3JkZXI6IHNvbGlkIHRyYW5zcGFyZW50O1xuICBib3JkZXItYm90dG9tOiBzb2xpZCAjZmZlOTVkO1xuICBib3JkZXItd2lkdGg6IDVweDtcbiAgbGVmdDogMjVweDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IC01cHg7XG59XG5cbi5nYy1lZGl0aW5nLXRlbXBsYXRlLWZpZWxkIGlucHV0W3R5cGU9Y2hlY2tib3hdIHtcbiAgd2lkdGg6IGF1dG87XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLmdjLXBvcHVwLWVkaXRpbmctYXJlYSB7XG4gICAgd2lkdGg6IDMwMHB4O1xuICB9XG59Il19 */