Category / Section
How to perform the CRUD operations with editor template in the Asp.Net Core Scheduler?
5 mins read
This knowledge base article explains you about the way to perform the CRUD actions with Editor Template in the Asp.Net Core Scheduler.
Database configuration
Step 1: Create the Asp.Net Core application with the help of this getting started documentation.
Step 2: Create the database with the name of ScheduleEvent. Refer the following image for the fields.
Step 3: Connect the database with the project.
Editor Template
Step 4: Write the Event editor template script as like the following code snippet in the index.cshtml file.
<script id="EventEditorTemplate" type="text/template"> <table class="custom-event-editor" width="100%" cellpadding="5"> <tbody> <tr> <td class="e-textlabel">Summary</td> <td colspan="4"> <input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" /> </td> </tr> <tr> <td class="e-textlabel">Status</td> <td colspan="4"> <input type="text" id="ProjectId" name="EmployeeId" class="e-field" style="width: 100%" /> </td> </tr> <tr> <td class="e-textlabel">Status</td> <td colspan="4"> <input type="text" id="CategoryId" name="EmployeeId" class="e-field" style="width: 100%" /> </td> </tr> <tr> <td class="e-textlabel">From</td> <td colspan="4"> <input id="StartTime" class="e-field" type="text" name="StartTime" /> </td> </tr> <tr> <td class="e-textlabel">To</td> <td colspan="4"> <input id="EndTime" class="e-field" type="text" name="EndTime" /> </td> </tr> </tbody> </table> </script>
Step 5: Bind the Syncfusion control for all the Editor window elements in the popupOpen event.
<script type="text/javascript">
var projectData = JSON.parse('@Html.Raw(Json.Serialize(ViewBag.Projects))');
var categoriesData = JSON.parse('@Html.Raw(Json.Serialize(ViewBag.Categories))');
function onPopupOpen(args) {
if (args.type === 'Editor') {
var projectElement = args.element.querySelector('#ProjectId');
if (!projectElement.classList.contains('e-dropdownlist')) {
var dropDownListObject = new ej.dropdowns.DropDownList({
placeholder: 'Choose status', value: args.data.ProjectId,
fields: { text: 'text', value: 'id' },
dataSource: projectData,
});
dropDownListObject.appendTo(projectElement);
projectElement.setAttribute('name', 'ProjectId');
}
var categoryElement = args.element.querySelector('#CategoryId');
if (!categoryElement.classList.contains('e-multiselect')) {
var multiSelectObject = new ej.dropdowns.MultiSelect({
placeholder: 'Choose status', value: args.data.CategoryId,
fields: { text: 'text', value: 'id' },
dataSource: categoriesData,
query: new ej.data.Query().where('groupId', 'equal', args.data.ProjectId)
});
multiSelectObject.appendTo(categoryElement);
categoryElement.setAttribute('name', 'CategoryId');
}
if (args.target.classList.contains('e-appointment')) {
var catObj = args.element.querySelector('#CategoryId').ej2_instances[0];
catObj.value = [args.data.CategoryId];
}
var startElement = args.element.querySelector('#StartTime');
if (!startElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
var endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new ej.calendars.DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
}
}
function onDataBinding(args) {
// Before Loading the data to the scheduler, you need to convert the string to array
let data = args.result;
let scheduleData = [];
data.forEach(element => {
let res = element.CategoryId.split(',');
element.CategoryId = res.map(function (x) {
return parseInt(x, 10);
});
scheduleData.push(element);
});
args.result = scheduleData;
}
</script>
Step 6: Write the server action in HomeController.cs file.
private ScheduleDataContext _context;
public IActionResult Index()
{
List<ResourceDataSourceModel> projects = new List<ResourceDataSourceModel>();
projects.Add(new ResourceDataSourceModel { text = "PROJECT 1", id = 1, color = "#cb6bb2" });
projects.Add(new ResourceDataSourceModel { text = "PROJECT 2", id = 2, color = "#56ca85" });
projects.Add(new ResourceDataSourceModel { text = "PROJECT 3", id = 3, color = "#df5286" });
ViewBag.Projects = projects;
List<ResourceDataSourceModel> categories = new List<ResourceDataSourceModel>();
categories.Add(new ResourceDataSourceModel { text = "Nancy", id = 1, groupId = 1, color = "#df5286" });
categories.Add(new ResourceDataSourceModel { text = "Steven", id = 2, groupId = 1, color = "#7fa900" });
categories.Add(new ResourceDataSourceModel { text = "Robert", id = 3, groupId = 2, color = "#ea7a57" });
categories.Add(new ResourceDataSourceModel { text = "Smith", id = 4, groupId = 2, color = "#5978ee" });
categories.Add(new ResourceDataSourceModel { text = "Micheal", id = 5, groupId = 3, color = "#df5286" });
categories.Add(new ResourceDataSourceModel { text = "Root", id = 6, groupId = 3, color = "#00bdae" });
categories.Add(new ResourceDataSourceModel { text = "RK", id = 7, groupId = 4, color = "#5978ee" });
categories.Add(new ResourceDataSourceModel { text = "Dk", id = 8, groupId = 5, color = "#df5286" });
categories.Add(new ResourceDataSourceModel { text = "Stev", id = 9, groupId = 6, color = "#df5286" });
ViewBag.Categories = categories;
List<ResourceDataSourceModel> projectsList = new List<ResourceDataSourceModel>();
projectsList.Add(new ResourceDataSourceModel { text = "PROJECT 4", id = 4, color = "#bbdc00" });
projectsList.Add(new ResourceDataSourceModel { text = "PROJECT 5", id = 5, color = "#9e5fff" });
ViewBag.ProjectsList = projectsList;
List<ResourceDataSourceModel> personsList = new List<ResourceDataSourceModel>();
personsList.Add(new ResourceDataSourceModel { text = "Alice", id = 11, groupId = 4, color = "#bbdc00" });
personsList.Add(new ResourceDataSourceModel { text = "Nancy", id = 12, groupId = 5, color = "#9e5fff"});
personsList.Add(new ResourceDataSourceModel { text = "Robert", id = 13, groupId = 5, color = "#bbdc00"});
personsList.Add(new ResourceDataSourceModel { text = "Robson", id = 14, groupId = 4, color = "#9e5fff"});
personsList.Add(new ResourceDataSourceModel { text = "Laura", id = 15, groupId = 4, color = "#bbdc00" });
personsList.Add(new ResourceDataSourceModel { text = "Margaret", id = 16, groupId = 5, color = "#9e5fff"});
ViewBag.PersonsList = personsList;
ViewBag.Resources = new string[] { "Projects", "Categories" };
return View();
}
public IActionResult Schedule()
{
return View();
}
class ResourceDataSourceModel
{
public int id { set; get; }
public string text { set; get; }
public string color { set; get; }
public int? groupId { set; get; }
}
[HttpPost]
public List<ScheduleEvent> LoadData([FromBody]Params param)
{
DateTime start = (param.CustomStart != new DateTime()) ? param.CustomStart : param.StartDate;
DateTime end = (param.CustomEnd != new DateTime()) ? param.CustomEnd : param.EndDate;
return _context.ScheduleEvents.Where(app => (app.StartTime >= start && app.StartTime <= end) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList(); // Here, filtering the events based on the start and end date value.
}
public class Params
{
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public DateTime CustomStart { get; set; }
public DateTime CustomEnd { get; set; }
}
public class EditParams
{
public string key { get; set; }
public string action { get; set; }
public List<ScheduleEvent> added { get; set; }
public List<ScheduleEvent> changed { get; set; }
public List<ScheduleEvent> deleted { get; set; }
public ScheduleEvent value { get; set; }
}
[HttpPost]
public List<ScheduleEvent> UpdateData([FromBody]EditParams param)
{
if (param.action == "insert" || (param.action == "batch" && param.added.Count > 0)) // this block of code will execute when inserting the appointments
{
int intMax = _context.ScheduleEvents.ToList().Count > 0 ? _context.ScheduleEvents.ToList().Max(p => p.Id) : 1;
for (var i = 0; i < param.added.Count; i++)
{
var value = (param.action == "insert") ? param.value : param.added[i];
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
ScheduleEvent appointment = new ScheduleEvent()
{
StartTime = startTime,
EndTime = endTime,
Subject = value.Subject,
IsAllDay = value.IsAllDay,
StartTimezone = value.StartTimezone,
EndTimezone = value.EndTimezone,
RecurrenceRule = value.RecurrenceRule,
RecurrenceID = value.RecurrenceID,
RecurrenceException = value.RecurrenceException,
Description = value.Description,
CategoryId = value.CategoryId,
ProjectId = value.ProjectId
};
_context.ScheduleEvents.Add(appointment);
_context.SaveChanges();
}
}
if (param.action == "update" || (param.action == "batch" && param.changed.Count > 0)) // this block of code will execute when removing the appointment
{
var value = (param.action == "update") ? param.value : param.changed[0];
var filterData = _context.ScheduleEvents.Where(c => c.Id == Convert.ToInt32(value.Id));
if (filterData.Count() > 0)
{
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
ScheduleEvent appointment = _context.ScheduleEvents.Single(A => A.Id == Convert.ToInt32(value.Id));
appointment.StartTime = startTime;
appointment.EndTime = endTime;
appointment.StartTimezone = value.StartTimezone;
appointment.EndTimezone = value.EndTimezone;
appointment.Subject = value.Subject;
appointment.IsAllDay = value.IsAllDay;
appointment.RecurrenceRule = value.RecurrenceRule;
appointment.RecurrenceID = value.RecurrenceID;
appointment.RecurrenceException = value.RecurrenceException;
appointment.Description = value.Description;
appointment.ProjectId = value.ProjectId;
appointment.CategoryId = value.CategoryId;
}
_context.SaveChanges();
}
if (param.action == "remove" || (param.action == "batch" && param.deleted.Count > 0)) // this block of code will execute when updating the appointment
{
if (param.action == "remove")
{
int key = Convert.ToInt32(param.key);
ScheduleEvent appointment = _context.ScheduleEvents.Where(c => c.Id == key).FirstOrDefault();
if (appointment != null) _context.ScheduleEvents.Remove(appointment);
}
else
{
foreach (var apps in param.deleted)
{
ScheduleEvent appointment = _context.ScheduleEvents.Where(c => c.Id == apps.Id).FirstOrDefault();
if (apps != null) _context.ScheduleEvents.Remove(appointment);
}
}
_context.SaveChanges();
}
return _context.ScheduleEvents.ToList();
}
Step 7: Compile and run the application.
To perform the basic CRUD actions, please visit the UG documentation.
You can download the same sample in GitHub.
Conclusion
I hope you enjoyed learning about how to perform the CRUD operations with editor template in the ASP.Net Core Scheduler.
You can refer to our ASP.NET Core Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!
