DropDownList in Change Event in Scheduler to update Text

[Kevin V]

Hello,

From the " Example of Editor Template in ASP.NET MVC Scheduler Control" example. I am trying to update the #EndTime Datepicker, dynamically, based on the value from the drop down using the onChange event. I'm just trying get the value to update at this point.

However, since the dropdown and the datepicker is created during the function, I can't access it easily.

How do I do this?

FromEditorTemplate.cshtml:

​ @using Syncfusion.EJ2 @using Syncfusion.EJ2.Schedule @section ControlsSection{ <div class="control-section"> <div class="content-wrapper"> @Html.EJS().Schedule("schedule").Width("100%").Height("650px").Views(ViewBag.view).ActionBegin("onActionBegin").EventRendered("onEventRendered").PopupOpen("onPopupOpen").EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).EditorTemplate("#EventEditorTemplate").ShowQuickInfo(false).SelectedDate(new DateTime(DateTime.Today.Year, 2, 15)).Render() div> div> <style> .custom-event-editor .e-textlabel { padding-right: 15px; text-align: right; } .custom-event-editor td { padding: 7px; padding-right: 16px; } style> <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="EventType" name="EventType" 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> <tr> <td class="e-textlabel">Reason</td> <td colspan="4"> <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea> </td> </tr> </tbody> </table> </script>

<script type="text/javascript">

function onChange(args) {

console.log(`onchange event: ${args}`);

// how do I update the EndTime Datepicker from the popup?

var endElement = args.element.querySelector('#EndTime'); // this gives an error or returns null. I want to update the Datepicker not the tag so it shows up in the Popup } function onPopupOpen(args) { if (args.type === 'Editor') { var statusElement = args.element.querySelector('#EventType'); if (!statusElement.classList.contains('e-dropdownlist')) { var dropDownListObject = new ej.dropdowns.DropDownList({ placeholder: 'Choose status', value: statusElement.value, dataSource: ['New', 'Requested', 'Confirmed'],

change: onChange,

}); dropDownListObject.appendTo(statusElement); statusElement.setAttribute('name', 'EventType'); } 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 onEventRendered(args) { var categoryColor; switch (args.data.EventType) { case 'Requested': categoryColor = '#F57F17'; break; case 'Confirmed': categoryColor = '#7fa900'; break; case 'New': categoryColor = '#8e24aa'; break; } if (!args.element || !categoryColor) { return; } var scheduleObj = document.getElementById('schedule').ej2_instances[0]; if (scheduleObj.currentView === 'Agenda') { (args.element.firstChild).style.borderLeftColor = categoryColor; } else { args.element.style.backgroundColor = categoryColor; } } function onActionBegin(args) { var scheduleObj = document.getElementById('schedule').ej2_instances[0]; if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') { var data; if (args.requestType === 'eventCreate') { data = args.data[0]; } else if (args.requestType === 'eventChange') { data = args.data; } if (!scheduleObj.isSlotAvailable(data.StartTime, data.EndTime)) { args.cancel = true; } } } script> }

FROM EditorTemplatecontroller.cs​: using EJ2MVCSampleBrowser.Models; using Syncfusion.EJ2.Schedule; using System.Collections.Generic; using System.Web.Mvc; namespace EJ2MVCSampleBrowser.Controllers.Schedule { public partial class ScheduleController : Controller { public ActionResult EditorTemplate() { ViewBag.datasource = new ScheduleData().GetDoctorsEventData(); List viewOption = new List() { new ScheduleView {Option = Syncfusion.EJ2.Schedule.View.Day }, new ScheduleView {Option = Syncfusion.EJ2.Schedule.View.Week }, new ScheduleView {Option = Syncfusion.EJ2.Schedule.View.WorkWeek }, new ScheduleView {Option = Syncfusion.EJ2.Schedule.View.Month } }; ViewBag.view = viewOption; return View(); } } }

[Kevin V]

I was able to figure it out. I just had to create an arrow function that points to another function, passing in the required objects, to update the endElement value.

var dropDownListObject = new ej.dropdowns.DropDownList({

                    id: "DropDown",

                    placeholder: "Schedule a part:",

                    dataSource: ['Aileron', 'Wing Skin', 'Hinge Flap', 'Rib Bracket', 'Winglet'],

                    value: args.data.Subject,

                    change: () => {endElement.value = updateDate(endElement, processElement);}

})

This issue can be closed.

[Sabitha Rajamani]

Hi Kevin, 

 

Thanks for the update. Please get back to us if you need any other assistance. 

 

Regards, 

Sabitha