Add event is working(saving to database) but added events are not displaying on scheduler but its working with mocked data . Please let me know if any one know how to bind the data back on scheduler
Please click here to find the attachment image Please see the above image response getting form api but not binding to scheduler UI
export class GroupEditing extends SampleBase {
constructor() {
super();
this.data = extend([], dataSource.resourceConferenceData, null, true);
this.state = {
customers: [],
technicians: [],
services: [],
groups: [],
};
this.currentEvent;
}
componentDidMount() {
axios
.post('URL', {
userId: '39',
companyId: '38',
dateTime: '2021-03-08 21:43:25',
roleId: 1,
})
.then((res) => {
const data = res.data.content[0];
this.setState({
customers: data.customer,
groups: data.group,
services: data.pestServices,
technicians: data.employee,
});
});
}
addTechnician(args) {
const { technicians } = this.state;
let row = createElement('div', { className: 'custom-field-row' });
let formElement = args.element.querySelector('.e-schedule-form');
const resource = formElement.querySelector('.e-resources-row');
resource.insertBefore(row, resource.firstChild);
let container = createElement('div', {
className: 'custom-field-container',
});
let inputEle = createElement('input', {
className: 'e-field e-input',
attrs: { name: 'employeeId', placeholder: 'Technicians' },
});
container.appendChild(inputEle);
row.appendChild(container);
let dropDownList = new DropDownList({
dataSource: technicians,
fields: { text: 'name', value: 'employeeId' },
value: args.data.Customers,
floatLabelType: 'Always',
placeholder: 'Technicians',
});
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'employeeId');
}
addCustomers(args) {
const { customers } = this.state;
let row = createElement('div', { className: 'custom-field-row' });
let formElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);
let container = createElement('div', {
className: 'custom-field-container',
});
let inputEle = createElement('input', {
className: 'e-field e-input',
attrs: { name: 'customerId', placeholder: 'Customers' },
});
container.appendChild(inputEle);
row.appendChild(container);
let dropDownList = new DropDownList({
dataSource: customers,
fields: { text: 'customerName', value: 'customerId' },
value: args.data.Customers,
floatLabelType: 'Always',
placeholder: 'Customers',
});
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'customerId');
}
onPopupOpen(args) {
if (args.type === 'Editor') {
if (!args.element.querySelector('.custom-field-row')) {
debugger;
this.addCustomers(args);
this.addTechnician(args);
}
}
}
render() {
const { services, groups, loading } = this.state;
return (
<div className='schedule-control-section'>
<div className='col-lg-12 control-section'>
<div className='control-wrapper'>
<ScheduleComponent
rowAutoHeight={true}
// popupOpen={this.onPopupOpen.bind(this)}
cssClass='group-editing'
width='100%'
height='650px'
selectedDate={new Date()}
// currentView='Day'
eventSettings={{
dataQuery: new Query().from('EventDatas'),
dataSource: new DataManager({
url: 'http://localhost:25255/api/Batch',
crossDomain: true,
adaptor: new UrlAdaptor(),
}),
}}
group={{
allowGroupEdit: false,
byGroupID: false,
resources: ['groupId', 'serviceId'],
}}
>
<ResourcesDirective>
<ResourceDirective
field='serviceId'
title='Services'
name='serviceId'
allowMultiple={true}
dataSource={services}
textField='serviceName'
idField='serviceId'
></ResourceDirective>
<ResourceDirective
field='groupId'
title='Group'
name='groupId'
allowMultiple={false}
dataSource={groups}
textField='name'
idField='groupId'
></ResourceDirective>
</ResourcesDirective>
<Inject
services={[
Day,
WorkWeek,
Month,
TimelineViews,
Resize,
DragAndDrop,
]}
/>
</ScheduleComponent>
</div>
</div>
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>You have missed to add CrudUrl in the dataManager settings. So that the CRUD actions are not working. So we would suggest you to refer and follow the below sample.
Sample: https://stackblitz.com/edit/react-schedule-url-adaptor-two-level-resource?file=index.js
this.dataManger = new DataManager({
url: 'http://localhost:54738/Home/LoadData',
crudUrl: 'http://localhost:54738/Home/UpdateData',
crossDomain: true,
adaptor: new UrlAdaptor
});
UG: https://ej2.syncfusion.com/react/documentation/schedule/data-binding/#scheduler-crud-actions