Schedule CRUD using with external api

Question

Hi,Already, I have a webApi. I would like to perform CRUD operations using GET, POST, PUT, DELETE methods separately. I am new for Syncfusion angular, can you guide me to perform this operations.private dataManager: DataManager = new DataManager({    url:'https://localhost:8084/api/schedules',    adaptor: new ODataV4Adaptor,    crossDomain: true  });

Hareesh Balasubramanian · Accepted Answer

Hi Muthu, 

Greetings from Syncfusion Support..! 

We have prepared a CRUD sample based on your shared query “need to have a separate API methods for each CRUD actions” using Ajax call we have implements separate API call for each CRUD actions, which can be downloaded from the following link. 

Service: https://www.syncfusion.com/downloads/support/forum/164514/ze/Service771485313 
Sample: https://stackblitz.com/edit/angular-scheduler-crud-with-different-api-calls?file=app.component.ts  

Client-side snippets: 




  onBound(args: any): void { 
    if (this.temp) { 
      let schObj = (document.querySelector('.e-schedule') as any).ej2_instances[0]; 
      const ajax = new Ajax('http://localhost:54738/Home/GetData', 'GET', false); 
      ajax.onSuccess = (data: any) => { 
        schObj.eventSettings.dataSource = JSON.parse(data); 
      }; 
      ajax.send(); 
      this.temp = false; 
    } 
  } 

  onBegin(args: any): void { 
    if (args.requestType === "eventCreate") { 
      let schObj = (document.querySelector('.e-schedule') as any).ej2_instances[0]; 
      const ajax = new Ajax('http://localhost:54738/Home/Insert', 'POST', false); 
      ajax.data = JSON.stringify(args.data[0]); 
      ajax.onSuccess = (data: any) => { 
        schObj.eventSettings.dataSource = JSON.parse(data); 
      }; 
      ajax.send(); 
    } else if (args.requestType === "eventChange") { 
      let schObj = (document.querySelector('.e-schedule') as any).ej2_instances[0]; 
      const ajax = new Ajax('http://localhost:54738/Home/Update', 'POST', false); 
      ajax.data = JSON.stringify(args.data); 
      ajax.onSuccess = (data: any) => { 
        schObj.eventSettings.dataSource = JSON.parse(data); 
      }; 
      ajax.send(); 
    } 
    else if (args.requestType === "eventRemove") { 
      let schObj = (document.querySelector('.e-schedule') as any).ej2_instances[0]; 
      const ajax = new Ajax('http://localhost:54738/Home/Delete', 'POST', false); 
      ajax.data = JSON.stringify(args.data[0]); 
      ajax.onSuccess = (data: any) => { 
        schObj.eventSettings.dataSource = JSON.parse(data); 
      }; 
      ajax.send(); 
    } 
  } 

Server-side snippets: 




        public JsonResult GetData()  // Here we return data to Schedulerl 
        { 
            var data = db.ScheduleEventDatas.ToList(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 

        [HttpPost] 
        public JsonResult Insert(ScheduleEventData insertData) 
        { 
            var value = insertData; 
            int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1; 
            DateTime startTime = Convert.ToDateTime(value.StartTime); 
            DateTime endTime = Convert.ToDateTime(value.EndTime); 
            ScheduleEventData appointment = new ScheduleEventData() 
            { 
                Id = intMax + 1, 
                StartTime = startTime.ToLocalTime(), 
                EndTime = endTime.ToLocalTime(), 
                Subject = value.Subject, 
                IsAllDay = value.IsAllDay, 
                StartTimezone = value.StartTimezone, 
                AirlineId = value.AirlineId, 
                PilotId = value.PilotId, 
                EndTimezone = value.EndTimezone, 
                RecurrenceRule = value.RecurrenceRule, 
                RecurrenceID = value.RecurrenceID, 
                RecurrenceException = value.RecurrenceException, 
            }; 
            db.ScheduleEventDatas.InsertOnSubmit(appointment); 
            db.SubmitChanges(); 
            var data = GetData(); 
            return data; 
        } 

        public JsonResult Update(ScheduleEventData updateData) 
        { 
            var value = updateData; 
            var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id)); 
            if (filterData.Count() > 0) 
            { 
                DateTime startTime = Convert.ToDateTime(value.StartTime); 
                DateTime endTime = Convert.ToDateTime(value.EndTime); 
                ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id)); 
                appointment.StartTime = startTime.ToLocalTime(); 
                appointment.EndTime = endTime.ToLocalTime(); 
                appointment.StartTimezone = value.StartTimezone; 
                appointment.EndTimezone = value.EndTimezone; 
                appointment.Subject = value.Subject; 
                appointment.IsAllDay = value.IsAllDay; 
                appointment.AirlineId = value.AirlineId; 
                appointment.PilotId = value.PilotId; 
                appointment.RecurrenceRule = value.RecurrenceRule; 
                appointment.RecurrenceID = value.RecurrenceID; 
                appointment.RecurrenceException = value.RecurrenceException; 
            } 
            db.SubmitChanges(); 
            var data = GetData(); 
            return data; 
        } 
        public JsonResult Delete(ScheduleEventData deleteData) 
        { 
            var value = deleteData; 
            ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == value.Id).FirstOrDefault(); 
            if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment); 
            db.SubmitChanges(); 
            var data = GetData(); 
            return data; 
        } 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be always happy to assist you..! 

Regards, 
Hareesh