Lock Row | Features | MESCIUS DataViewsJS Vue Demos

This example demonstrates how to use the DataViews edit event to prevent row editing, just like locking a row. The check boxes on the right side of the grid add indices to an array when checked. The event handler for editing on the grid checks this array, and if the index of the row being edited is in that array, it cancels editing. Try checking a few of the rows in the right side list and observe that the corresponding rows in the grid can't be edited.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Editing/LockRow/vue/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="editing, editor, data editor, data editing, lock row" />
<meta
name="description"
content="This example demonstrates how to use the DataViews edit event to prevent row editing, just like locking a row."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lock Row | Features | MESCIUS DataViewsJS Vue 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/node_modules/@fortawesome/fontawesome-free/css/all.min.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: 'vue',
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/js/license.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/systemjs/dist/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript">
System.import('./app.vue');
</script>
</body>
</html>

<template>
<div class="main-container responsive-container">
<div class="mobile-only toggle-options">
<span class="fa fa-cog"></span>
</div>
<gc-dataview
id="grid"
class="grid"
:data="data"
:cols="cols"
:layout="layout"
v-on:editing="handleEditing"
autoFocus
/>
<div class="sample-options">
<div class="title">{{ locale.lockRows }}</div>
<div id="lock-panel" class="lock-panel">
<label v-for="(val, idx) in locked" v-bind:key="idx" v-bind:for="'r' + idx">
<div class="lock-row">
<input
v-bind:id="'r' + idx"
type="checkbox"
:checked="val"
v-on:change="lock($event.target.checked, idx)"
/>
<span>{{ idx + 1 }}</span>
</div>
</label>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { getControlByElement } from '@grapecity/dataviews.core';
import '@grapecity/dataviews.vue';
import { GridLayout } from '@grapecity/dataviews.grid';
import { data } from './data';
import locale from './locale';
export const cols = [
{
id: 'id',
caption: 'ID',
dataField: 'id',
width: 100,
allowEditing: false,
},
{
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: '*',
},
];
for (let i = 0; i < data.length; i++) {
data[i].id = i + 1;
}
const layout = new GridLayout({
allowEditing: true,
rowHeight: 40,
showRowHeader: false,
});
new Vue({
el: '#root',
data: { locale, data, cols, layout, locked: data.map(() => false) },
methods: {
lock(value, index) {
getControlByElement(document.body).cancelEditing();
const newval = this.locked.slice();
newval[index] = value;
this.locked = newval;
},
handleEditing(e) {
if (e.status === 'beforeStartEditing' && this.locked[e.row]) {
e.cancel = true;
}
},
},
});
// helpers for responsive options panel
$(function () {
$('body').on('click', '.toggle-options', function () {
const options = $('.sample-options');
const display = options.css('display');
options.css({ display: display === 'flex' ? 'none' : 'flex' });
$('.toggle-options .fa').toggleClass('fa-cog').toggleClass('fa-times');
});
window.addEventListener('resize', function () {
if ($('.mobile-only').css('visibility') === 'hidden') {
$('.sample-options').css({ display: 'flex' });
}
});
});
</script>

// resumes
export const 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.',
},
];

module.exports = { lockRows: 'Lock Rows' };

