ASPxCardViewAdaptivitySettings.BreakpointsLayoutSettings Property

Gets the settings related to the Breakpoints layout mode.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v18.2.dll

Declaration

C#

public ASPxCardViewBreakpointsLayoutSettings BreakpointsLayoutSettings { get; }

VB.NET

Public ReadOnly Property BreakpointsLayoutSettings As ASPxCardViewBreakpointsLayoutSettings

Property Value

Type	Description
ASPxCardViewBreakpointsLayoutSettings	An ASPxCardViewBreakpointsLayoutSettings object that contains the settings.

Property Paths

You can access this nested property as listed below:

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

Remarks

Use the BreakpointsLayoutSettings property to define how many cards the Card View displays in a row if there are no specified breakpoints for a given browser’s width.

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