Editor Mode

This example demonstrates how to make a DataViews grid writable and how to use the three editing modes.

<p>This example demonstrates how to make a DataViews grid writable and how to use the three editing modes.</p> <p>DataViews is read-only by default, but you can enable editing by setting the <strong>allowEditing</strong> property to <strong>true</strong>. In addition, the <strong>allowEditing</strong> property is <strong>true</strong> by default when it comes to particular columns. When a view is editable, the user double-clicks to activate editing mode and a data type-appropriate editor appears for each field. The default mode is inline.</p> <p>There are three editing modes:</p> <ul> <li><strong>inline</strong>: Edit controls appear in each cell of the row.</li> <li><strong>popup</strong>: Edit controls appear in a pop-up window.</li> <li><strong>editForm</strong>: Edit controls appear in a container below the row.</li> </ul> <p>In this example, you can choose the <strong>Edit Unit</strong> and <strong>Edit Mode</strong> via the drop-down boxes above the grid. Both the <strong>Edit Unit</strong> and the <strong>Edit Mode</strong> can be set in code with the <strong>layoutEngine.options</strong> property.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Editing/EditorMode/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="editing, editor, data editor, data editing" /> <meta name="description" content="This example demonstrates how to make a DataViews grid writable and how to use the three editing modes." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Editor Mode | 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/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></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 class="main-container"> <div class="sample-options"> <div class="option-row"> <label>Edit unit:</label> <select id="grid-edit-unit"> <option value="row" selected> row </option> <option value="cell"> cell </option> </select> </div> <div class="option-row"> <label>Edit mode:</label> <select id="grid-edit-mode"> <option value="inline" selected> inline </option> <option value="popup"> popup </option> <option value="editForm"> editForm </option> </select> </div> </div> <div id="grid" class="grid"></div> </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: 80, 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); $('#grid-edit-mode').change(function() { dataView.layoutEngine.options.editMode = $('#grid-edit-mode').val(); }); $('#grid-edit-unit').change(function() { var value = $('#grid-edit-unit').val(); var options = dataView.layoutEngine.options; options.editUnit = value; options.selectionUnit = value; var editMode = $('#grid-edit-mode'); if (value === 'cell') { options.editMode = 'inline'; editMode.val('inline'); editMode.attr('disabled', 'disabled'); } else { editMode.removeAttr('disabled'); } dataView.invalidate(); });
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 }); }
.main-container { display: flex; flex-direction: column; width: 100%; height: 100%; } .sample-options { display: flex; align-items: center; background: #fbfbfb; box-sizing: border-box; overflow: auto; padding: 10px; flex-grow: 0; flex-shrink: 0; } .sample-options .option-row { margin-right: 5px; } .sample-options label { margin-right: 5px; } .grid { height: calc(100% - 52px); width: 100%; flex-grow: 1; flex-shrink: 1; } .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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0VkaXRpbmcvRWRpdG9yTW9kZS9wdXJlanMvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9FZGl0aW5nL0VkaXRvck1vZGUvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLGNBQUE7RUFDQSxhQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjtBRENFO0VBQ0UsaUJBQUE7QUNDSjtBREVFO0VBQ0UsaUJBQUE7QUNBSjs7QURJQTtFQUNFLHlCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDREY7O0FESUE7RUFDRSxXQUFBO0FDREY7O0FESUE7RUFDRTtJQUNFLFlBQUE7RUNERjtBQUNGIiwiZmlsZSI6IkZlYXR1cmVzL0VkaXRpbmcvRWRpdG9yTW9kZS9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuXG4gIC5vcHRpb24tcm93IHtcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgfVxuXG4gIGxhYmVsIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgfVxufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gNTJweCk7XG4gIHdpZHRoOiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuXG4uZ2MtZWRpdGluZy10ZW1wbGF0ZS1maWVsZCBpbnB1dFt0eXBlPSdjaGVja2JveCddIHtcbiAgd2lkdGg6IGF1dG87XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLmdjLXBvcHVwLWVkaXRpbmctYXJlYSB7XG4gICAgd2lkdGg6IDMwMHB4O1xuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBvdmVyZmxvdzogYXV0bztcbiAgcGFkZGluZzogMTBweDtcbiAgZmxleC1ncm93OiAwO1xuICBmbGV4LXNocmluazogMDtcbn1cbi5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyB7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuLnNhbXBsZS1vcHRpb25zIGxhYmVsIHtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG5cbi5ncmlkIHtcbiAgaGVpZ2h0OiBjYWxjKDEwMCUgLSA1MnB4KTtcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5nYy1lZGl0aW5nLXRlbXBsYXRlLWZpZWxkIGlucHV0W3R5cGU9Y2hlY2tib3hdIHtcbiAgd2lkdGg6IGF1dG87XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1heC13aWR0aDogNzY4cHgpIHtcbiAgLmdjLXBvcHVwLWVkaXRpbmctYXJlYSB7XG4gICAgd2lkdGg6IDMwMHB4O1xuICB9XG59Il19 */