DxSchedulerAllDayFormLayoutItem.ColSpanMd Property

Specifies the number of columns an item occupies in medium viewports (768px or wider).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(3)]
[Parameter]
public override int ColSpanMd { get; set; }

Property Value

Type	Default	Description
Int32	3	The number of columns from 1 to 12.

Remarks

The Form Layout uses a responsive grid system based on the CSS flexible box layout to render items. Each layout item can occupy 1-12 columns. The following properties specify the item width for six different viewport sizes:

Viewport Size	Extra Small	Small	Medium	Large	Extra Large	Extra Extra Large
Width in Pixels	Any	≥576	≥768	≥992	≥1200	≥1400
Property	ColSpanXs	ColSpanSm	ColSpanMd	ColSpanLg	ColSpanXl	ColSpanXxl

Note the following specifics:

• If you specify item widths starting with a certain size, the item occupies 12 columns in smaller viewports.
• If you specify multiple ColSpan* properties, the property for the largest applicable viewport size takes precedence. If it is not set, the property for the next smaller size applies. This process continues until the component finds a defined property.
• If you do not specify any ColSpan* property, the component applies the default values for the ColSpanMd property: 6 for an item and 12 for a group or tab page container.

In the following example, the All Day switch occupies 6 columns in medium viewports:

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <Views>
        <DxSchedulerWorkWeekView VisibleTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), 
                                 TimeSpan.FromHours(19)))" />
    </Views>
    <AppointmentFormLayout>
        <DxSchedulerSubjectFormLayoutItem ColSpanMd="12" />
        <DxSchedulerStartDateFormLayoutItem ColSpanMd="6" />
        <DxSchedulerAllDayFormLayoutItem ColSpanMd="6" />
        <DxSchedulerEndDateFormLayoutItem ColSpanMd="12" />
    </AppointmentFormLayout>
</DxScheduler>

@code {
    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"
        }
    };
}