Skip to main content

DxSchedulerCustomFormLayoutItem Class

The layout item with custom content for the appointment edit form.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerCustomFormLayoutItem :
    SchedulerFormLayoutItemBase

Remarks

You can use the following properties to create a custom edit form for appointments:

Construct the form based on layout items in the same way as when you use the DxFormLayout component. The Scheduler ships with a set of predefined layout items that correspond to items of the default edit form.

If predefined items do not suit your requirements, you can use a custom layout item. Add the DxSchedulerCustomFormLayoutItem to the form layout and use the Template property to define item content.

For example, you can use a custom item to display an editor for a custom appointment property. To pass information about custom properties to the edit form, implement a descendant from the SchedulerAppointmentFormInfo class and assign it in the AppointmentFormShowing event handler.

For more information, refer to the following help topic: Custom Appointment Form.

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             ActiveViewType="SchedulerViewType.WorkWeek"
             AppointmentFormShowing="OnAppointmentFormShowing">
    @*...*@
    <AppointmentFormLayout Context="formInfo">
        @*...*@
        <DxSchedulerCustomFormLayoutItem ColSpanMd="12">
            <Template>
                <div style="margin-left: auto; margin-top: 14px;">
                    <DxCheckBox @bind-Checked="@(((CustomAppointmentFormInfo)formInfo).IsAccepted)" 
                                Alignment="CheckBoxContentAlignment.Right">Accept</DxCheckBox>
                </div>
            </Template>
        </DxSchedulerCustomFormLayoutItem>
    </AppointmentFormLayout>

</DxScheduler>

@code {
    public class CustomAppointmentFormInfo : SchedulerAppointmentFormInfo {
        public CustomAppointmentFormInfo(DxSchedulerAppointmentItem AppointmentItem, 
                DxSchedulerDataStorage DataStorage) : base(AppointmentItem, DataStorage) { }

        public bool IsAccepted {
            get { return (bool)CustomFields["IsAccepted"]; }
            set { CustomFields["IsAccepted"] = value; }
        }
    }

    void OnAppointmentFormShowing(SchedulerAppointmentFormEventArgs args) {
        args.FormInfo = new CustomAppointmentFormInfo(args.Appointment, DataStorage);
    }
    // ...
}

Run Demo: Scheduler - Custom Fields and Appointment Form

Watch Video: Scheduler - Customization

Inheritance

Object
ComponentBase
SchedulerFormLayoutItemBase
DxSchedulerCustomFormLayoutItem
See Also