Add delete icon to each appointment of the ASP.NET MVC Scheduler
This knowledge base explains the way to add the inline delete button for the appointments in ASP.NET MVC. With this, the user can remove an appointment without opening the quick popup and detailed window.
Inline delete option for an Appointment
Follow the below steps to add an icon to each appointment and handle the delete functionalities.
Step 1: Add the template for the ‘X’ icon as shown in the following code.
<script id="eventTemplate" type="text/x-template">
<div class='template-wrap' style='background:${SecondaryColor}'>
<div class='custom e-icons x-icon'></div>
<div class='subject'>${Subject}</div>
<div class='time'>Time: ${getTimeString(data.StartTime)} - ${getTimeString(data.EndTime)}</div>
</div>
</script>
Step 2: Add the styles for ‘X’ icon as like the following CSS.
.x-icon:before {
content: '\e7e9';
font-size: 25px;
color: white;
}
Refer to this link to know how to use the EJ2 icons: https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/icons/
Step 3: Map the “eventTemplate” to Template property of the EventSettings in the Index.cshtml file as like the following code.
.EventSettings(
new ScheduleEventSettings
{
DataSource = ViewBag.datasource,
Template = "#eventTemplate"
}
)
Step 4: Bind the EventRendered event to add the click event to ‘X’ button for all appointments as shown in the following code example.
function onEventRendered(args) {
// Bind the click event to 'x' in all appointments
args.element.querySelector(".custom").addEventListener("click", function (e) {
flag = true;
var obj = document.querySelector('.e-schedule').ej2_instances[0];
// Delete the event when clicking the 'X'
obj.deleteEvent(obj.getEventDetails(e.currentTarget.offsetParent));
});
Event Rendered : https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventRendered
Step 5: Add the Hover event to show the ‘X’ icon on appointment hovering as shown in the following code example.
function onHover(args) {
if (args.element.classList.contains("e-appointment")) {
ele = args.element.querySelector(".custom");
args.element.querySelector(".custom").style.display = "block";
} else if (!ej.base.isNullOrUndefined(document.querySelector(".custom"))) {
var ele = document.querySelectorAll(".custom");
ele.forEach(element => (element.style.display = "none"));
}
}
Step 6: Add the PopupOpen event to prevent the quick popup from opening on ‘X’ click as shown in the following code example.
function onPopupOpen(args) {
if (flag) {
// To prevent the default, click action on 'x' click.
args.cancel = flag;
flag = false;
}
}
Popup open event: https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen
Step 7: Run the sample. Now, the delete button will be added to the appointment as highlighted below.
Figure 1: Inline delete button for appointments
Refer to the GitHub example to download the complete working example of this KB.
