Demo custom appointment details

Peter Benedix

Asked On September 5, 2019 10:57 AM UTC

Hello,

I to customize the window where you can edit the appointment Details because we like to store much more data for a single appointment. I tried <template> but there is no effect. Could I get a small demo how to do this?

Thanks!

Reply | Reply with quote

Nevitha Ravi [Syncfusion]

Replied On September 5, 2019 12:50 PM UTC

Hi Peter,

Greetings from Syncfusion Support.

We have prepared a sample to customize the editor window using EditorTemplate which can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/forum/147292/ze/EditorTemplate1419262908

<ScheduleTemplates>

<EditorTemplate>

<tbody>

<tr>

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

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

</td>

</tr>

<tr>

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

<EjsDropDownList ID="EventType" DataSource="@StatusData" Placeholder="Choose status" CssClass="e-field" Value="@((context as TemplateArgs).EventType)" HtmlAttributes="@eventType">

<DropDownListFieldSettings Value="id"></DropDownListFieldSettings>

</EjsDropDownList>

</td>

</tr>

<tr>

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

</td>

</tr>

<tr>

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

</td>

</tr>

<tr>

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

<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" value="@((context as TemplateArgs).Description)"

style="width: 100%; height: 60px !important; resize: vertical"></textarea>

</td>

</tr>

</tbody>

</table>

</EditorTemplate>

</ScheduleTemplates>

Please try the sample and let us know if you need any further assistance.

Regards,

Nevitha

Reply | Reply with quote

Peter Benedix

Replied On September 5, 2019 01:11 PM UTC

Perfect. Thanks!

Reply | Reply with quote

Balaji Paramesvaran [Syncfusion]

Replied On September 6, 2019 07:13 AM UTC

Hi Peter,

We are happy that our solution fulfills your requirement

Regards,
Balaji

Reply | Reply with quote

Peter Benedix

Replied On September 6, 2019 01:20 PM UTC

I'm sorry but I have to reopen this case - in your example the binding for StartTime and EndTime is not working - there is no effect when changing it. Any idea?

Reply | Reply with quote

Peter Benedix

Replied On September 6, 2019 01:45 PM UTC

I added a video - there is almost strange behaviour when changing time. Did you tested the demo?

Attachment: SchedulerDemoFailed_f4be7bed.zip

Reply | Reply with quote

Peter Benedix

Replied On September 8, 2019 07:24 AM UTC

Please can you give me some feedback? Time is running...Thanks.

Reply | Reply with quote

Nevitha Ravi [Syncfusion]

Replied On September 9, 2019 01:03 PM UTC

Hi Peter,

Sorry for the inconvenience caused.

We could reproduce the reported issue “StartTime and EndTime is not updating properly” at our end and confirm this as a defect. Therefore we have logged the bug report which can be tracked from the following link.

https://www.syncfusion.com/feedback/8750/unable-to-update-start-and-end-time-fields-through-editor-window

The fix for the issue will be included in our bi-weekly patch release rolled out on end of September and we would appreciate your patience until then.

Regards,

Nevitha.

Reply | Reply with quote

NKOUAMBIA CHIMENE

Replied On September 13, 2019 02:55 PM UTC

Hello,

I just add and <ScheduleTemplates> it show well but I just want to know How can I handle scheduler CRUD Event with custom edit templates

when no Templates the default <ScheduleEvents TValue="AppointmentData" ActionCompleted="OnActionCompleted">ScheduleEvents> work fines

but with custom EditTemplates how can I achieve it

Thanks,

Chimène NK.

Reply | Reply with quote

Nevitha Ravi [Syncfusion]

Replied On September 16, 2019 02:37 PM UTC

Hi Nkouambia,

We can achieve “CRUD operation with custom edit template for appointment” by adding ’e-field’ class to each field defined within template, so as to allow the processing of those field values internally. We prepared the sample and download it from the below location. As well as, the ActionCompleted event trigger with corresponding event details.

https://www.syncfusion.com/downloads/support/forum/147292/ze/ScheduleSample-1070480671

Kindly check the above sample and confirm whether it comes close to your requirement.

Regards,

Nevitha

Reply | Reply with quote

NKOUAMBIA CHIMENE

Replied On September 16, 2019 04:21 PM UTC

Hello Thanks for answer,

Please can I have a link or an example of EditorTemplates with data validations in scheduler CRUD with Editor Templates?

