Validation in ScheduleTemplates

[Bartek “Egzennn” Wlodarczyk]

Hi,

I have a problem with validation on a custom QuickInfo editor.

I cant launch validation check when press Submit, OnAdd is always launching without checking.

If i comment that EditorFooterTemplate, validation works fine, and after that event is added local by some function and i need to use my OnAdd function to save it to database.

                            <ScheduleTemplates>

                                <EditorHeaderTemplate>

                                        @if ((context as AppointmentData).Id == null)

                                        {

                                            <div>Dodaj grafik pracy</div>

                                        }

                                        else

                                        {

                                            <div>Edytuj grafik pracy</div>

                                        }

                                    </EditorHeaderTemplate>

                                <EditorTemplate>

                                        @{

                                            var Data = (context as AppointmentData);

                                        }

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

                                            <tbody>

                                                <tr>

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

                                                    <td colspan="4">

                                                        <SfDatePicker @bind-Value="Data.StartTime" Readonly="true"></SfDatePicker>

                                                    </td>

                                                </tr>

                                                <tr>

                                                    <td class="e-textlabel">Czas trwania</td>

                                                    <td>

                                                        <SfTimePicker @bind-Value="Data.StartTime"></SfTimePicker>

                                                    </td>

                                                    <td>

                                                        <span class="e-icons e-arrow-right arrow-icon"></span>

                                                    </td>

                                                    <td>

                                                        <SfTimePicker @bind-Value="Data.EndTime"></SfTimePicker>

                                                    </td>

                                                </tr>

                                                <tr>

                                                    <td class="e-textlabel">Stanowisko pracy</td>

                                                    <td colspan="4">

                                                        <SfDropDownList ID="EventType" DataSource="@LocalizationData" Placeholder="Wybierz stanowisko pracy" @bind-Value="@((context as AppointmentData).LocationId)">

                                                            <DropDownListFieldSettings Value="Lok_LokId" Text="Wartosc"></DropDownListFieldSettings>

                                                        </SfDropDownList>

                                                    </td>

                                                </tr>

                                                <tr>

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

                                                    <td colspan="4">

                                                        <SfTextBox Multiline="true" @bind-Value="@(Data.Description)"></SfTextBox>

                                                        <ValidationMessage For="()=>(Data.Description)" />

                                                    </td>

                                                </tr>

                                                <tr>

                                                    <td class="e-textlabel">Powtarzalność</td>

                                                    <td colspan="4">

                                                        <SfRecurrenceEditor @bind-Value="@(Data.RecurrenceRule)"></SfRecurrenceEditor>

                                                    </td>

                                                </tr>

                                            </tbody>

                                        </table>

                                    </EditorTemplate>

                                <EditorFooterTemplate>

                                        <div class="event-footer">

                                            <SfButton IsPrimary="true" OnClick="@(() => FooterButtonClick(false))">Cancel</SfButton>

                                            <SfButton IsPrimary="true" Content="Submit" OnClick="@(() => OnAdd(context as AppointmentData))"></SfButton>

                                        </div>

                                    </EditorFooterTemplate>

                            </ScheduleTemplates>

    private async Task OnAdd(AppointmentData data)

    {

        GrafikForm eventData = new GrafikForm

        {

            Id = data.Id ?? Guid.Empty,

            StartTime = data.StartTime,

            EndTime = data.EndTime,

            LocationId = data.LocationId,

            Description = data.Description,

            IsAllDay = data.IsAllDay,

            PRI_PraId = data.PRI_PraId,

            DZL_DzlId = data.DZL_DzlId,

            RecurrenceException = data.RecurrenceException,

            RecurrenceID = data.RecurrenceID,

            RecurrenceRule = data.RecurrenceRule,

            CreatedBy = "BWL",

            Created = DateTime.Now,

            Stan = "Aktywny",

            Status = "Akceptacja"

        };

        if (data.Id == null)

        {

            var success = await GrafikService.AddEvent(eventData);

            if (success)

            {

                Console.WriteLine("Zdarzenie dodane pomyślnie.");

            }

            else

            {

                Console.WriteLine("Nie udało się dodać nowego zdarzenia do bazy danych.");

            }

        }

        else

        {

            var success = await GrafikService.UpdateEvent(eventData);

            if (success != null)

            {

                Console.WriteLine("Zdarzenie zaktualizowane pomyślnie.");

            }

            else

            {

                Console.WriteLine("Nie udało się zaktualizować zdarzenia w bazie danych.");

            }

        }

        Events = await GrafikService.GetAllEvents();

        DataSource = new AppointmentData().GetEvents(Events, Osoby);

        ScheduleRef.CloseEditor();

        StateHasChanged();

    }

