- Home
- Forum
- JavaScript - EJ 2
- Conditional fields on scheduler template
Conditional fields on scheduler template
Hi,
Would you be so kind to help me with my issue.
I want to have some additional fields on my event template when the checkbox is checked.
I tried to get that with the change method on the checkbox, but I could not achieve what I wanted.
When I want to update some existing event, I don't want the checkbox and the additional fields to be visible.
This is my component with a scheduler:
<template>
<div>
<div class="col-md-12 control-section">
<div class="content-wrapper">
<ejs-schedule id='Schedule'
width='100%'
height="550px"
:selectedDate='selectedDate'
:eventSettings='eventSettings'
:actionBegin="onActionBegin"
:popupOpen="onPopupOpen"
:eventRendered="onEventRendered"
:showQuickInfo="showQuickInfo"
:editorTemplate='editorTemplate'
:currentView="currentView"></ejs-schedule>
</div>
</div>
</div>
</template>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/bootstrap.css";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>
<script>
import Vue from "vue";
import moment from 'moment';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { SchedulePlugin, Day, Week, WorkWeek, Month, View } from "@syncfusion/ej2-vue-schedule";
import { extend } from '@syncfusion/ej2-base';
import { PopupOpenEventArgs, EventRenderedArgs } from '@syncfusion/ej2-vue-schedule';
import editortemplate from './template';
Vue.use(SchedulePlugin);
class SerialNoAdaptor extends UrlAdaptor {
processResponse() {
let original = super.processResponse.apply(this, arguments);
console.log('response');
console.log(original);
return original;
}
processQuery() {
let original = super.processQuery.apply(this, arguments);
var parametri = JSON.parse(original.data).params;
parametri['officeID'] = 15;
for (var index in parametri) {
if (index.toLowerCase().indexOf('date') >= 0) {
parametri[index] = moment(parametri[index]
).format('YYYY-MM-DD');
}
};
original.data = JSON.stringify(parametri);
return original;
}
insert() {
let original = super.insert.apply(this, arguments);
var parametri = JSON.parse(original.data);
console.log(parametri.value);
for (var index in parametri.value) {
if (index.toLowerCase().indexOf('date') >= 0) {
parametri.value[index] = moment(parametri.value[index]
).format('YYYY-MM-DD HH:mm:SS');
}
};
parametri.value.CASES_ID = document.getElementById('CASES_ID_hidden').value;
console.log(parametri.value);
original.data = JSON.stringify(parametri);
console.log('insert');
return original;
}
update() {
console.log('update');
let original = super.insert.apply(this, arguments);
var parametri = JSON.parse(original.data);
console.log(parametri.table);
for (var index in parametri.table) {
if (index.toLowerCase().indexOf('date') >= 0) {
parametri.table[index] = moment(parametri.table[index]
).format('YYYY-MM-DD HH:mm:SS');
}
};
original.data = JSON.stringify(parametri);
console.log(original);
return original;
}
}
var dataManger = new DataManager({
url: '/api/persons/getDataScheduler',
insertUrl: '/api/persons/insertEventScheduler',
updateUrl: '/api/persons/updateEventScheduler',
adaptor: new SerialNoAdaptor,
requestType: 'json',
crossDomain: true
});
export default Vue.extend({
data: function () {
return {
selectedDate: new Date(2018, 3, 25),
currentView: 'Week',
eventSettings: {
dataSource: dataManger,
fields: {
subject: { name: 'DESCRIPTION' },
startTime: { name: 'DATE' },
endTime: { name: 'DATE_TO' },
}
},
showQuickInfo: false,
editorTemplate: function () {
return { template: editortemplate }
},
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month]
},
methods: {
onPopupOpen: function (args) {
console.log(args);
if (args.type === 'Editor') {
if (args.data.EVENT_ID) {
args.element.querySelector('#povezanSaPredmetom').setAttribute('style', 'display: none;');
if (args.element.querySelector('#brojPredmeta')) {
args.element.querySelector('#brojPredmeta').setAttribute('style', 'display: none;');
}
}
else {
args.element.querySelector('#povezanSaPredmetom').setAttribute('style', 'display: block;');
if (args.element.querySelector('#brojPredmeta')) {
args.element.querySelector('#brojPredmeta').setAttribute('style', 'display: block;');
}
}
}
},
onEventRendered: function (args) {
switch (args.data.EventType) {
case 'Requested':
(args.element).style.backgroundColor = '#F57F17';
break;
case 'Confirmed':
(args.element).style.backgroundColor = '#7fa900';
break;
case 'New':
(args.element).style.backgroundColor = '#8e24aa';
break;
}
},
onActionBegin: function (args) {
let scheduleObj = document.getElementById('Schedule').ej2_instances[0];
if (args.requestType === 'eventCreate') {
let data = args.data;
if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) {
args.cancel = true;
}
}
},
}
});
</script>
SIGN IN To post a reply.
2 Replies
LD
Lajos Djerfi
September 20, 2018 10:53 AM UTC
This is my template:
<template>
<div>
<div class="row custom-event-editor" width="100%">
<div class="col-md-12" id="povezanSaPredmetom">
<div class="form-group row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ejs-checkbox id="ON_CASE" name='ON_CASE' :checked="data.povezanSaPredmetom" :change="ON_CASE_onChange"></ejs-checkbox>
<label for="POVEZAN_SA_PREDMETOM" class="m-l-10">
ON_CASE
</label>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="col-md-12" id="brojPredmeta" v-if="radnjaNaPredmetu == false && data.povezanSaPredmetom == true">
<div class="form-group row">
<label class="control-label text-right col-md-2" for="CASES_ID">CASE_NUMBER</label>
<div class="col-md-8">
<ejs-autocomplete id="CASES_ID"
class="form-control obavezno"
name="CASES_ID"
:dataSource='CASES_ID_data'
:fields='CASES_ID_fields'
:query='CASES_ID_query'
v-model="data.CASES_ID"></ejs-autocomplete>
</div>
<div class="col-md-2">
<ejs-checkbox id="COURT_NUMBER"
name='COURT_NUMBER'
:checked="COURT_NUMBER"
:change="COURT_NUMBER_onChange"></ejs-checkbox>
<label for="COURT_NUMBER" class="m-l-10">
{{$t('SudskiBroj')}}
</label>
</div>
</div>
</div>
<div class="col-md-12" v-if="schedulerEvent == true && data.povezanSaPredmetom == true">
<div class="form-group row">
<label class="control-label text-right col-md-2" for="PERSONS_ON_EVENT">PERSONS</label>
<div class="col-md-8">
<ejs-multiselect id='PERSONS_ON_EVENT'
class="e-field"
name="PERSONS_ON_EVENT"
value=""
:dataSource="PERSONS_ON_EVENT_data"
:fields='PERSONS_ON_EVENT_fields'
:allowFiltering='allowFiltering'>
</ejs-multiselect>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="col-md-12" v-else-if="schedulerEvent == false && data.povezanSaPredmetom == true">
<div class="form-group row">
<label class="control-label text-right col-md-2" for="PERSONS_ON_EVENT">{{$t('Lica')}}</label>
<div class="col-md-8">
<ejs-multiselect id='PERSONS_ON_EVENT'
class="e-field"
name="PERSONS_ON_EVENT"
v-model="data.PERSONS_ON_EVENT"
:dataSource="PERSONS_ON_EVENT_data"
:fields='PERSONS_ON_EVENT_fields'
:allowFiltering='allowFiltering'>
</ejs-multiselect>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { Query, DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { AutoCompletePlugin, MultiSelectPlugin } from '@syncfusion/ej2-vue-dropdowns';
import { CheckBoxPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(AutoCompletePlugin);
Vue.use(CheckBoxPlugin);
Vue.use(MultiSelectPlugin);
export default {
name: 'EventTemplate',
data() {
return {
data: {
povezanSaPredmetom: false,
},
COURT_NUMBER: false,
CASES_ID_data: new DataManager({
url: '/api/persons/caseNumber',
crossDomain: true,
adaptor: new UrlAdaptor,
requestType: 'json',
}),
CASES_ID_fields: { text: 'value', value: 'id' },
PERSONS_ON_EVENT_data: new DataManager({
url: '/api/persons/personsOnEvent',
crossDomain: true,
adaptor: new UrlAdaptor,
requestType: 'json',
}),
PERSONS_ON_EVENT_fields: { text: 'value', value: 'id' },
radnjaNaPredmetu: false,
schedulerEvent: true,
allowFiltering: true,
};
},
computed: {
CASES_ID_query: function () {
return new Query().addParams('sudskiBroj', JSON.stringify({ courtNumber: this.COURT_NUMBER }));
},
},
methods: {
COURT_NUMBER_onChange: function () {
var checkboxObj = event.target.ej2_instances[0];
this.COURT_NUMBER = checkboxObj.checked;
},
ON_CASE_onChange: function () {
var checkboxObj = event.target.ej2_instances[0];
this.data.povezanSaPredmetom = checkboxObj.checked;
},
}
};
</script>
VS
Velmurugan S
Syncfusion Team
September 24, 2018 03:49 AM UTC
Hi Lajos,
Thanks for contacting Syncfusion Support.
We have prepared a sample with the shared code example and validated the reported issue. Since, we suspect that the reason for the reported issue is processed data values may coming as null or undefined (ex: args.data.EVENT_ID). Therefore, we request you to check the processed data values are properly coming and updating to overcome the issue. Please find the prepared sample from the following location.
In the above sample, we have used some local data instead of your DataManager request to load the data. Also, we have prepared the working scenario demo and it can be downloaded from the following location.
Please find the following code example changes done in the above sample to overcome the reported problems.
- The following code example used to show/hide the custom fields along with checkbox in the Editor Window
Vue.js page:
|
export default {
data: function () {
return {
selectedDate: new Date(2018, 3, 25),
currentView: 'Week',
showQuickInfo: true,
eventSettings: {
dataSource: [
{
EVENT_ID: 1,
DESCRIPTION: 'Explosion of Betelgeuse Star',
DATE: new Date(2018, 1, 11, 9, 30),
DATE_TO: new Date(2018, 1, 11, 11, 0)
}, {
EVENT_ID: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0)
}, {
EVENT_ID: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0)
},
],
fields: {
id: { name: 'EVENT_ID' },
subject: { name: 'DESCRIPTION' },
startTime: { name: 'DATE' },
endTime: { name: 'DATE_TO' },
}
},
EventTemplate: function () {
return { template: EventTemplate }
},
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month]
},
methods: {
onPopupOpen: function (args) {
console.log(args);
if (args.type === 'Editor') {
if (args.data.EVENT_ID) {
args.element.querySelector('#povezanSaPredmetom').setAttribute('style', 'display: none;');
if (args.element.querySelector('#brojPredmeta')) {
args.element.querySelector('#brojPredmeta').setAttribute('style', 'display: none;');
}
}
else {
args.element.querySelector('#povezanSaPredmetom').setAttribute('style', 'display: block;');
if (args.element.querySelector('#brojPredmeta')) {
args.element.querySelector('#brojPredmeta').setAttribute('style', 'display: block;');
}
}
}
},
----------------------
----------------------
----------------------
} |
- The following code example used to show/hide the custom fields based on the checkbox click
template.vue
|
<template>
<div>
<div class="row custom-event-editor" width="100%">
<div class="col-md-12" id="povezanSaPredmetom">
<div class="form-group row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ejs-checkbox id="ON_CASE" name='ON_CASE' :checked="povezanSaPredmetom" :change="ON_CASE_onChange"></ejs-checkbox>
<label for="POVEZAN_SA_PREDMETOM" class="m-l-10">
ON_CASE
</label>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="col-md-12" id="brojPredmeta" v-if="radnjaNaPredmetu == false && povezanSaPredmetom == true">
<div class="form-group row">
<label class="control-label text-right col-md-2" for="CASES_ID">CASE_NUMBER</label>
<div class="col-md-8">
<ejs-autocomplete id="CASES_ID"
class="form-control obavezno"
name="CASES_ID"
:dataSource='CASES_ID_data'
:fields='CASES_ID_fields'
:query='CASES_ID_query'
v-model="data.CASES_ID"></ejs-autocomplete>
</div>
<div class="col-md-2">
<ejs-checkbox id="COURT_NUMBER"
name='COURT_NUMBER'
:checked="COURT_NUMBER"
:change="COURT_NUMBER_onChange"></ejs-checkbox>
<label for="COURT_NUMBER" class="m-l-10">
{{this.COURT_NUMBER}}
</label>
</div>
</div>
</div>
<div class="col-md-12" v-if="schedulerEvent == true && povezanSaPredmetom == true">
<div class="form-group row">
<label class="control-label text-right col-md-2" for="PERSONS_ON_EVENT">PERSONS</label>
<div class="col-md-8">
<ejs-multiselect id='PERSONS_ON_EVENT'
class="e-field"
name="PERSONS_ON_EVENT"
value=""
:dataSource="PERSONS_ON_EVENT_data"
:fields='PERSONS_ON_EVENT_fields'
:allowFiltering='allowFiltering'>
</ejs-multiselect>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="col-md-12" v-else-if="schedulerEvent == false && povezanSaPredmetom == true">
<div class="form-group row">
<label class="control-label text-right col-md-2" for="PERSONS_ON_EVENT">{{$t('Lica')}}</label>
<div class="col-md-8">
<ejs-multiselect id='PERSONS_ON_EVENT'
class="e-field"
name="PERSONS_ON_EVENT"
v-model="data.PERSONS_ON_EVENT"
:dataSource="PERSONS_ON_EVENT_data"
:fields='PERSONS_ON_EVENT_fields'
:allowFiltering='allowFiltering'>
</ejs-multiselect>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { Query, DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { AutoCompletePlugin, MultiSelectPlugin } from '@syncfusion/ej2-vue-dropdowns';
import { CheckBoxPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(AutoCompletePlugin);
Vue.use(CheckBoxPlugin);
Vue.use(MultiSelectPlugin);
export default {
name: 'EventTemplate',
data() {
return {
data: {
povezanSaPredmetom: false,
},
povezanSaPredmetom: false,
COURT_NUMBER: false,
CASES_ID_data: [
{ value: 'Australia', id: 'AU' },
],
CASES_ID_fields: { text: 'value', value: 'id' },
PERSONS_ON_EVENT_data: [
{ value: 'Australia', id: 'AU' }
],
PERSONS_ON_EVENT_fields: { text: 'value', value: 'id' },
radnjaNaPredmetu: false,
schedulerEvent: true,
allowFiltering: true,
};
},
computed: {
CASES_ID_query: function () {
return new Query().addParams('sudskiBroj', JSON.stringify({ courtNumber: this.COURT_NUMBER }));
},
},
methods: {
COURT_NUMBER_onChange: function () {
var checkboxObj = event.target.ej2_instances[0];
this.COURT_NUMBER = checkboxObj.checked;
},
ON_CASE_onChange: function () {
var checkboxObj = event.target.ej2_instances[0];
//this.data.povezanSaPredmetom = checkboxObj.checked;
this.povezanSaPredmetom = checkboxObj.checked;
},
}
};
</script> |
Kindly try with the above sample and suggestion and let us know if you need any further assistance on this.
Regards,
Velmurugan
SIGN IN To post a reply.
- 2 Replies
- 2 Participants
-
LD Lajos Djerfi
- Sep 20, 2018 10:51 AM UTC
- Sep 24, 2018 03:49 AM UTC
