1. Home
  2. Forum
  3. React - EJ 2
  4. Issue with Insert and update on Schedule component with Odata v4 Service

Issue with Insert and update on Schedule component with Odata v4 Service

Hi,

We are facing this weird issue with saving the Schedule data to the database using OData v4 service. This is with React Schedule Component

Here is what we are trying to do.

1. User comes to the group page. They review appointments and decide to add appointment or edit existing appointment.
2. We will need template for editing the appointments as well. I have attached the react component file as well.
3. Whenever we do insert or update with Odata v4 adaptor. The service is getting null value for the parameters for POST and PATCH. 

I have attached the service that is written as well as the scheduler component.

Would really appreciate if you can let us know what is the right way to right the service for the batch operation with the schedule component or can I just use POST and PATCH instead of the $batch service it tries to call. Here is what I see in my Network tab in DevTools -

Preflight
    1. Request URL:
      https://localhost:44325/odata/$batch
    2. Request Method:
      OPTIONS
    3. Status Code:
      204
    4. Remote Address:
      [::1]:44325
    5. Referrer Policy:
      strict-origin-when-cross-origin
  1. Response Headers
    1. access-control-allow-headers:
      content-type,prefer
    2. access-control-allow-methods:
      POST
    3. access-control-allow-origin:
      https://localhost:44357
    4. date:
      Sun, 21 Mar 2021 23:06:42 GMT
    5. server:
      Microsoft-IIS/10.0
    6. x-powered-by:
      ASP.NET
  2. Request Headers
    1. :authority:
      localhost:44325
    2. :method:
      OPTIONS
    3. :path:
      /odata/$batch
    4. :scheme:
      https
    5. accept:
      */*
    6. accept-encoding:
      gzip, deflate, br
    7. accept-language:
      en-US,en;q=0.9
    8. access-control-request-headers:
      content-type,prefer
    9. access-control-request-method:
      POST
    10. origin:
      https://localhost:44357
    11. referer:
      https://localhost:44357/
    12. sec-fetch-dest:
      empty
    13. sec-fetch-mode:
      cors
    14. sec-fetch-site:
      same-site
    15. user-agent:
      Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.57

POST CODE
    1. Request URL:
      https://localhost:44325/odata/$batch
    2. Request Method:
      POST
    3. Status Code:
      200
    4. Remote Address:
      [::1]:44325
    5. Referrer Policy:
      strict-origin-when-cross-origin
  1. Response Headers
    1. access-control-allow-origin:
      https://localhost:44357
    2. content-type:
      application/json
    3. date:
      Sun, 21 Mar 2021 23:06:49 GMT
    4. odata-version:
      4.0
    5. server:
      Microsoft-IIS/10.0
    6. x-powered-by:
      ASP.NET
  2. Request Headers
    1. :authority:
      localhost:44325
    2. :method:
      POST
    3. :path:
      /odata/$batch
    4. :scheme:
      https
    5. accept:
      application/json, text/javascript, */*; q=0.01
    6. accept-encoding:
      gzip, deflate, br
    7. accept-language:
      en-US,en;q=0.9
    8. content-length:
      1012
    9. content-type:
      multipart/mixed; charset=UTF-8;boundary=batch_370206ce-e54a-44ab-b5d3-c10fb4cde5ac
    10. origin:
      https://localhost:44357
    11. prefer:
      return=representation
    12. referer:
      https://localhost:44357/
    13. sec-fetch-dest:
      empty
    14. sec-fetch-mode:
      cors
    15. sec-fetch-site:
      same-site
    16. user-agent:
      Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.57
  3. Request Payload
    1. --batch_370206ce-e54a-44ab-b5d3-c10fb4cde5ac Content-Type: multipart/mixed; boundary=changeset_68ed472b-d1ba-491f-8705-7b6bb6715a1b --changeset_68ed472b-d1ba-491f-8705-7b6bb6715a1b Content-Type: application/http Content-Transfer-Encoding: binary PATCH GroupEvents(2) HTTP/1.1 Accept: application/json, text/javascript, */*; q=0.01 Content-Id: 0 Content-Type: application/json; charset=utf-8 {"Id":2,"GroupId":1,"GroupEventCategoryId":3,"Subject":"Practice","Description":"Practice Testing","StartTime":"2021-03-22T00:00:00.000Z","EndTime":"2021-03-22T02:00:00.000Z","StartTimeZone":null,"EndTimeZone":null,"IsAllDay":false,"GroupLocationId":1,"CreatedBy":"[email protected]","CreatedDate":"2021-03-20T05:00:00.000Z","ModifiedBy":"[email protected]","ModifiedDate":"2021-03-20T05:00:00.000Z","Guid":"3978f082-bb28-8c8b-cbef-74a735e9a742","StartTimezone":null,"EndTimezone":null,"RecurrenceRule":null} --changeset_68ed472b-d1ba-491f-8705-7b6bb6715a1b-- --batch_370206ce-e54a-44ab-b5d3-c10fb4cde5ac--
Your help is greatly appreciated.

Am I missing something on the service or react code?

Thank You,

Regards,

Ameet


Attachment: Schedule_Issue_6ec5538f.zip

3 Replies 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team March 22, 2021 07:25 AM UTC

Hi Ameet, 

Greetings from Syncfusion Support..! 

We have validated your shared snippets with all your shared queries at our end and for that, we have prepared a CRUD sample using ODataV4 Adaptor, which can be downloaded from the following link. 


Server-side snippets: 
// GET: odata/EventDatas(5) 
[EnableQuery] 
[AcceptVerbs("GET")] 
public IQueryable<EventData> GetEventDatas(string StartDate, string EndDate) 
{ 
                DateTime start = DateTime.Parse(StartDate); 
                DateTime end = DateTime.Parse(EndDate); 
                return db.EventDatas.Where(evt => evt.StartTime >= start && evt.EndTime <= end); 
} 

// POST: odata/EventDatas 
[AcceptVerbs("POST", "OPTIONS")] 
public void Post([FromBody]CrudData eventData) 
{ 
                EventData insertData = new EventData(); 
                insertData.Id = (db.EventDatas.ToList().Count > 0 ? db.EventDatas.ToList().Max(p => p.Id) : 1) + 1; 
                insertData.StartTime = Convert.ToDateTime(eventData.StartTime).ToLocalTime(); 
                insertData.EndTime = Convert.ToDateTime(eventData.EndTime).ToLocalTime(); 
                insertData.Subject = eventData.Subject; 
                insertData.IsAllDay = eventData.IsAllDay; 
                insertData.Location = eventData.Location; 
                insertData.Description = eventData.Description; 
                insertData.GroupId = eventData.GroupId; 
                insertData.GroupCategoryId = eventData.GroupCategoryId; 
                insertData.RecurrenceRule = eventData.RecurrenceRule; 
                insertData.RecurrenceID = eventData.RecurrenceID; 
                insertData.RecurrenceException = eventData.RecurrenceException; 
                insertData.StartTimezone = eventData.StartTimezone; 
                insertData.EndTimezone = eventData.EndTimezone; 

                db.EventDatas.Add(insertData); 
                db.SaveChanges(); 
} 

// PATCH: odata/EventDatas(5) 
[AcceptVerbs("PATCH", "MERGE", "OPTIONS")] 
public void Patch([FromBody]CrudData eventData) 
{ 
                EventData updateData = db.EventDatas.Find(Convert.ToInt32(eventData.Id)); 
                if (updateData != null) 
                { 
                                updateData.StartTime = Convert.ToDateTime(eventData.StartTime).ToLocalTime(); 
                                updateData.EndTime = Convert.ToDateTime(eventData.EndTime).ToLocalTime(); 
                                updateData.Subject = eventData.Subject; 
                                updateData.IsAllDay = eventData.IsAllDay; 
                                updateData.Location = eventData.Location; 
                                updateData.Description = eventData.Description; 
                                updateData.GroupId = eventData.GroupId; 
                                updateData.GroupCategoryId = eventData.GroupCategoryId; 
                                updateData.RecurrenceRule = eventData.RecurrenceRule; 
                                updateData.RecurrenceID = eventData.RecurrenceID; 
                                updateData.RecurrenceException = eventData.RecurrenceException; 
                                updateData.StartTimezone = eventData.StartTimezone; 
                                updateData.EndTimezone = eventData.EndTimezone; 

                                db.SaveChanges(); 
                } 
} 

// DELETE: odata/EventDatas(5) 
[AcceptVerbs("DELETE", "OPTIONS")] 
public void Delete([FromODataUri]int key) 
{ 
                EventData removeData = db.EventDatas.Find(key); 
                if (removeData != null) 
                { 
                                db.EventDatas.Remove(removeData); 
                                db.SaveChanges(); 
                } 
} 

Client-side snippets: 
    this.dataManager = new DataManager({ 
      url: "http://localhost:25255/odata", 
      adaptor: new ODataV4Adaptor(), 
      crossDomain: true 
    }); 
    this.dataQuery = new Query().from("EventDatas"); 
. 
. 
. 
eventSettings={{ 
                dataSource: this.dataManager, 
                query: this.dataQuery 
  }} 


Q1:  User comes to the group page. They review appointments and decide to add appointment or edit existing appointment. 

Based on your shared snippets your requirement is to bind two-level resources for the scheduler but you have not included the resources-related tags inside the Scheduler and for further reference, kindly refer to the below snippets, and the same, can be viewed in the above sample. 

<ScheduleComponent 
  cssClass="timeline-resource-grouping" 
  width="100%" 
  height="650px" 
  selectedDate={new Date(2018, 3, 4)} 
  currentView="TimelineWeek" 
  eventSettings={{ 
                dataSource: this.dataManager, 
                query: this.dataQuery 
  }} 
  group={{ resources: ["Projects", "Categories"] }} 
  editorTemplate={this.editorTemplate.bind(this)} 
> 
  <ResourcesDirective> 
                <ResourceDirective 
                  field="GroupCategoryId" 
                  title="Choose Project" 
                  name="Projects" 
                  allowMultiple={false} 
                  dataSource={this.projectData} 
                  textField="parentText" 
                  idField="parentId" 
                  colorField="color" 
                /> 
                <ResourceDirective 
                  field="GroupId" 
                  title="Category" 
                  name="Categories" 
                  allowMultiple={false} 
                  dataSource={this.categoryData} 
                  textField="text" 
                  idField="id" 
                  groupIDField="groupId" 
                  colorField="color" 
                /> 
  </ResourcesDirective> 
  <ViewsDirective> 
                <ViewDirective option="TimelineDay" /> 
                <ViewDirective option="TimelineWeek" /> 
                <ViewDirective option="TimelineWorkWeek" /> 
                <ViewDirective option="TimelineMonth" /> 
                <ViewDirective option="Agenda" /> 
  </ViewsDirective> 
  <Inject 
                services={[ 
                  TimelineViews, 
                  TimelineMonth, 
                  Agenda, 
                  Resize, 
                  DragAndDrop 
                ]} 
  /> 
</ScheduleComponent> 


Q2: We will need template for editing the appointments as well. I have attached the react component file as well. 

For this query, you have not included the editorTemplate property for the Scheduler and that could be the reason for your reported problem and for further reference, kindly refer to the below snippets and the same can be viewed in the above sample. 

<ScheduleComponent 
  cssClass="timeline-resource-grouping" 
  width="100%" 
  height="650px" 
  editorTemplate={this.editorTemplate.bind(this)} 
> 
</ScheduleComponent> 


Q3: Whenever we do insert or update with Odata v4 adaptor. The service is getting null value for the parameters for POST and PATCH. 
We suspect that the above issue is related to the field mismatch between the client and server sides and for that, kindly try the above CRUD sample in which the CRUD actions are properly working in the Database while editing in the client end. 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you..! 

Regards, 
Hareesh 


Marked as answer
AM Ameet March 29, 2021 12:28 AM UTC

The issue was the case on StartTimeZone. In my database it was sending couple of fields with the same name with spelling issues.

This has been fixed now.

Thank you,

Regards,

Ameet 

NR Nevitha Ravi Syncfusion Team March 29, 2021 03:53 AM UTC

Hi Ameet, 

Thanks for your update. 

We are happy that the reported issue has been resolved at you end, please let us know if you need any further assistance. 

Regards, 
Nevitha 


Loader.
Up arrow icon