CardViewPagerState.SettingsBreakpointsLayout Property

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

Namespace : DevExpress.Web.Mvc

Assembly : DevExpress.Web.Mvc5.v25.2.dll

NuGet Package : DevExpress.Web.Mvc5

Declaration

• C#
• VB.NET

public CardViewBreakpointsLayoutSettings SettingsBreakpointsLayout { get; }

Public ReadOnly Property SettingsBreakpointsLayout As CardViewBreakpointsLayoutSettings

Property Value

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

|

Remarks

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

Refer to the Adaptivity topic for more information.

Online Demo

Card View - Adaptive Layout

Example

The following example illustrates how to implement three different layout scenarios for three different browser sizes (Small, Medium, Large) as shown on the image below.

• Razor (View)

@Html.DevExpress().CardView(settings => {
...
settings.Settings.LayoutMode = DevExpress.Web.Layout.Breakpoints;
settings.SettingsAdaptivity.BreakpointsLayoutSettings.CardsPerRow = 5;
settings.SettingsAdaptivity.BreakpointsLayoutSettings.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Small, 3);
settings.SettingsAdaptivity.BreakpointsLayoutSettings.Breakpoints.Add(BreakpointsLayoutDeviceSizes.Custom, 1300, 4);
...
}).Bind(Model).GetHtml()

See Also

CardViewPagerState Class

CardViewPagerState Members

DevExpress.Web.Mvc Namespace