ASP.NET Core

Search results

Data-binding

The Schedule uses DataManager, which supports both RESTful JSON data services binding and local JavaScript object array binding. The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection. It supports two kinds of data binding method:

Local data
Remote data

Local data

To bind local data to the Schedule, you can assign a JavaScript object array to the dataSource property. The local data source can also be provided as an instance of the DataManager.

tagHelper

data.cs

@using Syncfusion.EJ2

@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper schedule-control-section">
            <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2018, 2, 15)">
                <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
            </ejs-schedule>
        </div>
    </div>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult local-data()
        {
            ViewBag.datasource = new ScheduleData().GetScheduleData();
            return View();
        }
    }
}

By default, DataManager uses JsonAdaptor for local data-binding.

Remote data

To bind remote data to Schedule component, assign service data as an instance of DataManager to the dataSource property. To interact with remote data source, provide the endpoint url.

OData

OData is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.

tagHelper

data.cs

@using Syncfusion.EJ2
@{
    var dataManager = new DataManager() { Url = "https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData", Adaptor = "ODataAdaptor", CrossDomain = true };
}
@section ControlsSection{
    <div class="control-section">
        <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2017, 6, 11)" readonly="true">
            <e-schedule-eventsettings dataSource="dataManager">
            </e-schedule-eventsettings>
        </ejs-schedule>
    </div>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult Odata()
        {
            return View();
        }
    }
}

Web API

You can use WebApiAdaptor to bind Schedule with Web API created using OData endpoint.

tagHelper

data.cs

@using Syncfusion.EJ2
@{
    var dataManager = new DataManager() { Url = "https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData", Adaptor = "WebApiAdaptor", CrossDomain = true };
}
@section ControlsSection{
    <div class="control-section">
        <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2017, 6, 11)" readonly="true">
            <e-schedule-eventsettings dataSource="dataManager">
            </e-schedule-eventsettings>
        </ejs-schedule>
    </div>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult web-api()
        {
            return View();
        }
    }
}

UrlAdaptor

UrlAdaptor also used to bind appointment in Schedule as shown below.

Example for ASP.NET MVC

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSettings(e => e.DataSource(d => d.Url("Home/GetData").Adaptor("UrlAdaptor").CrossDomain(true))).SelectedDate(new DateTime(2017, 6, 11)).Render()
        </div>
    </div>
}

Example for ASP.NET CORE

@using Syncfusion.EJ2
@{
    var dataManager = new DataManager() { Url = "Home/GetData", Adaptor = "UrlAdaptor", CrossDomain = true };
}
@section ControlsSection{
    <div class="control-section">
        <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2017, 6, 11)" readonly="true">
            <e-schedule-eventsettings dataSource="dataManager">
            </e-schedule-eventsettings>
        </ejs-schedule>
    </div>
}

Definition for the controller method GetData can be referred here.

Passing additional parameters

To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the Schedule query property.

tagHelper

data.cs

@using Syncfusion.EJ2
@{
    var dataManager = new DataManager() { Url = "https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData", Adaptor = "ODataAdaptor" };
}
@section ControlsSection{
    <div class="control-section">
        <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2017, 6, 11)">
            <e-schedule-eventsettings dataSource="dataManager">
            </e-schedule-eventsettings>
        </ejs-schedule>
    </div>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult additional-parameter()
        {
            return View();
        }
    }
}

The parameters added using the query property will be sent along with the data request for every Schedule action.

Handling the failure actions

During server interaction from the Schedule, some server-side exceptions may occur, and you can acquire those error messages or exception details in client-side using the actionFailureevent.

The argument passed to the actionFailure event contains the error details returned from the server.

tagHelper

data.cs

@using Syncfusion.EJ2
@{
    var dataManager = new DataManager() { Url = "http://some.com/invalidUrl", Adaptor = "UrlAdaptor", CrossDomain = true };
}
@section ControlsSection{
    <div class="control-section">
        <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2017, 6, 11)" actionFailure="onActionFailure">
            <e-schedule-eventsettings dataSource="dataManager">
            </e-schedule-eventsettings>
        </ejs-schedule>
    </div>
    <script type="text/javascript">
        function onActionFailure(args) {
            var scheduleObj = document.getElementById('schedule').ej2_instances[0];
            var span = document.createElement('span');
            scheduleObj.element.parentNode.insertBefore(span, scheduleObj.element);
            span.style.color = '#FF0000';
            span.innerHTML = 'Server exception: 404 Not found';
        }
    </script>
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public partial class ScheduleController : Controller
    {
        public IActionResult failure-actions()
        {
            return View();
        }
    }
}

