Tab

DataViewBreakpointsLayoutSettingsBase.ItemsPerRow Property

Specifies the number of items the control displays in a row.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v21.1.dll

Declaration

[DefaultValue(6)]
public virtual int ItemsPerRow { get; set; }

Property Value

Type Default Description
Int32

6

Specifies the number of items the control displays in a row.

Property Paths

You can access this nested property as listed below:

Library Object Type Path to ItemsPerRow
ASP.NET MVC Extensions DataViewSettings
ImageGallerySettings
MVCxDataView
MVCxImageGallery
ASP.NET Web Forms Controls ASPxDataView
ASPxImageGallery

Remarks

Use the ItemsPerRow property to define how many items the control displays in a row for a given breakpoint.

To specify how many items the Data View displays in a row if there are no specified breakpoints for a given browser’s width, use the DataViewBreakpoint.ItemsPerRow property.

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

ASPxCardView-AdaptiveGridLayout

Data View

DataView.Layout = Layout.Breakpoints;
DataView.SettingsBreakpointsLayout.ItemsPerRow = 5;

DataView.SettingsBreakpointsLayout.Breakpoints.AddRange(new List<DataViewBreakpoint>(){
    new DataViewBreakpoint() { DeviceSize = BreakpointsLayoutDeviceSizes.Medium, ItemsPerRow = 3 },
    new DataViewBreakpoint() { DeviceSize = BreakpointsLayoutDeviceSizes.Custom, MaxWidth = 1300, ItemsPerRow = 4 },       
});

Concept

Data View - Layout Modes

Online Demo

Data View - Adaptive Layout

ImageGallery.Layout = Layout.Breakpoints;
ImageGallery.SettingsBreakpointsLayout.ItemsPerRow = 5;

ImageGallery.SettingsBreakpointsLayout.Breakpoints.AddRange(new List<ImageGalleryBreakpoint>(){
    new ImageGalleryBreakpoint() { DeviceSize = BreakpointsLayoutDeviceSizes.Medium, ItemsPerRow = 3 },
    new ImageGalleryBreakpoint() { DeviceSize = BreakpointsLayoutDeviceSizes.Custom, MaxWidth = 1300, ItemsPerRow = 4 },       
});

Concept

Image Gallery - Layout Modes

Online Demo

Image Gallery - Adaptive Layout

See Also