DataViewBreakpointsLayoutSettingsBase.ItemsPerRow Property

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

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v20.2.dll

NuGet Package: DevExpress.Web

Declaration

C#

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

VB.NET

<DefaultValue(6)>
Public Overridable Property ItemsPerRow As Integer

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 Controls and MVC Extensions	ASPxDataView	.SettingsBreakpointsLayout .ItemsPerRow
	ASPxImageGallery	.SettingsBreakpointsLayout .ItemsPerRow
ASP.NET MVC Extensions	DataViewSettings	.SettingsBreakpointsLayout .ItemsPerRow
	ImageGallerySettings	.SettingsBreakpointsLayout .ItemsPerRow
	MVCxDataView	.SettingsBreakpointsLayout .ItemsPerRow
	MVCxImageGallery	.SettingsBreakpointsLayout .ItemsPerRow

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):

Data View

C#

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

Image Gallery

C#

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