The actionFailure event will be triggered not only for the server errors, but also when there is an exception while processing the Schedule actions.

Performing CRUD actions

CRUD actions can be performed on Scheduler appointments using the available adaptors in DataManager as shown below.

Example for ASP.NET MVC

@section ControlsSection{
    <div class="control-section">
        <div class="content-wrapper">
            @Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSettings(e => e.DataSource(d => d.Url("Home/GetData").CrudUrl("Home/UpdateData").Adaptor("UrlAdaptor").CrossDomain(true))).SelectedDate(new DateTime(2017, 6, 5)).Render()
        </div>
    </div>
}

Example for ASP.NET CORE

@using Syncfusion.EJ2
@{
    var dataManager = new DataManager() { Url = "Home/GetData", Adaptor = "UrlAdaptor", CrudUrl = "Home/UpdateData", CrossDomain = true };
}
@section ControlsSection{
    <div class="control-section">
        <ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2017, 6, 5)">
            <e-schedule-eventsettings dataSource="dataManager">
            </e-schedule-eventsettings>
        </ejs-schedule>
    </div>
}

The server-side controller code to handle the CRUD operations are as follows.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ScheduleCRUD.Models;
using System.Collections;
namespace ScheduleCRUD.Controllers
{
    public class HomeController : Controller
    {
        ScheduleDataDataContext db = new ScheduleDataDataContext();
// ScheduleDataDataContext is a LINQ-to-SQL data class name that is defined in the .dbml file to access the tables from the database
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult GetData() // To initially bind the appointments with Scheduler
        {
            List<MultipleResource> data = new ScheduleDataDataContext().MultipleResources.ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }

        public JsonResult UpdateData(EditParams param)
        {
            // this block of code will execute while inserting the appointments
            if (param.action == "insert" || (param.action == "batch" && param.added != null))
            {
                var value = param.action == "insert" ? param.value : param.added[0];
                int intMax = db.MultipleResources.ToList().Count > 0 ? db.MultipleResources.ToList().Max(p => p.Id) : 1;
                DateTime startTime = Convert.ToDateTime(value.StartTime);
                DateTime endTime = Convert.ToDateTime(value.EndTime);
                MultipleResource appoint = new MultipleResource()
                {
                    Id = intMax + 1,
                    StartTime = startTime,
                    EndTime = endTime,
                    Subject = value.Subject,
                    AllDay = value.AllDay
                };
                db.MultipleResources.InsertOnSubmit(appoint);
                db.SubmitChanges();
            }
            // this block of code will execute while removing the appointment
            if (param.action == "remove" || param.deleted != null)
            {
                if (param.action == "remove")
                {
                    int key = Convert.ToInt32(param.key);
                    MultipleResource app = db.MultipleResources.Where(c => c.Id == key).FirstOrDefault();
                    if (app != null) db.MultipleResources.DeleteOnSubmit(app);
                }
                else
                {
                    foreach (var apps in param.deleted)
                    {
                        MultipleResource app = db.MultipleResources.Where(c => c.Id == apps.Id).FirstOrDefault();
                        if (apps != null) db.MultipleResources.DeleteOnSubmit(app);
                    }
                }
                db.SubmitChanges();
            }
            // this block of code will execute while updating the appointment
            if ((param.action == "batch" && param.changed != null) || param.action == "update")
            {
                var value = param.action == "update" ? param.value : param.changed[0];
                var filterData = db.MultipleResources.Where(c => c.Id == Convert.ToInt32(value.Id));

                if (filterData.Count() > 0)
                {
                    DateTime startTime = Convert.ToDateTime(value.StartTime);
                    DateTime endTime = Convert.ToDateTime(value.EndTime);
                    MultipleResource appoint = db.MultipleResources.Single(A => A.Id == Convert.ToInt32(value.Id));
                    appoint.StartTime = startTime;
                    appoint.EndTime = endTime;
                    appoint.Subject = value.Subject;
                    appoint.AllDay = value.AllDay;
                }
                db.SubmitChanges();
            }
            var data = db.MultipleResources.ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }
    }
}

Contents

Local data
Remote data
OData
Web API
UrlAdaptor
Passing additional parameters
Handling the failure actions
Performing CRUD actions

Contents

Local data
Remote data
OData
Web API
UrlAdaptor
Passing additional parameters
Handling the failure actions
Performing CRUD actions

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!