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
Clickevent handler usesClosePopupAsyncmethod 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>

Implements
See Also