ASPxCardViewPagerSettings.SettingsBreakpointsLayout Property

Provides access to the Card View’s Breakpoint layout mode settings.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v18.2.dll

Declaration

C#

public CardViewBreakpointsLayoutSettings SettingsBreakpointsLayout { get; }

VB.NET

Public ReadOnly Property SettingsBreakpointsLayout As CardViewBreakpointsLayoutSettings

Property Value

Type	Description
CardViewBreakpointsLayoutSettings	A CardViewBreakpointsLayoutSettings object containing the Card View’s Breakpoint layout mode settings.

Property Paths

You can access this nested property as listed below:

Library	Object Type	Path to SettingsBreakpointsLayout
ASP.NET Bootstrap Controls	BootstrapCardView	.SettingsPager.SettingsBreakpointsLayout
ASP.NET Web Forms Controls	ASPxCardView	.SettingsPager.SettingsBreakpointsLayout
	CardViewSettings	.SettingsPager.SettingsBreakpointsLayout
	CardViewSettings<CardType>	.SettingsPager.SettingsBreakpointsLayout
	MVCxCardView	.SettingsPager.SettingsBreakpointsLayout

Remarks

Use the SettingsBreakpointsLayout property to access the Card View settings related to the Breakpoints layout mode (the ASPxCardViewSettings.LayoutMode property is set to Layout.Breakpoints).

The following example illustrates how to implement three different layout scenarios for different browser sizes (Small, Medium, Large):

C#

CardView.Settings.LayoutMode = Layout.Breakpoints;
CardView.SettingsAdaptivity.BreakpointsLayoutSettings.CardsPerRow = 5;

CardView.SettingsAdaptivity.BreakpointsLayoutSettings.Breakpoints.AddRange(new List<CardViewBreakpoint>() {
    new CardViewBreakpoint() { DeviceSize = BreakpointsLayoutDeviceSizes.Small, CardsPerRow = 3 },
    new CardViewBreakpoint() { DeviceSize = BreakpointsLayoutDeviceSizes.Custom, MaxWidth = 1300, CardsPerRow = 4 },   
});

Concept

• Adaptivity

Online Demo

Card View - Adaptive Layout