Is there a possibilities to add <EditForm Model="@Model" OnValidSubmit="@SaveReservation()" OnInvalidSubmit="@HandleInvalidSubmit">

or <form @onsubmit="@SaveReservation()"> in <ScheduleTemplates><EditorTemplate></EditorTemplate></ScheduleTemplates> ??

----- MY CODE ----

@if (validateur != null) {

@foreach (var res in validateur.ValidationResults)

{

<li class="validation-message">@res.ErrorMessage</li>

}

</ul>

<div>

<label for="Description" class="control-label">Description</label>

</div>

</div>

<br/>

<label for="salles" class="control-label">Salle Examen</label>

</div>

</EjsDropDownList>

</div>

<br/>

<label for="ressources" class="control-label">Spécialité</label>

</div>

</EjsDropDownList>

</div>

<br/>

<label for="DateHeureDebut" class="control-label">Début</label>

</div>

</div>

</div> <br/>

</div>

</EditorTemplate>

</ScheduleTemplates>

</ScheduleField>

</ScheduleEventSettings>

</EjsSchedule>

@code{

    public List<AppointmentData> DataSource = new List<AppointmentData>();

    validateur = new ValidateurPage<ReservationSalle>(reservation);
     public class TemplateArgs
    {
        public string Subject { get; set; }
        public string EventType { get; set; }
        public DateTime? StartTime { get; set; }
        public DateTime? EndTime { get; set; }
        public string Description { get; set; }
        public int IdSalleExamenSys { get; set; }
        public int IdTypeConsultation { get; set; }       
    }   
public void OnActionCompleted(ActionEventArgs<AppointmentData> args)
    {
        if (args.RequestType == "eventCreated")
        {    reservation.IdTypeConsultation = args.AddedRecords[0].IdTypeConsultation;
               reservation.IdSalleExamenSys = args.AddedRecords[0].IdSalleExamenSys; 
                 ......
          SaveReservation();
        }
    public TemplateArgs Model = new TemplateArgs();
  
     public async Task SaveReservation(){
        validateur.Valider();
        
        if (validateur.ValidationResults.Count == 0) {
        viewParams = await _service.SaveReservationSalle(reservation, viewParams);
        Cancel();
        }
public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public bool IsReadonly { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
        public int Status { get; set; }
        public int Priority { get; set; }
        public int IdSalleExamenSys { get; set; }
        public int IdTypeConsultation { get; set; }
        public string EventType { get; set; }      
    }

}

this is my model

public partial class ReservationSalle
    {
        public int IdReservationSalle { get; set; }

        [Range(1, int.MaxValue, ErrorMessage = "Selectionner une salle")]
        [IsUniqueValidateAttribute]
        public int IdSalleExamenSys { get; set; }

        [Range(1, int.MaxValue, ErrorMessage = "Selectionner une Spécialité")]
        public int IdTypeConsultation { get; set; }
 ..................
}

Thanks,

Chimène NK.

Reply | Reply with quote

NKOUAMBIA CHIMENE

Replied On September 17, 2019 02:38 PM UTC

Hello!

Another questions with custom EditTemplates in scheduler.

When create new event it doesn't load the context IdSalleExamenSys However it load StartTime and EndTime correctly

.....................................

</EjsDropDownList>

.........................................

</EditorTemplate>

</ScheduleTemplates>

</EjsSchedule>

clicking on the cell in red

suppose to give me

as in defaut schedule editor but I get this

How can I correct it or I'm missing somethings??

I also let a question yesterday about EditorTemplate with form validation.

Thanks,

Chimène Nk.

Reply | Reply with quote

NKOUAMBIA CHIMENE

Replied On September 18, 2019 01:09 PM UTC

Hello Team!!

Please I still have no Answer for my question post from September 16, 2019 04:21 PM UTC. It's important for me to know how to manage the validation when implement from model as I detail it in my post. The property Validation in ScheduleField is not sufficient for me since I Have a lot of validation control in my model.

Thanks,

Chimène NK.

Reply | Reply with quote

Nevitha Ravi [Syncfusion]

Replied On September 18, 2019 06:35 PM UTC

Hi Nkouambia,

Sorry in getting back to you.

Q: Form validation in EditorTemplate

In Scheduler the content of EditorTemplate will append to the form, so we couldn’t use another form within editor template to validate the fields. You can use custom editor window by preventing default editor window and perform save action at sample end. Kindly share the details whether you need to validate the fields in the window itself or validate before updating them to database to proceed further on this.

Q: When create new event it doesn't load the context IdSalleExamenSys

We could reproduce the reported issue “Resource details are not received while opening editor template to create new events” and confirm this as a defect. So we have logged the bug report which can be tracked from the following link.

https://www.syncfusion.com/feedback/8943/not-able-to-get-resource-details-in-editor-template-during-cell-click

The issue fix will be included in our next patch release expected to be rolled out at the end of September and we would appreciate your patience until then.

Regards,

Nevitha

Reply | Reply with quote

NKOUAMBIA CHIMENE

Replied On September 18, 2019 07:54 PM UTC

Hello Nevitha!

I Have To valide before save in DB so if the model isnot valid it Has to show all the result of validation

1. I have a model with several validation (required, isunique, IsGreatherThan, IsOverlap, ... )

2. I have a controllers with the if (!ModelState.IsValid)

3. I have A services that call the controller

4. I Have my page that I want to load all validation result if Model is not valid So in my <EditorTemplate> Form I want that when User click on Save boutton, if (ValidationResults.count > 0) it prevent the windows to close and write all my message in my page (As the Validation proprety in ScheduleField do)

@if (validateur != null) {

@foreach (var res in validateur.ValidationResults)

{

<li class="validation-message">@res.ErrorMessage</li>

}

</ul>

5. The save action has to be completed when ValidationResults.count == 0

public async Task SaveReservation(){

validateur.Valider();

if (validateur.ValidationResults.Count == 0) {

await _service.SaveReservationSalle(reservation);

}else{

HERE i WANT TO PREVENT WINDOWS TO CLOSE IF POSSIBLE

}

//*****//

From now save/delete/Update are triggers well with my EditorTemplate in my scheduler, but when I clicked SAVE bouttons without enter all necessary fields, the ValidationResults.Count > 0 so the save action doesn't occurs but my editor windows close.

All these already exist and work well in a separate page with

<form @onsubmit="@(async () => await SaveReservation())">

@if (validateur != null) {

@foreach (var res in validateur.ValidationResults)

{

<li class="validation-message">@res.ErrorMessage</li>

}

</ul>

</form>

So my questions is How can I handle the same behavior with EditorTemplate in Scheduler

I want the behavior validations like on this https://ej2.syncfusion.com/showcase/angular/appointmentplanner/#/calendar

Thanks,

Chimène Nk.

Reply | Reply with quote

Nevitha Ravi [Syncfusion]

Replied On September 19, 2019 01:38 PM UTC

Hi Nkouambia,

Thanks for your update.

We have prepared a sample to validate the fields by having custom editor window for your reference which can be available from the following link.

https://www.syncfusion.com/downloads/support/forum/147292/ze/CustomEditorValidation1887081287

<EjsDialog @bind-Visible="@DlgVisible" IsModal="true" @ref="DialogObj" Height="270px" Width="500px" ShowCloseIcon="true">

<DialogTemplates>

<Header> <div>Editor Window </div> </Header>

<Content>

<EditForm Model="appointmentValidation" OnValidSubmit="@OnValidSubmit">

<DataAnnotationsValidator />

<ValidationSummary />

<tbody>

<tr>

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

<EjsTextBox @ref="SubjectObj" @bind-Value="@appointmentValidation.Subject"></EjsTextBox>

<ValidationMessage For="@(() => appointmentValidation.Subject)" />

</td>

</tr>

<tr>

<EjsDateTimePicker @ref="StartTimeObj" ID="Start" @bind-Value="@appointmentValidation.StartTime"></EjsDateTimePicker>

<ValidationMessage For="@(() => appointmentValidation.StartTime)" />

</td>

</tr>

<tr>

<EjsDateTimePicker @ref="EndTimeObj" ID="End" @bind-Value="@appointmentValidation.EndTime"></EjsDateTimePicker>

<ValidationMessage For="@(() => appointmentValidation.EndTime)" />

</td>

</tr>

<tr>

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

<EjsDropDownList @bind-Value="appointmentValidation.IdGrappeSys" ID="IdSalleExamenSys" DataSource="@salleExamen" Placeholder="Sélectionner la salle">

<DropDownListFieldSettings Value="id" Text="text"></DropDownListFieldSettings>

</EjsDropDownList>

<ValidationMessage For="@(() => appointmentValidation.IdGrappeSys)" />

</td>

</tr>

<tr>

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

<EjsDropDownList @bind-Value="appointmentValidation.IdSalleExamenSys" ID="IdTypeConsultation" Placeholder="Sélectionner la spécialité" DataSource="@typeConsList" AllowFiltering=true IgnoreAccent=true>

<DropDownListFieldSettings Value="id" Text="text"></DropDownListFieldSettings>

</EjsDropDownList>

<ValidationMessage For="@(() => appointmentValidation.IdSalleExamenSys)" />

</td>

</tr>

<tr>

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

<EjsTextBox @ref="DescriptionObj" @bind-Value="@appointmentValidation.Description"></EjsTextBox>

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

</td>

</tr>

</tbody>

</table>

</EditForm>

</Content>

</DialogTemplates>

</EjsDialog>

…..

void OnValidSubmit()

{

DlgVisible = false;

AppointmentData EventData = new AppointmentData();

EventData.Subject = appointmentValidation.Subject;

EventData.EndTime = (DateTime)appointmentValidation.EndTime;

EventData.StartTime = (DateTime)appointmentValidation.StartTime;

EventData.Description = appointmentValidation.Description;

EventData.IdGrappeSys = appointmentValidation.IdGrappeSys;

EventData.IdSalleExamenSys = appointmentValidation.IdSalleExamenSys;

EventData.Id = this.Id;

if (this.Action == "CellClick")

{

this.ScheduleObj.AddEvent(EventData); //to add new appointment

}

else

{

this.ScheduleObj.SaveEvent(EventData); // to save the existing appointment

}

validationStatus = "Success!";

}

Please try out the sample and let us know if you need any further assistance.

Regards,

Nevitha

Reply | Reply with quote

NKOUAMBIA CHIMENE

Replied On September 19, 2019 06:26 PM UTC

Hello,

I will try the last option you have propose and come back when finished, but before I change all my logic I have another question??

I there a way to prevent form to close even if I click on CANCEL(just and exemple)??

My validation work fine but when click on save it doesn't save in database(That is Ok since model is not valid) it load ValidationResult correctly it also show it in interface but it close the windows immediatly

So if I comme and reopend the any existing event I will see my Validation result as showing (since I haven't clearing it yet, it suppose to be clear when click cancel or when ;odel is valid)

I still want to maintains my logic like in my September 16, 2019 04:21 PM UTC post on this forum

<div>

-----------------

</div>

</EditorTemplate>

</ScheduleTemplates>

public void OnActionCompleted(ActionEventArgs<AppointmentData> args)

{

if (args.RequestType == "eventCreated")

{

/**********/

}

if (args.RequestType == "eventRemoved")

{

// will trigger when appointment deleted

}

if (args.RequestType == "eventChanged")

{

/* HOW CAN I PREVENT THE FORM TO CLOSE IF MODEL IS NOT VALID ??????????*//////////

// will trigger when appointment updated

}

// this.StateHasChanged();

}

Sorry if my english is not realy good,

Thanks,

Chimene NK.

Reply | Reply with quote

Nevitha Ravi [Syncfusion]

Replied On September 20, 2019 12:55 PM UTC

Hi Nkouambia,

Thanks for your update.

We have already planned to introduce an event before closing the editor window, using which you can prevent closing of editor window if the model is not valid. This can be tracked from the following link.

https://www.syncfusion.com/feedback/8990/provide-event-handler-before-closing-the-editor-popup-window

The event will be available in our next patch release expected to be rolled out at end of September. We would appreciate your patience until then.

Regards,

Nevitha

Reply | Reply with quote

Alagumeena Kalaiselvan [Syncfusion]

Replied On January 27, 2020 04:26 PM UTC

Hi Nkouambia,

Sorry for the delay to get back to you!

We have implemented your feature request “Provide event handler before closing the editor popup window” and included with patch release which is promised.

Refer to the below release notes.

https://ej2.syncfusion.com/blazor/documentation/release-notes/17.3.10/#schedule

We will happy to assist you if you need further assistance.

Regards

Alagumeena.K

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147292	Sep 5,2019 10:57 AM UTC	Jan 27,2020 04:26 PM UTC	Blazor	18

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US