[Ram Raju Elaiyaperumal]

Hi Customer,

Based on your shared details, it appears that you are attempting to persist data from event fields using the onAdd method. Instead of utilizing the EditorFooterTemplate, consider leveraging the default save button. You can then employ the ActionComplete method, which is triggered upon event save. Within the ActionComplete arguments, you'll have access to the event field data. If necessary, you can also prevent the default save functionality by setting args.Cancel to true.

For your convenience, we've prepared a sample that aligns with your requirements. Please refer to the code snippet below for further guidance.

[Index.razor]

@page "/"

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.Calendars

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Inputs

@using System.ComponentModel.DataAnnotations

 

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @ref="ScheduleRef">

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

    <ScheduleTemplates>

        <EditorTemplate>

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

                <tbody>

                    <tr>

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

                        <td colspan="4">

                            <SfTextBox @bind-Value="@((context as AppointmentData).Subject)"></SfTextBox>

                        </td>

                    </tr>

                    <tr>

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

                        <td colspan="4">

                            <SfDropDownList ID="EventType" DataSource="@StatusData" Placeholder="Choose status" @bind-Value="@((context as AppointmentData).EventType)">

                                <DropDownListFieldSettings Value="Id"></DropDownListFieldSettings>

                            </SfDropDownList>

                            <ValidationMessage For="()=>((context as AppointmentData).EventType)" />

                        </td>

                    </tr>

                    <tr>

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

                        <td colspan="4">

                            <SfDateTimePicker @bind-Value="@((context as AppointmentData).StartTime)"></SfDateTimePicker>

                        </td>

                    </tr>

                    <tr>

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

                        <td colspan="4">

                            <SfDateTimePicker @bind-Value="@((context as AppointmentData).EndTime)"></SfDateTimePicker>

                        </td>

                    </tr>

                    <tr>

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

                        <td colspan="4">

                            <SfTextBox Multiline="true" @bind-Value="@((context as AppointmentData).Description)"></SfTextBox>

                        </td>

                    </tr>

                    <tr>

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

                        <td colspan="4">

                            <SfRecurrenceEditor @bind-Value="@((context as AppointmentData).RecurrenceRule)"></SfRecurrenceEditor>

                        </td>

                    </tr>

                </tbody>

            </table>

        </EditorTemplate>

 

    </ScheduleTemplates>

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

    <ScheduleViews>

        <ScheduleView Option="View.Day"></ScheduleView>

        <ScheduleView Option="View.Week"></ScheduleView>

        <ScheduleView Option="View.WorkWeek"></ScheduleView>

        <ScheduleView Option="View.Month"></ScheduleView>

        <ScheduleView Option="View.Agenda"></ScheduleView>

    </ScheduleViews>

</SfSchedule>

 

@code {

    private DateTime CurrentDate = new DateTime(2024, 1, 10);

    public SfSchedule<AppointmentData> ScheduleRef;

   

    public void OnActionComplete(ActionEventArgs<AppointmentData> args)

    {

        args.Cancel = true;

        if (args.AddedRecords != null)

        {

            if (args.AddedRecords.Count > 0)

            {

                Data.Add(args.AddedRecords[0]);

            }

        }

        ScheduleRef.CloseEditor();

        StateHasChanged();

    }

 

    public class DDFields

    {

        public string Id { get; set; }

        public string Text { get; set; }

    }

    List<DDFields> StatusData = new List<DDFields>() {

        new DDFields(){ Id= "New", Text= "New" },

        new DDFields(){ Id= "Requested", Text= "Requested" },

        new DDFields(){ Id= "Confirmed", Text= "Confirmed" },

    };

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

    {

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

    };

    List<AppointmentData> DataSource = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2024, 1, 10, 9, 30, 0) , EndTime = new DateTime(2023, 1, 31, 11, 0, 0), EventType = "Confirmed" }

    };

 

    List <AppointmentData> Data = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2024, 1, 10, 9, 30, 0) , EndTime = new DateTime(2023, 1, 31, 11, 0, 0), EventType = "Confirmed" }

    };

 

    public class AppointmentData

    {

        [Required]

        public string EventType { get; set; }

        public int Id { get; set; }

        public string Subject { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

        public bool IsAllDay { get; set; }

        public string RecurrenceRule { get; set; }

        public Nullable<int> RecurrenceID { get; set; }

        public string RecurrenceException { get; set; }

        public string Description { get; set; }

    }

}

