Scheduler with EditorTemplate doesn't send ActionCompleted Event for adding or changing appointments

[Andreas Oelke]

I'm experiencing some problems with the scheduler and a custom editor.

Before I added the EditorTemplate the ActionCompleted Callback was called fine. Now after adding the template it isn't called anymore.

Is there some other way to find out when save was clicked for custom editors?

I've reduced my custom editor to include just a subject a start date and end date or is there some kind of mandatory attribute needed?

[Nevitha Ravi]

Hi Andreas, 

Greetings from Syncfusion Support. 

We suspect that you might missed to add ‘e-field’ class in the fields or field mapping is wrong.   

We have prepared a sample for your reference which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/149518/ze/EditorTemplate-1204089473  

Your provided fields subject, start time and end time is enough to create a normal appointment. Kindly ensure you have used ‘e-field’ class and fields are mapped properly. 

 

@using Syncfusion.EJ2.Blazor.Schedule 

@using Syncfusion.EJ2.Blazor.Calendars 

@using Syncfusion.EJ2.Blazor.Inputs 

 

<EjsSchedule TValue="AppointmentData" ModelType="@Model" Width="100%" Height="650px" SelectedDate="@(new DateTime(2019, 1, 31))"> 

    <ScheduleTemplates> 

        <EditorTemplate> 

            <table class="custom-event-editor" width="100%" cellpadding="5"> 

                <tbody> 

                    <tr> 

                        <td class="e-textlabel">Summary</td> 

                        <td colspan="4"> 

                            <EjsTextBox Id="Subject" CssClass="e-field e-input" Value="@((context as TemplateArgs).Subject)"></EjsTextBox> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">From</td> 

                        <td colspan="4"> 

                            <EjsDateTimePicker ID="StartTime" HtmlAttributes="@StartName" CssClass="e-field" Value="@((context as TemplateArgs).StartTime)"></EjsDateTimePicker> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">To</td> 

                        <td colspan="4"> 

                            <EjsDateTimePicker ID="EndTime" HtmlAttributes="@EndName" CssClass="e-field" Value="@((context as TemplateArgs).EndTime)"></EjsDateTimePicker> 

                        </td> 

                    </tr> 

                </tbody> 

            </table> 

        </EditorTemplate> 

    </ScheduleTemplates> 

    <ScheduleEvents TValue="AppointmentData" ActionCompleted="OnActionCompleted"></ScheduleEvents> 

    <ScheduleEventSettings TValue="AppointmentData" DataSource="@DataSource"> 

    </ScheduleEventSettings> 

</EjsSchedule> 

 

@code { 

    List<AppointmentData> DataSource = new List<AppointmentData> 

    { 

        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2019, 1, 31, 9, 30, 0), EndTime = new DateTime(2019, 1, 31, 11, 0, 0) }, 

    }; 

 

    Dictionary<string, object> StartName = new Dictionary<string, object>() 

    { 

        {"data-name","StartTime"}, 

    }; 

    Dictionary<string, object> EndName = new Dictionary<string, object>() 

    { 

        {"data-name","EndTime"}, 

    }; 

    public void OnActionCompleted(ActionEventArgs<AppointmentData> args) 

    { 

        if (args.RequestType == "eventCreated" && args.AddedRecords != null) 

        { 

            // will trigger when we create new appointments 

        } 

        if (args.RequestType == "eventChanged" && args.ChangedRecords != null) 

        { 

            //will trigger when we edit the existing appointments 

        } 

    } 

    public TemplateArgs Model = new TemplateArgs(); 

 

    public class TemplateArgs 

    { 

        public string Subject { get; set; } 

        public DateTime? StartTime { get; set; } 

        public DateTime? EndTime { get; set; } 

    } 

    public class AppointmentData 

    { 

        public int Id { get; set; } 

        public string Subject { get; set; } 

        public DateTime StartTime { get; set; } 

        public DateTime EndTime { get; set; } 

    } 

} 

Please try the sample if the issue persist still share the following details to check and provide prompt solution at earliest. 

• Nuget and script versions used in your project.
• Whether the appointments are edited and created but ActionCompleted event alone not triggering
• Code snippet you have tried.
• Issue reproducing sample if possible

Regards, 

Nevitha. 

[Andreas Oelke]

Thanks for your reply.

I've used your sample and added a few things we need to have and now the custom editor comes up and no matter if I press save or cancel the dialog doesn't close and the ActionCompleted isn't triggered.

The quick edit popup does work though.

I have attached my razor file.

Attachment: Index_8d5d8f71.zip

[Nevitha Ravi]

Hi Andreas, 

Thanks for shared code block. 

We have checked the shared code and please find the cause for the reported problems. 

• ‘e-field’ class is defined for radio button. we don’t have ‘e-field’ support for radio button control.
• Field mapping is not configured within editor template.

You can overcome the issues with the following solutions. 

