Validation

This example demonstrates how to use editing validation in the DataViews grid.

<p>This example demonstrates how to use editing validation in the DataViews grid.</p> <p>Before starting editing, Spread.Views fires the <strong>editing</strong> event. There are four states in the editing life cycle in a normal case. They include <strong>beforeStartEditing</strong>, <strong>startEditing</strong>, <strong>beforeEndEditing</strong>, and <strong>endEditing</strong>. If the user cancels editing, there are only three states, since <strong>beforeEndEditing</strong> and <strong>endEditing</strong> are replaced by <strong>cancelEditing</strong>. These states offer the opportunity for users to do what they want.</p> <p>This demo sets the validation on the <strong>Country</strong> and <strong>Amount</strong> columns during the <strong>beforeEndEditing</strong> and <strong>cancelEditing</strong> states. If the committed value does not satisfy the validation, then editing is not stopped by setting <strong>args.cancel=true</strong>.</p>
<!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 | GrapeCity 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" /> <!-- Google Tag Manager --> <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <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: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </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"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display:none;visibility:hidden" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <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 = e.newItem && checkValidation('country', e.newItem, countryRule); cancel = (e.newItem && checkValidation('amount', e.newItem, amountRule)) || cancel; e.cancel = cancel; } }); function checkValidation(colID, item, rule) { 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 */