No auto focus and save on enter in custom QuickInfoPopUp

[Unknown]

Hey!

I have registered an issue in the SfSchedule component:

If i don't use customization and the QuickInfoPopUp opens, than the input field is focused and when I press enter I save the appointment - and if i click on "More Details" the full editor gets displayed and the first text box is focused and when I press enter it saves the appointment too. Which is great!

Now I want to customize the Scheduler with SchedulerTemplates->EditorTemplate and ScheduleQuickInfoTemplates->ContentTemplate. When the QuickInfoPopUp spawns, the first textbox is not focused and i can't save by pressing enter - but if i press "More Details" it does what it should. So EditorTemplate can handle auto focus and save on enter and the ContentTemplate not. Is there a way for you to fix this?

Here I have a quiet simple example:

<SfSchedule TValue="AppointmentData" Width="100%"
            CurrentView="View.Month" Height="650px" AllowDragAndDrop="true" FirstDayOfWeek="1"
            ShowWeekNumber="true" QuickInfoOnSelectionEnd="true">
    <ScheduleTemplates>
        <EditorTemplate>
            
        EditorTemplate>
    ScheduleTemplates>
    <ScheduleQuickInfoTemplates>
        <ContentTemplate>
            
        ContentTemplate>
    ScheduleQuickInfoTemplates>
SfSchedule>

And the according sample project is attached.

Best Regards!

Attachment: ServerApp_731de78c.zip

[Vinitha Devi Murugan]

Hi Patrick, 

 

Greetings from Syncfusion Support. 

 

We focused the subject field in QuickInfoTemplate using below code. You can refer the sample from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/170994/ze/QuickinfoTemplateWithAutoFocus25663873  

 

private async Task SetFocus() 

    { 

        if (isQuickInfoCreated) 

        { 

            await Task.Delay(20); 

            await SubjectRef.FocusAsync(); 

        } 

    } 

    private async Task OnQuickInfoSubjectCreated() 

    { 

        await SubjectRef.FocusAsync(); 

        isQuickInfoCreated = true; 

    } 

 

<ContentTemplate> 

    @if ((context as AppointmentData).ElementType == "cell") 

    { 

       <div class="e-cell-content"> 

        ....                                

      </div> 

    @if (isQuickInfoCreated) 

    { 

        Task.Run(async () => await SetFocus()); 

    } 

} 

... 

 

 

Regards, 

Vinitha 

 

[Unknown]

Thanks for the response. I was able to resolve the auto focus problem with your help. But there is still the save on enter-press part missing. How does it work in the  EditorTemplate ? Sure i can implement a own keylistener and stuff but it is working in the EditorTemplate but not in the ContentTemplate. Do i have to wrap anything in a form or stuff?

If the Editor is open i just have to press enter no matter what is focused and it saves the appointment. In the ContentTemplate it does nothing.

Thanks for you investigations so far! 

[Vinitha Devi Murugan]

Hi Patrick, 

 

Thanks for your update. 

 

In EditorTemplate we internally handled the save action on key press. For QuickinfoTemplate we have option to customize the footer part, so we need to manually handle this case on sample end. We have saved event on enter key in QuickInfoTemplate using OnPopupOpen and onkeypress events. Please refer to the following sample and code example.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/170994/ze/QuickinfoTemplateWithSaveEventOnKeyPress452617086  

 

<ScheduleEvents TValue="AppointmentData" OnPopupOpen="OnPopupOpen"></ScheduleEvents> 

<ScheduleQuickInfoTemplates> 

   .... 

    <ContentTemplate> 

        @if ((context as AppointmentData).ElementType == "cell") 

        { 

            <div class="e-cell-content"> 

                <div class="content-area"> 

                    <SfTextBox @ref="SubjectRef" @onkeypress="e => OnkeyPress(e)" CssClass="e-subject" @bind-Value="@((context as AppointmentData).Subject)" Created="OnQuickInfoSubjectCreated" Placeholder="Meeting Title"></SfTextBox> 

                </div> 

          .... 

 

    </ContentTemplate> 

 

AppointmentData quikInfoData; 

public void OnPopupOpen(PopupOpenEventArgs<AppointmentData> args) 

{ 

    if (args.Type == PopupType.QuickInfo) 

    { 

        quikInfoData = args.Data; 

    } 

} 

async Task OnkeyPress(KeyboardEventArgs args) 

{ 

    if (args.Key == "Enter") 

    { 

        await ScheduleRef.CloseQuickInfoPopup(); 

 

        quikInfoData.Id = await ScheduleRef.GetMaxEventId<int>(); 

        quikInfoData.Subject = quikInfoData.Subject == "" ? "New event" : SubjectRef.Value; 

        await ScheduleRef.AddEvent(quikInfoData); 

         

    } 

} 

 

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

 

Regards,  

Vinitha