.main-container {
width: 100%;
height: 100%;
}
.grid {
height: 100%;
}
.sample-options {
border: 1px solid rgba(0, 0, 0, 0.2);
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 100%;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
display: flex;
flex-direction: column;
background-color: #fbfbfb;
}
.sample-options * {
box-sizing: border-box;
}
.sample-options .title {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
color: white;
font-weight: bold;
font-size: 14px;
height: 40px;
padding: 10px;
display: flex;
align-content: center;
justify-content: center;
white-space: nowrap;
background-color: #9eb3c9;
}
.sample-options .lock-panel {
height: 100%;
overflow: auto;
padding: 2px 0;
flex-shrink: 1;
flex-grow: 1;
}
.sample-options .lock-panel .lock-row {
display: flex;
align-items: center;
padding: 5px;
}
.sample-options .lock-panel .lock-row:hover {
background: #9eb3c9;
color: white;
cursor: pointer;
}
.sample-options .lock-panel .lock-row input {
margin-right: 10px;
}
.flex-break {
flex-basis: 100%;
height: 0;
}
.mobile-only {
visibility: hidden;
}
.responsive-container {
display: flex;
box-sizing: border-box;
}
.responsive-container .main-content {
box-sizing: border-box;
height: 100%;
flex-grow: 1;
flex-shrink: 1;
min-width: 50%;
max-width: 100%;
}
.responsive-container .sample-options {
box-sizing: border-box;
display: inline-flex;
flex-direction: column;
height: 100%;
flex-grow: 0;
flex-shrink: 1;
}
.responsive-container .sample-options .option-row {
box-sizing: border-box;
display: inline-flex;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
white-space: nowrap;
padding-right: 10px;
width: auto;
}
.responsive-container .toggle-options {
align-items: center;
justify-content: center;
position: absolute;
top: 5px;
right: 5px;
background-color: #ebebeb;
color: #47a06c;
border-radius: 16px;
cursor: pointer;
width: 36px;
height: 36px;
font-size: 28px;
z-index: 101;
display: none;
}
@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
.mobile-only {
visibility: visible;
}
.responsive-container {
display: block;
position: relative;
}
.responsive-container .main-content {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
z-index: 99;
}
.responsive-container .toggle-options {
display: flex;
}
.responsive-container .sample-options {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: 100%;
z-index: 100;
}
.responsive-container .sample-options .option-row {
padding-right: 20px;
}
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0VkaXRpbmcvTG9ja1Jvdy92dWUvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9FZGl0aW5nL0xvY2tSb3cvdnVlL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtBQ0NGOztBREVBO0VBQ0Usb0NBQUE7RUFDQSxzQkFBQTtFQUNBLDJEQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO01BQUEscUJBQUE7VUFBQSxpQkFBQTtFQUNBLGFBQUE7RUFDQSxzQkFBQTtFQUNBLHlCQUFBO0FDQ0Y7QURDRTtFQUNFLHNCQUFBO0FDQ0o7QURFRTtFQUNFLDJDQUFBO0VBQ0EsWUFBQTtFQUNBLGlCQUFBO0VBQ0EsZUFBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0EsYUFBQTtFQUNBLHFCQUFBO0VBQ0EsdUJBQUE7RUFDQSxtQkFBQTtFQUNBLHlCQUFBO0FDQUo7QURHRTtFQUNFLFlBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtFQUNBLGNBQUE7RUFDQSxZQUFBO0FDREo7QURHSTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLFlBQUE7QUNETjtBREdNO0VBQ0UsbUJBQUE7RUFDQSxZQUFBO0VBQ0EsZUFBQTtBQ0RSO0FESU07RUFDRSxrQkFBQTtBQ0ZSOztBRHlCQTtFQUNFLGdCQUFBO0VBQ0EsU0FBQTtBQ3RCRjs7QUR5QkE7RUFDRSxrQkFBQTtBQ3RCRjs7QUR5QkE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7QUN0QkY7QUR3QkU7RUFDRSxzQkFBQTtFQUNBLFlBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGNBQUE7RUFDQSxlQUFBO0FDdEJKO0FEeUJFO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDdkJKO0FEeUJJO0VBQ0Usc0JBQUE7RUFDQSxvQkFBQTtFQUNBLG1CQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7RUFDQSxnQkFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0FDdkJOO0FEMkJFO0VBMURBLG1CQUFBO0VBQ0EsdUJBQUE7RUFDQSxrQkFBQTtFQUNBLFFBQUE7RUFDQSxVQUFBO0VBQ0EseUJBQUE7RUFDQSxjQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxlQUFBO0VBQ0EsWUFBQTtFQWdERSxhQUFBO0FDYko7O0FEa0JBO0VBQ0U7SUFDRSxtQkFBQTtFQ2ZGOztFRGlCQTtJQUNFLGNBQUE7SUFDQSxrQkFBQTtFQ2RGO0VEZ0JFO0lBQ0Usa0JBQUE7SUFDQSxjQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFdBQUE7RUNkSjtFRGlCRTtJQUNFLGFBQUE7RUNmSjtFRGtCRTtJQUNFLGFBQUE7SUFDQSxrQkFBQTtJQUNBLE1BQUE7SUFDQSxPQUFBO0lBQ0EsV0FBQTtJQUNBLGVBQUE7SUFDQSxZQUFBO0lBQ0EsWUFBQTtFQ2hCSjtFRGtCSTtJQUNFLG1CQUFBO0VDaEJOO0FBQ0YiLCJmaWxlIjoiRmVhdHVyZXMvRWRpdGluZy9Mb2NrUm93L3Z1ZS9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmdyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5zYW1wbGUtb3B0aW9ucyB7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMC4yKTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZm9udC1mYW1pbHk6ICdIZWx2ZXRpY2EgTmV1ZScsIEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gIGhlaWdodDogMTAwJTtcbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGJhY2tncm91bmQtY29sb3I6ICNmYmZiZmI7XG5cbiAgKiB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgfVxuXG4gIC50aXRsZSB7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMC4yKTtcbiAgICBjb2xvcjogd2hpdGU7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGhlaWdodDogNDBweDtcbiAgICBwYWRkaW5nOiAxMHB4O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24tY29udGVudDogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzllYjNjOTtcbiAgfVxuXG4gIC5sb2NrLXBhbmVsIHtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgb3ZlcmZsb3c6IGF1dG87XG4gICAgcGFkZGluZzogMnB4IDA7XG4gICAgZmxleC1zaHJpbms6IDE7XG4gICAgZmxleC1ncm93OiAxO1xuXG4gICAgLmxvY2stcm93IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgcGFkZGluZzogNXB4O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZDogIzllYjNjOTtcbiAgICAgICAgY29sb3I6IHdoaXRlO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICB9XG5cbiAgICAgIGlucHV0IHtcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG4vLyBoZWxwZXJzIGZvciByZXNwb25zaXZlIG9wdGlvbnMgcGFuZWxcbkBtaXhpbiBtb2JpbGUtYnRuKCkge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDVweDtcbiAgcmlnaHQ6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ViZWJlYjtcbiAgY29sb3I6ICM0N2EwNmM7XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgd2lkdGg6IDM2cHg7XG4gIGhlaWdodDogMzZweDtcbiAgZm9udC1zaXplOiAyOHB4O1xuICB6LWluZGV4OiAxMDE7XG59XG5cbi5mbGV4LWJyZWFrIHtcbiAgZmxleC1iYXNpczogMTAwJTtcbiAgaGVpZ2h0OiAwO1xufVxuXG4ubW9iaWxlLW9ubHkge1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG5cbi5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgLm1haW4tY29udGVudCB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgZmxleC1ncm93OiAxO1xuICAgIGZsZXgtc2hyaW5rOiAxO1xuICAgIG1pbi13aWR0aDogNTAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxuXG4gIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDA7XG4gICAgZmxleC1zaHJpbms6IDE7XG5cbiAgICAub3B0aW9uLXJvdyB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgZmxleC1ncm93OiAwO1xuICAgICAgZmxleC1zaHJpbms6IDA7XG4gICAgICBmbGV4LWJhc2lzOiBhdXRvO1xuICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICB9XG4gIH1cblxuICAudG9nZ2xlLW9wdGlvbnMge1xuICAgIEBpbmNsdWRlIG1vYmlsZS1idG47XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4vLyBtb3N0IHNtYXJ0cGhvbmVzXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgLm1haW4tY29udGVudCB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRvcDogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICAgIHotaW5kZXg6IDk5O1xuICAgIH1cblxuICAgIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cblxuICAgIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgei1pbmRleDogMTAwO1xuXG4gICAgICAub3B0aW9uLXJvdyB7XG4gICAgICAgIHBhZGRpbmctcmlnaHQ6IDIwcHg7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLnNhbXBsZS1vcHRpb25zIHtcbiAgYm9yZGVyOiAxcHggc29saWQgcmdiYSgwLCAwLCAwLCAwLjIpO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBmb250LWZhbWlseTogXCJIZWx2ZXRpY2EgTmV1ZVwiLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHVzZXItc2VsZWN0OiBub25lO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmJmYmZiO1xufVxuLnNhbXBsZS1vcHRpb25zICoge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuLnNhbXBsZS1vcHRpb25zIC50aXRsZSB7XG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMik7XG4gIGNvbG9yOiB3aGl0ZTtcbiAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gIGZvbnQtc2l6ZTogMTRweDtcbiAgaGVpZ2h0OiA0MHB4O1xuICBwYWRkaW5nOiAxMHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1jb250ZW50OiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjOWViM2M5O1xufVxuLnNhbXBsZS1vcHRpb25zIC5sb2NrLXBhbmVsIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBvdmVyZmxvdzogYXV0bztcbiAgcGFkZGluZzogMnB4IDA7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBmbGV4LWdyb3c6IDE7XG59XG4uc2FtcGxlLW9wdGlvbnMgLmxvY2stcGFuZWwgLmxvY2stcm93IHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogNXB4O1xufVxuLnNhbXBsZS1vcHRpb25zIC5sb2NrLXBhbmVsIC5sb2NrLXJvdzpob3ZlciB7XG4gIGJhY2tncm91bmQ6ICM5ZWIzYzk7XG4gIGNvbG9yOiB3aGl0ZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuLnNhbXBsZS1vcHRpb25zIC5sb2NrLXBhbmVsIC5sb2NrLXJvdyBpbnB1dCB7XG4gIG1hcmdpbi1yaWdodDogMTBweDtcbn1cblxuLmZsZXgtYnJlYWsge1xuICBmbGV4LWJhc2lzOiAxMDAlO1xuICBoZWlnaHQ6IDA7XG59XG5cbi5tb2JpbGUtb25seSB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuLnJlc3BvbnNpdmUtY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAubWFpbi1jb250ZW50IHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDE7XG4gIGZsZXgtc2hyaW5rOiAxO1xuICBtaW4td2lkdGg6IDUwJTtcbiAgbWF4LXdpZHRoOiAxMDAlO1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDE7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGZsZXgtZ3JvdzogMDtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGZsZXgtYmFzaXM6IGF1dG87XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gIHdpZHRoOiBhdXRvO1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC50b2dnbGUtb3B0aW9ucyB7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogNXB4O1xuICByaWdodDogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZWJlYmViO1xuICBjb2xvcjogIzQ3YTA2YztcbiAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICB3aWR0aDogMzZweDtcbiAgaGVpZ2h0OiAzNnB4O1xuICBmb250LXNpemU6IDI4cHg7XG4gIHotaW5kZXg6IDEwMTtcbiAgZGlzcGxheTogbm9uZTtcbn1cblxuQG1lZGlhIChtaW4td2lkdGg6IDMyMHB4KSBhbmQgKG1heC13aWR0aDogNDgwcHgpIGFuZCAob3JpZW50YXRpb246IHBvcnRyYWl0KSB7XG4gIC5tb2JpbGUtb25seSB7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxuXG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAubWFpbi1jb250ZW50IHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgIHotaW5kZXg6IDk5O1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAudG9nZ2xlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB6LWluZGV4OiAxMDA7XG4gIH1cbiAgLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyB7XG4gICAgcGFkZGluZy1yaWdodDogMjBweDtcbiAgfVxufSJdfQ== */

