Skip to main content

DxScheduler.ClosePopupAsync() Method

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.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