How to handle add/update/delete Record in a CustomAdaptor in DataManager?

Question

I have created a custom class that extends the CustomAdaptor for the DataManager to use to get data from my Web API for the ScheduleComponent to bind to.

However, whenever I drag and drop, resize, or edit an item, it never calls the updateRecord function of my custom adapter. Instead it always calls batchUpdate.

Is there a way to disable all batch updating so that the updateRecord method of my custom adapter is called instead? If so, how can I do it?

Here is the complete code for my CustomAdaptor class.

import { extend } from '@syncfusion/ej2-base';
import { AjaxOption, CustomDataAdaptor } from '@syncfusion/ej2-data';
import config from 'config';

export default class AuditCalendarAdaptor extends CustomDataAdaptor {
  authToken: string;
  baseUrl = `${config.endpoints.baseUrl}/AuditPlanCalendarItems`;

  constructor(authToken: string) {
    super({
      getData: (option: AjaxOption) => {
        console.log("Get");
        this.createRequest(`${this.baseUrl}/GetCalendarItems`, option, authToken);
      },
      addRecord: (option: AjaxOption) => {
        console.log("Create");
        this.createRequest(`${this.baseUrl}/Create`, option, authToken);
      },
      updateRecord: (option: AjaxOption) => {
        console.log("Update");
        this.createRequest(`${this.baseUrl}/Update`, option, authToken);
      },
      deleteRecord: (option: AjaxOption) => {
        console.log("Delete");
        this.createRequest(`${this.baseUrl}/Delete`, option, authToken);
      },
      batchUpdate: (option: AjaxOption) => {
        console.log("Batch");
        this.createRequest(`${this.baseUrl}/Batch`, option, authToken);
      },
    });

    this.authToken = authToken;
  }

  createRequest(url: string, option: AjaxOption, authToken: string) {
    let xhttp: XMLHttpRequest = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4) {
        let request: Object = extend({}, option, { httpRequest: xhttp });
        if ((xhttp.status >= 200 && xhttp.status <= 299) || xhttp.status === 304) {
          let data: Object = JSON.parse(xhttp.responseText);
          option.onSuccess?.(data, request);
        } else {
          option.onFailure?.(request);
        }
      }
    };
    xhttp.open("POST", url, true);
    xhttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    xhttp.setRequestHeader('Authorization', `Bearer ${authToken}`);
    xhttp.send(option.data);
  }
}

Ravikumar Venkatesan · Answer

Hi Justin,Greetings from Syncfusion support.No, we cannot able to disable the batch action on CRUD
actions. Based on the details that were received from the batchUpdate
method you can perform the add, update, and delete actions as highlighted in
the below code snippet.

import { extend } from '@syncfusion/ej2-base';
  import { AjaxOption, CustomDataAdaptor } from '@syncfusion/ej2-data';
  import config from 'config';
   
  export default class AuditCalendarAdaptor extends CustomDataAdaptor {
    authToken: string;
    baseUrl = `${config.endpoints.baseUrl}/AuditPlanCalendarItems`;
   
    constructor(authToken: string) {
      super({
     
    getData: (option: AjaxOption) => {
     
      console.log("Get");
     
      this.createRequest(`${this.baseUrl}/GetCalendarItems`, option, authToken);
     
    },
     
    batchUpdate: (option: AjaxOption) => {
     
      var data = JSON.parse(option.data);
     
      if(data.added.length > 0) {
     
          this.createRequest(`${this.baseUrl}/Create`, option, authToken);
     
      } else if(data.changed.length > 0) {
     
          this.createRequest(`${this.baseUrl}/Update`, option, authToken);
     
      } else if(data.deleted.length > 0) {
     
          this.createRequest(`${this.baseUrl}/Delete`, option, authToken);
     
      }
     
    },
      });
   
      this.authToken = authToken;
    }
   
    createRequest(url: string, option: AjaxOption, authToken: string) {
      let xhttp: XMLHttpRequest = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
     
    if (this.readyState == 4) {
     
      let request: Object = extend({}, option, { httpRequest: xhttp });
     
      if ((xhttp.status >= 200 && xhttp.status <= 299) || xhttp.status === 304) {
     
        let data: Object = JSON.parse(xhttp.responseText);
     
        option.onSuccess?.(data, request);
     
      } else {
     
        option.onFailure?.(request);
     
      }
     
    }
      };
      xhttp.open("POST", url, true);
      xhttp.setRequestHeader('Content-Type', 'application/json;
  charset=utf-8');
      xhttp.setRequestHeader('Authorization', `Bearer ${authToken}`);
      xhttp.send(option.data);
    }
  }

Kindly try the shared solution and let us know if you need
any further assistance on this.Regards,Ravikumar Venkatesan