React SyncFusion Resource and grouping crud not binding the data in scheduler - reactjs

Question

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>

Answer 1

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.
Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleCRUD-1748824462-1972500097
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

Answer 2

We could reproduce the reported issue “issue in deleting the entire recurrence events” and confirm this as defect at our end. You can keep track of the bug through the following feedback. The fix for this issue is expected to be rolled out in in our JS2 weekly release scheduled on April 27, 2021. We would appreciate your patience until then.
Feedback: https://www.syncfusion.com/feedback/24505/issue-in-deleting-the-entire-recurrence-events-with-resources-only-when-it-is