(function () {
const IS_PROD = window.process.env.NODE_ENV === 'production';
const USE_NPM = window.process.env.USE_NPM;
const USE_CDN = window.process.env.USE_CDN;
const SITE_ROOT = window.process.env.SITE_ROOT;
const FRAMEWORK = window.process.env.FRAMEWORK;
const ext = IS_PROD ? '.min.js' : '.js';
function js(name) {
return name + ext;
}
function npm(t) {
if (!t.file) {
t.file = IS_PROD ? t.prod : t.dev;
}
const version = USE_CDN && t.version ? '@' + t.version : '';
const path = t.pkg + version + '/' + t.file;
if (USE_CDN) {
return 'https://unpkg.com/' + path;
}
return 'npm:' + path;
}
function dv(t) {
if (USE_CDN || USE_NPM) {
t.file = 'dist/' + t.file + '.min.js';
return npm(t);
}
return SITE_ROOT + '/static/dataviews/' + js(t.file);
}
const isTypeScript = FRAMEWORK === 'angular';
const babelConfig = {
es2015: true,
react: true,
};
const meta = {
js: {
babelOptions: babelConfig,
},
ts: {
typescriptOptions: {
tsconfig: true
},
},
};
const map = {
// gc.dataviews packages
'@grapecity/dataviews.common': dv({pkg:'@grapecity/dataviews.common',file:'gc.dataviews.common',version:'1.8.17'}),
'@grapecity/dataviews.core': dv({pkg:'@grapecity/dataviews.core',file:'gc.dataviews.core',version:'1.8.17'}),
'@grapecity/dataviews.grid': dv({pkg:'@grapecity/dataviews.grid',file:'gc.dataviews.grid',version:'1.8.17'}),
'@grapecity/dataviews.cardlayout': dv({pkg:'@grapecity/dataviews.cardlayout',file:'gc.dataviews.cardlayout',version:'1.8.17'}),
'@grapecity/dataviews.masonry': dv({pkg:'@grapecity/dataviews.masonry',file:'gc.dataviews.masonry',version:'1.8.17'}),
'@grapecity/dataviews.calendar': dv({pkg:'@grapecity/dataviews.calendar',file:'gc.dataviews.calendar',version:'1.8.17'}),
'@grapecity/dataviews.timeline': dv({pkg:'@grapecity/dataviews.timeline',file:'gc.dataviews.timeline',version:'1.8.17'}),
'@grapecity/dataviews.trellis': dv({pkg:'@grapecity/dataviews.trellis',file:'gc.dataviews.trellis',version:'1.8.17'}),
'@grapecity/dataviews.gantt': dv({pkg:'@grapecity/dataviews.gantt',file:'gc.dataviews.gantt',version:'1.8.17'}),
'@grapecity/dataviews.searchbox': dv({pkg:'@grapecity/dataviews.searchbox',file:'gc.dataviews.searchbox',version:'1.8.17'}),
'@grapecity/dataviews.react': dv({pkg:'@grapecity/dataviews.react',file:'gc.dataviews.react',version:'1.8.17'}),
'@grapecity/dataviews.vue': dv({pkg:'@grapecity/dataviews.vue',file:'gc.dataviews.vue',version:'1.8.17'}),
'@grapecity/dataviews.angular': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.angular',version:'1.8.17'}),
'@grapecity/dataviews.csvexport': dv({pkg:'@grapecity/dataviews.angular',file:'gc.dataviews.csvexport',version:'1.8.17'}),
// third-party libs
react: npm({pkg:'react',prod:'umd/react.production.min.js',dev:'umd/react.development.js',version:'16.13.1'}),
'react-dom': npm({pkg:'react-dom',prod:'umd/react-dom.production.min.js',dev:'umd/react-dom.development.js',version:'16.13.1'}),
'react-router-dom': npm({pkg:'react-router-dom',prod:'umd/react-router-dom.min.js',dev:'umd/react-router-dom.js',version:'5.2.0'}),
'vue': npm({pkg:'vue',file:'dist/vue.js',version:'2.6.12'}),
'vue-router': npm({pkg:'vue-router',file:'dist/vue-router.js',version:'3.4.3'}),
'lodash': npm({pkg: 'lodash', file: js('lodash')}),
'zone.js': npm({pkg: 'zone.js', file: js('dist/zone')}),
'rxjs': npm({pkg: 'rxjs', file: js('bundles/rxjs.umd')}),
'rxjs/operators': npm({pkg:'rxjs-operators-bundle',prod:'dist/bundle.min.js',dev:'dist/bundle.js',version:'1.0.2'}),
'@angular/core': npm({pkg: '@angular/core', file: js('bundles/core.umd')}),
'@angular/common': npm({pkg: '@angular/common', file: js('bundles/common.umd')}),
'@angular/compiler': npm({pkg: '@angular/compiler', file: js('bundles/compiler.umd')}),
'@angular/platform-browser': npm({pkg: '@angular/platform-browser', file: js('bundles/platform-browser.umd')}),
'@angular/platform-browser-dynamic': npm({pkg: '@angular/platform-browser-dynamic', file: js('bundles/platform-browser-dynamic.umd')}),
'@angular/http': npm({pkg: '@angular/http', file: js('bundles/http.umd')}),
'@angular/common/http': npm({pkg: '@angular/common', file: js('bundles/common-http.umd')}),
'@angular/router': npm({pkg: '@angular/router', file: js('bundles/router.umd')}),
'@angular/forms': npm({pkg: '@angular/forms', file: js('bundles/forms.umd')}),
// systemjs plugins
'systemjs-plugin-json': npm({pkg:'systemjs-plugin-json',file:'json.js',version:'0.3.0'}),
'systemjs-plugin-css': npm({pkg:'systemjs-plugin-css',file:'css.js',version:'0.1.37'}),
'systemjs-plugin-babel': npm({pkg:'systemjs-plugin-babel',file:'plugin-babel.js',version:'0.0.25'}),
'systemjs-babel-build': npm({pkg:'systemjs-plugin-babel',file:'systemjs-babel-browser.js',version:'0.0.25'}),
'plugin-typescript': npm({pkg:'plugin-typescript',file:'lib/plugin.js',version:'8.0.0'}),
'typescript': npm({pkg:'typescript',file:'lib/typescript.js',version:'4.0.2'}),
'systemjs-vue-browser': npm({pkg:'systemjs-vue-browser',file:'index.js',version:'1.0.11'}),
};
const config = {
defaultJSExtensions: true,
transpiler: isTypeScript ? 'plugin-typescript' : 'systemjs-plugin-babel',
typescriptOptions: {
tsconfig: true
},
meta: {
'*.json': {loader: 'systemjs-plugin-json'},
'*.css': {loader: 'systemjs-plugin-css'},
'*.vue': {loader: 'systemjs-vue-browser'},
'*.js': meta.js,
'*.ts': meta.ts,
'app.js': {
format: 'esm',
babelOptions: babelConfig,
},
'typescript': {
exports: 'ts',
},
'@grapecity/dataviews.common': {
format: 'amd',
},
'@grapecity/dataviews.core': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.grid': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.cardlayout': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.masonry': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.calendar': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
'@grapecity/dataviews.core',
],
},
'@grapecity/dataviews.timeline': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.trellis': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.gantt': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.searchbox': {
format: 'amd',
deps: [
'@grapecity/dataviews.common',
],
},
'@grapecity/dataviews.react': {
format: 'amd',
deps: [
'react',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.vue': {
format: 'amd',
deps: [
'vue',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.angular': {
format: 'amd',
deps: [
'@angular/core',
'@grapecity/dataviews.common',
'@grapecity/dataviews.core'
],
},
'@grapecity/dataviews.csvexport': {
format: 'amd',
deps: [
'@grapecity/dataviews.common'
],
},
},
paths: {
// paths serve as alias
'npm:': SITE_ROOT + '/node_modules/',
},
// map tells the System loader where to look for things
map: map,
// packages tells the System loader how to load when no filename and/or no extension
packages: {
'.': { defaultExtension: isTypeScript ? 'ts' : 'js' },
node_modules: { defaultExtension: 'js' },
}
};
// fast format detection to avoid detection by source code using regexp
Object.keys(map).filter(function (key) {
return !config.meta[key];
}).forEach(function (key) {
const path = map[key];
if (path.indexOf('/umd') >= 0 || path.indexOf('.umd') >= 0) {
config.meta[key] = { format: 'amd' };
}
if (path.indexOf('/cjs') >= 0) {
config.meta[key] = { format: 'cjs' };
}
});
System.config(config);
})(this);

Lock Row (Vue)