• Assign the value of radio button to corresponding field within OnPopupClose event of Scheduler.

 

    <tr> 

        <td class="e-textlabel">Art</td> 

        <td colspan="4"> 

           <EjsRadioButton @ref="RadioRef1" Label="@BestellferienFarbe.typ" Name="farbe" Value="@BestellferienFarbe.typ" Checked="@((context as LieferantenTermin).FarbId==FarbEnumerator.BESTELLFERIEN)"></EjsRadioButton> 

           <EjsRadioButton @ref="RadioRef2" Label="@LieferantenferienFarbe.typ" Name="farbe" Value="@LieferantenferienFarbe.typ" Checked="@((context as LieferantenTermin).FarbId==FarbEnumerator.LIEFERANTENFERIEN)"></EjsRadioButton> 

        </td> 

   </tr> 

….. 

    EjsRadioButton RadioRef1; 

    EjsRadioButton RadioRef2; 

    public void PopupClose(PopupCloseEventArgs<LieferantenTermin> args) 

    { 

        if (args.Data != null) 

        { 

            args.Data.Anmerkung = RadioRef1.Checked ? RadioRef1.Value : RadioRef2.Value ; 

        } 

    } 

 

• Should map the field name either in Name attribute or to the ID. (If Name attribute is not provided, the ID attribute will be considered as Name.)

 

  <ScheduleTemplates> 

        <EditorTemplate> 

            <table class="custom-event-editor" width="100%" cellpadding="5"> 

                <tbody> 

                    <tr> 

                        <td class="e-textlabel">Beschreibung</td> 

                        <td colspan="4"> 

                            <EjsTextBox HtmlAttributes="@Subject" CssClass="e-field e-input" Value="@((context as LieferantenTermin).Bezeichnung)"></EjsTextBox> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">Art</td> 

                        <td colspan="4"> 

                            <EjsRadioButton @ref="RadioRef1" Label="@BestellferienFarbe.typ" Name="farbe" Value="@BestellferienFarbe.typ" Checked="@((context as LieferantenTermin).FarbId==FarbEnumerator.BESTELLFERIEN)"></EjsRadioButton> 

                            <EjsRadioButton @ref="RadioRef2" Label="@LieferantenferienFarbe.typ" Name="farbe" Value="@LieferantenferienFarbe.typ" Checked="@((context as LieferantenTermin).FarbId==FarbEnumerator.LIEFERANTENFERIEN)"></EjsRadioButton> 

                        </td> 

                    </tr> 

 

                    <tr> 

                        <td class="e-textlabel">Anfang</td> 

                        <td colspan="4"> 

                            <EjsDatePicker HtmlAttributes="@StartName" CssClass="e-field" Value="@((context as LieferantenTermin).Startzeit)"></EjsDatePicker> 

                        </td> 

                    </tr> 

                    <tr> 

                        <td class="e-textlabel">Ende</td> 

                        <td colspan="4"> 

                            <EjsDatePicker HtmlAttributes="@EndName" CssClass="e-field" Value="@((context as LieferantenTermin).Endzeit)"></EjsDatePicker> 

                        </td> 

                    </tr> 

                </tbody> 

            </table> 

        </EditorTemplate> 

    </ScheduleTemplates> 

 

… 

        Dictionary<string, object> Subject = new Dictionary<string, object>() 

{ 

         {"Name","Bezeichnung"}, 

        {"data-name","Bezeichnung"} 

    }; 

    Dictionary<string, object> StartName = new Dictionary<string, object>() 

{ 

         {"Name","Startzeit"}, 

        {"data-name","Startzeit"} 

    }; 

    Dictionary<string, object> EndName = new Dictionary<string, object>() 

{ 

        {"Name","Endzeit"}, 

        {"data-name","Endzeit"} 

    }; 

Kindly refer to the sample from the following link and get back to us whether the solution meets your requirement. 

https://www.syncfusion.com/downloads/support/forum/149518/ze/CustomEditor-150098005  

Regards, 

Nevitha. 

[Andreas Oelke]

Thanks for your example.

It works better now.

But it still seems a bit unstable if you double click some appointment, close it and double click again. Once in a while it looses the selected RadioButton values or even the date values are wrong.

I've changed your example a tiny bit for the Radio Values to go into the right attribute and dropped the subject.

Attachment: CustomEditor_e2043b8c.zip

[Nevitha Ravi]

Hi Andreas, 

  

We are happy that our previous solution helped  you. 

  

The reported issue “Field value is wrong when clicking on the same appointment/cell” is a known issue, we have already logged the bug report and the fix will be included in our Volume 4 , 2019 main release which is expected to be rolled out on 3^rd week of December 2019. You can keep track of the issue from the following link. 

https://www.syncfusion.com/feedback/9720/field-value-disappeared-when-click-on-the-same-appointment 

  

We would appreciate your patience until then. 

  

Regards, 

Nevitha. 

[Nevitha Ravi]

Hi Andreas, 

 

The issue with  “field value disappeared on clicking the same appointment twice in editor template” has been fixed in our Volume 4, 2019 main release (v17.4.39). Please upgrade to our latest version to avail the fix. 

https://ej2.syncfusion.com/blazor/documentation/release-notes/index/#scheduler 

 

Please keep in touch with us if you need any assistance, we will always happy in assisting you. 

 

Regards, 

Nevitha