Edit Form Template | Features | MESCIUS DataViewsJS Demos

This example shows how you can customize the built-in data editors using the editRowTemplate property. In the sample, you can choose the editing mode (popup or editForm). When you double-click a row, the editor is shown in the container you chose. Notice that the form looks the same either way and looks slightly different than the default editing forms (see the Editor Mode demo). You can create a template for these forms using typical HTML form markup. To create and apply a template: Design a form inside a <template> element and give the element a unique id (editRowTemplate in this example). Style your form using CSS. Add the editRowTemplate property to the grid code and use the template id preceded by '#' (editRowTemplate : '#editRowTemplate' in this example').

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Editing/EditFormTemplate/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="editing, editor, data editor, data editing, template" />
<meta
name="description"
content="This example shows how you can customize the built-in data editors using the **editRowTemplate** property."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edit Form Template | 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/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">
<noscript>You need to enable JavaScript to run this app.</noscript>
<template id="editRowTemplate" style="display: none">
<div class="edit-row">
<div class="edit-detail">
<label class="column1">First Name</label>
<input class="column2" data-column="firstName" />
</div>
<div class="edit-detail">
<label class="column1">Last Name</label>
<input class="column2" data-column="lastName" />
</div>
</div>
<div class="edit-row">
<div class="edit-detail">
<label class="column1">Score</label>
<input class="column2" data-column="score" />
</div>
<div class="edit-detail">
<label class="column1">Position</label>
<select class="column2" data-column="position">
<option>Sales</option>
<option>Sales Manager</option>
<option>Web Developer</option>
<option>.NET Developer</option>
<option>Admin Assistant</option>
</select>
</div>
</div>
<div class="edit-advantage edit-detail">
<label class="column1">Advantage</label>
<textarea data-column="advantage"></textarea>
</div>
</template>
<div class="main-container">
<div class="sample-options">
<label>Edit mode:</label>
<select id="grid-edit-mode">
<option value="popup">popup</option>
<option value="editForm" selected>editForm</option>
</select>
</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: 'firstName',
caption: 'First Name',
dataField: 'firstName',
width: 100,
},
{
id: 'lastName',
caption: 'Last Name',
dataField: 'lastName',
width: 100,
},
{
id: 'score',
caption: 'Score',
dataField: 'score',
width: 100,
},
{
id: 'position',
caption: 'Position',
dataField: 'position',
width: 150,
},
{
id: 'advantage',
caption: 'Advantage',
dataField: 'advantage',
width: '*',
},
];
var layout = new GC.DataViews.GridLayout({
allowEditing: true,
editRowTemplate: '#editRowTemplate',
editMode: 'editForm',
rowHeight: 40,
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
$('#grid-edit-mode').change(function () {
dataView.options.editMode = $('#grid-edit-mode').val();
}); // focus data.view by default
document.getElementById('grid').focus();

// resumes
var data = [{
firstName: 'Alexa',
lastName: 'Wilder',
registeredDate: 'Oct 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. He can solve problems in a short time.'
}, {
firstName: 'Victor',
lastName: 'Wooten',
registeredDate: 'May 14, 2018',
score: 70,
position: 'Web Developer',
advantage: 'Positive and optimistic, always first to work on latest technology in company.'
}, {
firstName: 'Darrin',
lastName: 'Sweeney',
registeredDate: 'June 14, 2018',
score: 60,
position: '.NET Developer',
advantage: 'Loves games day, family day, and outings.'
}, {
firstName: 'Jen',
lastName: 'Coulter',
registeredDate: 'April 14, 2018',
score: '95',
position: 'Admin Assistant',
advantage: 'Very good communication skills.'
}, {
firstName: 'Ifeoma',
lastName: 'Mays',
registeredDate: 'April 14,2018',
score: 85,
position: 'Sales Manager',
advantage: 'Manages his team well. They are always ready to resolve conflict.'
}, {
firstName: 'Akeem',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 80,
position: 'Sales Manager',
advantage: 'Has experience in managing teams over 20 employees.'
}, {
firstName: 'Buffy',
lastName: 'Weber',
registeredDate: 'April 25, 2018',
score: 80,
position: 'Sales',
advantage: 'Is eager to communicate with others.'
}, {
firstName: 'Akeem',
lastName: 'Abdul',
registeredDate: 'April 14, 2018',
score: 80,
position: 'Web Developer',
advantage: 'Positive and optimistic, always first to work on latest technology in company.'
}, {
firstName: 'Buffy',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. He can solve problems quickly.'
}, {
firstName: 'Guy',
lastName: 'Wooten',
registeredDate: 'July 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'A lot of experience on latest technology.'
}, {
firstName: 'Gina',
lastName: 'Wilder',
registeredDate: 'Oct 14, 2018',
score: 70,
position: 'Web Developer',
advantage: 'Very smart. She can solve problems quickly.'
}, {
firstName: 'Guy',
lastName: 'Wooten',
registeredDate: 'May 14, 2018',
score: 90,
position: 'Sales',
advantage: 'Is eager to communicate with others Would be good at networking.'
}, {
firstName: 'Daryl',
lastName: 'Sweeney',
registeredDate: 'June 14, 2018',
score: 90,
position: 'Sales',
advantage: 'Love games day, family day, and outings.'
}, {
firstName: 'Sally',
lastName: 'Weber',
registeredDate: 'April 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. She can solve problems quickly.'
}, {
firstName: 'Euna Lee',
lastName: 'Mays',
registeredDate: 'April 14,2018',
score: 90,
position: 'Admin Assistant',
advantage: 'HR department is good. They always ready to resolve confusions if any.'
}, {
firstName: 'Akeem',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 60,
position: 'Admin Assistant',
advantage: 'Manages his team well. They are always ready to resolve conflict.'
}, {
firstName: 'Buffy',
lastName: 'Weber',
registeredDate: 'April 25, 2018',
score: 65,
position: 'Admin Assistant',
advantage: 'Manages her team well. They are always ready to resolve conflict.'
}, {
firstName: 'Aaron',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 60,
position: '.NET Developer',
advantage: 'Very smart. He can solve problems quickly.'
}, {
firstName: 'Buffy',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 70,
position: '.NET Developer',
advantage: 'A lot of exposure on latest technology.'
}, {
firstName: 'Guy',
lastName: 'Junker',
registeredDate: 'July 14, 2018',
score: 80,
position: '.NET Developer',
advantage: 'A lot of exposure on latest technology.'
}];

.main-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.sample-options {
background: #fbfbfb;
box-sizing: border-box;
overflow: auto;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.sample-options label {
margin-right: 5px;
}
.grid {
height: 100%;
width: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.column1 {
display: inline-block;
margin-left: 30px;
width: 90px;
}
.column2 {
width: 186px;
}
.edit-detail {
display: inline-block;
margin: 4px;
}
.edit-detail *:focus {
outline: none;
}
.edit-detail input {
padding: 0 2px;
}
.edit-advantage label {
vertical-align: top;
}
.edit-advantage textarea {
height: 50px;
resize: none;
width: 500px;
}
.gc-popup-dialog {
background: #f1f1f1;
}
.gc-popup-editing-area {
width: 690px;
}
@media only screen and (max-width: 768px) {
.gc-popup-editing-area {
width: 300px;
}
.column2 {
margin-left: 30px;
}
.edit-detail {
display: block;
}
.edit-advantage textarea {
margin-left: 30px;
width: 250px;
}
.sample-options {
display: none;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0VkaXRpbmcvRWRpdEZvcm1UZW1wbGF0ZS9wdXJlanMvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9FZGl0aW5nL0VkaXRGb3JtVGVtcGxhdGUvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsbUJBQUE7RUFDQSxzQkFBQTtFQUNBLGNBQUE7RUFDQSxhQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNDRjtBRENFO0VBQ0UsaUJBQUE7QUNDSjs7QURHQTtFQUNFLFlBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNBRjs7QURHQTtFQUNFLHFCQUFBO0VBQ0EsaUJBQUE7RUFDQSxXQUFBO0FDQUY7O0FER0E7RUFDRSxZQUFBO0FDQUY7O0FER0E7RUFDRSxxQkFBQTtFQUNBLFdBQUE7QUNBRjs7QURHQTtFQUNFLGFBQUE7QUNBRjs7QURHQTtFQUNFLGNBQUE7QUNBRjs7QURHQTtFQUNFLG1CQUFBO0FDQUY7O0FER0E7RUFDRSxZQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7QUNBRjs7QURHQTtFQUNFLG1CQUFBO0FDQUY7O0FER0E7RUFDRSxZQUFBO0FDQUY7O0FER0E7RUFDRTtJQUNFLFlBQUE7RUNBRjs7RURHQTtJQUNFLGlCQUFBO0VDQUY7O0VER0E7SUFDRSxjQUFBO0VDQUY7O0VER0E7SUFDRSxpQkFBQTtJQUNBLFlBQUE7RUNBRjs7RURHQTtJQUNFLGFBQUE7RUNBRjtBQUNGIiwiZmlsZSI6IkZlYXR1cmVzL0VkaXRpbmcvRWRpdEZvcm1UZW1wbGF0ZS9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuXG4gIGxhYmVsIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgfVxufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5jb2x1bW4xIHtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBtYXJnaW4tbGVmdDogMzBweDtcbiAgd2lkdGg6IDkwcHg7XG59XG5cbi5jb2x1bW4yIHtcbiAgd2lkdGg6IDE4NnB4O1xufVxuXG4uZWRpdC1kZXRhaWwge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1hcmdpbjogNHB4O1xufVxuXG4uZWRpdC1kZXRhaWwgKjpmb2N1cyB7XG4gIG91dGxpbmU6IG5vbmU7XG59XG5cbi5lZGl0LWRldGFpbCBpbnB1dCB7XG4gIHBhZGRpbmc6IDAgMnB4O1xufVxuXG4uZWRpdC1hZHZhbnRhZ2UgbGFiZWwge1xuICB2ZXJ0aWNhbC1hbGlnbjogdG9wO1xufVxuXG4uZWRpdC1hZHZhbnRhZ2UgdGV4dGFyZWEge1xuICBoZWlnaHQ6IDUwcHg7XG4gIHJlc2l6ZTogbm9uZTtcbiAgd2lkdGg6IDUwMHB4O1xufVxuXG4uZ2MtcG9wdXAtZGlhbG9nIHtcbiAgYmFja2dyb3VuZDogI2YxZjFmMTtcbn1cblxuLmdjLXBvcHVwLWVkaXRpbmctYXJlYSB7XG4gIHdpZHRoOiA2OTBweDtcbn1cblxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA3NjhweCkge1xuICAuZ2MtcG9wdXAtZWRpdGluZy1hcmVhIHtcbiAgICB3aWR0aDogMzAwcHg7XG4gIH1cblxuICAuY29sdW1uMiB7XG4gICAgbWFyZ2luLWxlZnQ6IDMwcHg7XG4gIH1cblxuICAuZWRpdC1kZXRhaWwge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgLmVkaXQtYWR2YW50YWdlIHRleHRhcmVhIHtcbiAgICBtYXJnaW4tbGVmdDogMzBweDtcbiAgICB3aWR0aDogMjUwcHg7XG4gIH1cblxuICAuc2FtcGxlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJhY2tncm91bmQ6ICNmYmZiZmI7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xufVxuLnNhbXBsZS1vcHRpb25zIGxhYmVsIHtcbiAgbWFyZ2luLXJpZ2h0OiA1cHg7XG59XG5cbi5ncmlkIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmNvbHVtbjEge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1hcmdpbi1sZWZ0OiAzMHB4O1xuICB3aWR0aDogOTBweDtcbn1cblxuLmNvbHVtbjIge1xuICB3aWR0aDogMTg2cHg7XG59XG5cbi5lZGl0LWRldGFpbCB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgbWFyZ2luOiA0cHg7XG59XG5cbi5lZGl0LWRldGFpbCAqOmZvY3VzIHtcbiAgb3V0bGluZTogbm9uZTtcbn1cblxuLmVkaXQtZGV0YWlsIGlucHV0IHtcbiAgcGFkZGluZzogMCAycHg7XG59XG5cbi5lZGl0LWFkdmFudGFnZSBsYWJlbCB7XG4gIHZlcnRpY2FsLWFsaWduOiB0b3A7XG59XG5cbi5lZGl0LWFkdmFudGFnZSB0ZXh0YXJlYSB7XG4gIGhlaWdodDogNTBweDtcbiAgcmVzaXplOiBub25lO1xuICB3aWR0aDogNTAwcHg7XG59XG5cbi5nYy1wb3B1cC1kaWFsb2cge1xuICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xufVxuXG4uZ2MtcG9wdXAtZWRpdGluZy1hcmVhIHtcbiAgd2lkdGg6IDY5MHB4O1xufVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2OHB4KSB7XG4gIC5nYy1wb3B1cC1lZGl0aW5nLWFyZWEge1xuICAgIHdpZHRoOiAzMDBweDtcbiAgfVxuXG4gIC5jb2x1bW4yIHtcbiAgICBtYXJnaW4tbGVmdDogMzBweDtcbiAgfVxuXG4gIC5lZGl0LWRldGFpbCB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICAuZWRpdC1hZHZhbnRhZ2UgdGV4dGFyZWEge1xuICAgIG1hcmdpbi1sZWZ0OiAzMHB4O1xuICAgIHdpZHRoOiAyNTBweDtcbiAgfVxuXG4gIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufSJdfQ== */