React SyncFusion Resource 和分组 crud 不绑定调度程序中的数据

Question

添加事件正在运行（保存到数据库），但添加的事件未显示在调度程序上，但它正在处理模拟数据。如果有人知道如何将数据绑定回调度程序，请告诉我

Please click here to find the attachment image 请查看上面的图像响应获取表单 api 但未绑定到调度程序 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

您错过了在 dataManager 设置中添加 CrudUrl。这样 CRUD 操作就不起作用了。所以我们建议您参考并遵循以下示例。

服务：https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleCRUD-1748824462-1972500097

样本：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

我们可以重现报告的问题“删除整个重复事件的问题”，并在我们这边确认这是缺陷。您可以通过以下反馈跟踪错误。此问题的修复预计将在我们计划于 2021 年 4 月 27 日发布的 JS2 每周版本中推出。在此之前，我们将感谢您的耐心等待。

反馈：https://www.syncfusion.com/feedback/24505/issue-in-deleting-the-entire-recurrence-events-with-resources-only-when-it-is