Regards,

Ram

[Bartek “Egzennn” Wlodarczyk]

Sorry but it work in 50%, next problem that occured its that StartTime and EndTime dont pass value to args i dont know why.

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

                            <ScheduleTemplates>

                                <EditorHeaderTemplate>

                                        @if ((context as AppointmentData).Id == null)

                                        {

                                            <div>Dodaj grafik pracy</div>

                                        }

                                        else

                                        {

                                            <div>Edytuj grafik pracy</div>

                                        }

                                    </EditorHeaderTemplate>

                                <EditorTemplate>

                                        @{

                                            var Data = (context as AppointmentData);

                                        }

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

                                            <tbody>

                                                <tr>

                                                    <td class="e-textlabel">Czas trwania</td>

                                                    <td>

                                                        <SfDateTimePicker @bind-Value="Data.StartTime"></SfDateTimePicker>

                                                    </td>

                                                    <td>

                                                        <span class="e-icons e-arrow-right arrow-icon"></span>

                                                    </td>

                                                    <td>

                                                        <SfDateTimePicker @bind-Value="Data.EndTime"></SfDateTimePicker>

                                                    </td>

                                                </tr>

                                                <tr>

                                                    <td class="e-textlabel">Stanowisko pracy</td>

                                                    <td colspan="4">

                                                        <SfDropDownList ID="LocationId" DataSource="@LocalizationData" Placeholder="Wybierz stanowisko pracy" @bind-Value="@((context as AppointmentData).LocationId)">

                                                            <DropDownListFieldSettings Value="Lok_LokId" Text="Wartosc"></DropDownListFieldSettings>

                                                        </SfDropDownList>

                                                        <ValidationMessage For="()=>(Data.LocationId)"/>

                                                    </td>

                                                </tr>

                                                <tr>

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

                                                    <td colspan="4">

                                                        <SfTextBox Multiline="true" @bind-Value="@(Data.Description)"></SfTextBox>

@* <ValidationMessage For="()=>(Data.Description)" />

 *@ </td>

                                                </tr>

                                                <tr>

                                                    <td class="e-textlabel">Powtarzalność</td>

                                                    <td colspan="4">

                                                        <SfRecurrenceEditor @bind-Value="@(Data.RecurrenceRule)"></SfRecurrenceEditor>

                                                    </td>

                                                </tr>

                                            </tbody>

                                        </table>

                                    </EditorTemplate>

                            </ScheduleTemplates>

    private void OnActionCompleted(Syncfusion.Blazor.Schedule.ActionEventArgs<AppointmentData> args)

    {

        // Extract data from AddedRecords or ChangedRecords

        var recordData = args.AddedRecords?.Any() == true

            ? args.AddedRecords[0]

            : args.ChangedRecords?.Any() == true

                ? args.ChangedRecords[0]

                : null;

}

    public class AppointmentData

    {

        public Guid? Id { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

        [Required]

        public int? LocationId { get; set; }

        public string? Description { get; set; }

        public bool IsAllDay { get; set; }

        public bool IsReadonly { get; set; }

        public int PRI_PraId { get; set; }

        public int DZL_DzlId { get; set; } // Dodany GroupId

        public int? RecurrenceID { get; set; }

        public string RecurrenceRule { get; set; }

        public string RecurrenceException { get; set; }

}

[Ram Raju Elaiyaperumal]

Hi Bartek,

Based on the code snippet you've shared, we attempted to reproduce the issue you're facing. However, we were able to successfully retrieve the Start Time and End Time values from the arguments.

For your reference, we've created a video demo and a sample that demonstrates this functionality. Please find the attachments and review the sample

If the issue persists, we kindly request you to replicate the issue using the provided sample. This will enable us to understand your scenario better and provide a more accurate solution. Your cooperation is greatly appreciated.

Regards,

Ram

Attachment: ScheduleEditor_7f0afe15.zip