Skip to main content
All docs
V25.1
  • DxScheduler.ClosePopupAsync() Method

    Closes an appointment’s tooltip or edit form (compact or detailed).

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public Task ClosePopupAsync()

    Returns

    Type Description
    Task

    The task that is completed when an appointment’s tooltip or edit form is closed.

    Remarks

    Use the ClosePopupAsync method to close an appointment’s tooltip or edit form in code.

    The following code snippet customizes the header of the extended edit form (AppointmentFormHeaderTemplate). The header displays the following elements:

    • The appointment’s subject.
    • A custom Close button. The Click event handler uses ClosePopupAsync method to close an appointment’s edit form.
    <DxScheduler StartDate="@DateTime.Today"
                 DataStorage="@DataStorage"
                 @ref="Scheduler">
        <Views>
            <DxSchedulerWeekView ShowWorkTimeOnly="false"
                                 TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.Never"
                                 TimeScale="@(new TimeSpan(0,15,0))"
                                 WorkTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9), TimeSpan.FromHours(18)))"
                                 VisibleTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19)))">
            </DxSchedulerWeekView>
        </Views>
        <AppointmentFormHeaderTemplate>
            <div class="popup-text-header">@context.Subject</div>
            <DxButton Click="@(() => Scheduler.ClosePopupAsync())"
                      Text="Close"
                      IconCssClass="btn-icon-close"
                      RenderStyle="ButtonRenderStyle.None"
                      CssClass="custom-button">
            </DxButton>
        </AppointmentFormHeaderTemplate>
    </DxScheduler>
    
    @code {
        ISchedulerAppointmentActions Scheduler { get; set; }
    
        DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
            AppointmentsSource = AppointmentCollection.GetAppointments(),
            AppointmentMappings = new DxSchedulerAppointmentMappings() {
                Type = "AppointmentType",
                Start = "StartDate",
                End = "EndDate",
                Subject = "Caption",
                AllDay = "AllDay",
                Location = "Location",
                Description = "Description",
                LabelId = "Label",
                StatusId = "Status",
                RecurrenceInfo = "Recurrence"
            }
        };
    }
    
    <style>
        .popup-text-header {
            margin-right: auto;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    
        .custom-button {
            color: white
        }
    </style>
    

    Scheduler - Custom Close Button

    Implements

    See Also