Loading Data on Demand

Question

You gave us an example for JavaScript (Essential JS1), but these options don't work with Essential JS 2.

https://help.syncfusion.com/js/schedule/data-binding#loading-data-on-demand

Could you give us an example for Essential JS 2.

Velmurugan S · Answer

Hi Lajos, Thanks for Contacting Syncfusion support. Loading data on demand is availed by default in JS2 Schedule control. We have prepared the sample for your reference, which can be downloaded from the following location. JavaScript Sample [Front End] : http://www.syncfusion.com/downloads/support/forum/137114/ze/ScheduleSample-1964450740 Schedule CRUD Service [Back End]: http://www.syncfusion.com/downloads/support/forum/137114/ze/ScheduleCRUD1497093894 Please refer to the following code example used in the above sample.

 

Front End (app.ts page): 

import { DataManager, UrlAdaptor} from '@syncfusion/ej2-data'; 
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule'; 
 
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda); 
let scheduleObj: Schedule = new Schedule({ 
    height: '550px', 
    eventSettings: {  
      dataSource: new DataManager({ 
        url: 'http://localhost:64881/Home/LoadData', // To get the initial data 
        crudUrl: 'http://localhost:64881/Home/UpdateData', // To store and get the data while perform the CRUD action 
        crossDomain: true, 
        adaptor: new UrlAdaptor       
      }),       
      fields: { 
        id: { name: 'Id' }, 
        subject: { name: 'Subject' }, 
        startTime: { name: 'StartTime' }, 
        endTime: { name: 'EndTime' }, 
        isAllDay: { name: 'AllDay' }, 
        recurrenceRule: { name: 'RecurrenceRule' }, 
        recurrenceID: { name: 'RecurrenceId' }, 
        recurrenceException: { name: 'RecurrenceException' } 
      }   
    } 
}); 
scheduleObj.appendTo('#Schedule'); 


Back End (Home Controller page): 

    public class HomeController : Controller 
    { 
 
        ScheduleDataDataContext db = new ScheduleDataDataContext(); 
 
        [HttpPost] 
        public JsonResult LoadData(Params param) // Here we get the Start and End Date of the current View, based on which we can filter the data and return it to Schedule 
        { 
            var data = db.EventDatas.ToList().Where(app => app.StartTime >= param.StartDate && app.StartTime <= param.EndDate).ToList(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
 
        public class Params 
        { 
            public DateTime StartDate { get; set; } 
            public DateTime EndDate { get; set; } 
        } 
 
        [HttpPost] 
        public JsonResult UpdateData(EditParams param) 
        { 
            if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments 
            { 
                var value = (param.action == "insert") ? param.value : param.added[0]; 
                int intMax = db.EventDatas.ToList().Count > 0 ? db.EventDatas.ToList().Max(p => p.Id) : 1; 
                DateTime startTime = Convert.ToDateTime(value.StartTime); 
                DateTime endTime = Convert.ToDateTime(value.EndTime); 
                EventData appointment = new EventData() 
                { 
                    Id = intMax + 1, 
                    StartTime = startTime.ToLocalTime(), 
                    EndTime = endTime.ToLocalTime(), 
                    Subject = value.Subject, 
                    AllDay = value.AllDay, 
                    StartTimezone = value.StartTimezone, 
                    EndTimezone = value.EndTimezone, 
                    RecurrenceRule = value.RecurrenceRule, 
                    RecurrenceId = value.RecurrenceId, 
                    RecurrenceException = value.RecurrenceException 
                }; 
                db.EventDatas.InsertOnSubmit(appointment); 
                db.SubmitChanges(); 
            } 
            if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment 
            { 
                var value = (param.action == "update") ? param.value : param.changed[0]; 
                var filterData = db.EventDatas.Where(c => c.Id == Convert.ToInt32(value.Id)); 
                if (filterData.Count() > 0) 
                { 
                    DateTime startTime = Convert.ToDateTime(value.StartTime); 
                    DateTime endTime = Convert.ToDateTime(value.EndTime); 
                    EventData appointment = db.EventDatas.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.AllDay = value.AllDay; 
                    appointment.RecurrenceRule = value.RecurrenceRule; 
                    appointment.RecurrenceId = value.RecurrenceId; 
                    appointment.RecurrenceException = value.RecurrenceException; 
                } 
                db.SubmitChanges(); 
            } 
            if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment 
            { 
                if (param.action == "remove") 
                { 
                    int key = Convert.ToInt32(param.key); 
                    EventData appointment = db.EventDatas.Where(c => c.Id == key).FirstOrDefault(); 
                    if (appointment != null) db.EventDatas.DeleteOnSubmit(appointment); 
                } 
                else 
                { 
                    foreach (var apps in param.deleted) 
                    { 
                        EventData appointment = db.EventDatas.Where(c => c.Id == apps.Id).FirstOrDefault(); 
                        if (apps != null) db.EventDatas.DeleteOnSubmit(appointment); 
                    } 
                } 
                db.SubmitChanges(); 
            } 
            var data = db.EventDatas.ToList(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
 
        public class EditParams 
        { 
            public string key { get; set; } 
            public string action { get; set; } 
            public List added { get; set; } 
            public List changed { get; set; } 
            public List deleted { get; set; } 
            public EventData value { get; set; } 
        } 
       
    }

You can check and try with the above sample and please let us know, if you need any further assistance on this. Regards, Velmurugan