)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load the data on demand and perform CRUD action in Schedule?

Platform: ASP.NET MVC |
Control: Schedule |
Published Date: July 3, 2018 |
Last Revised Date: July 3, 2018
Tags: lod_crud

The following steps shows the way to render appointments on scheduler, based on the externally selected date from the application end.

 

Step 1:  Create a normal load on demand sample using scheduler by referring this online sample.

@(Html.EJ().Schedule("Schedule1")

        .Width("100%")

        .Height("525px")

        .CurrentDate(new DateTime(2016, 10, 29))

        .EnableLoadOnDemand(true)

        .AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor"))

        .ApplyTimeOffset(false)

                .Id("Id")

                .Subject("Subject")

                .StartTime("StartTime")

                .EndTime("EndTime")

                .AllDay("AllDay")

                .Recurrence("Recurrence")

                .RecurrenceRule("RecurrenceRule"))

)

 

Step 2: Render an individual datePicker control on the same page where the schedule is rendered and bind the client-side event Select as shown below.

  @Html.EJ().DatePicker("DatePick").TagName("div").DisplayInline(true).ShowFooter(false).Value("10/23/2016").ClientSideEvents(s => s.Select("onSelected"))  

 

Step 3: Define the Select event function onSelected, on which the query to be passed to the controller (through which the selected date will be passed) is defined as shown below.

  function onSelected(args) {

// this function will be called when the date is selected in the month calendar

        $("#Schedule1").ejSchedule({ currentDate: new Date(args.value) }); // here we are rendering the Scheduler with the selected date

        var date = new Date(args.value).toISOString();

        var obj = $("#Schedule1").data("ejSchedule"); // object for schedule is created

        var dataManager1 = ej.DataManager({

            url: '@Url.Action("GetData","Home")',

            crudUrl: '@Url.Action("Batch", "Home")',

            crossDomain: true

        });

        var query = ej.Query().addParams("curDate", date); // By using addParams we can send the parameter to controller for filtering

        if (!ej.isNullOrUndefined(obj))

            obj.option("appointmentSettings.query", query); // here we are assigning the query to schedule

    }

 

Step 3: In the controller side, define the GetData function by defining an argument to it that accepts the date value passed from client-side. Using the selected date, we can filter the appointments and return the filtered appointments back to the scheduler.

public JsonResult GetData(string curDate)

        {

            var DataSource = new DataClasses1DataContext().ScheduleDatas.ToList();

            List<ScheduleData> appointmentList = DataSource.ToList();

            if (!string.IsNullOrEmpty(curDate))

            {

                DateTime StartDate = Convert.ToDateTime(curDate);

                DateTime EndDate = Convert.ToDateTime(curDate).AddHours(23).AddMinutes(59).AddSeconds(59);

                appointmentList = DataSource.ToList().Where(app => app.StartTime >= StartDate && app.StartTime <= EndDate || app.Recurrence == true).ToList();// here particular date appointment is filtered

            }

            return Json(appointmentList, JsonRequestBehavior.AllowGet);

        }

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1909642833

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon