RadzenColumn Class

A responsive grid column component used within RadzenRow to create flexible, responsive layouts based on a 12-column grid system. RadzenColumn provides breakpoint-specific sizing, offsetting, and ordering capabilities for building adaptive interfaces. Must be used inside a RadzenRow component. The column width is specified as a value from 1-12, representing the number of grid columns to span. Supports responsive design through breakpoint-specific properties including Size for default column width (1-12), SizeXS/SM/MD/LG/XL/XX for breakpoint-specific widths, Offset for number of columns to skip before this column (creates left margin), OffsetXS/SM/MD/LG/XL/XX for breakpoint-specific offsets, Order to control visual order of columns (useful for reordering on different screen sizes), and OrderXS/SM/MD/LG/XL/XX for breakpoint-specific ordering. Columns automatically fill available space when no size is specified, and wrap to new lines when the total exceeds 12.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenComponentWithChildren

RadzenColumn

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenColumn : RadzenComponentWithChildren, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic columns with fixed sizes:

<RadzenRow>
    <RadzenColumn Size="6">Half width</RadzenColumn>
    <RadzenColumn Size="6">Half width</RadzenColumn>
</RadzenRow>

Responsive columns that adapt to screen size:

<RadzenRow>
    <RadzenColumn SizeXS="12" SizeSM="6" SizeMD="4" SizeLG="3">
        Responsive content: Full width on mobile, half on tablet, third on desktop, quarter on large screens
    </RadzenColumn>
</RadzenRow>

Columns with offset and ordering:

<RadzenRow>
    <RadzenColumn Size="6" Offset="3">Centered with offset</RadzenColumn>
    <RadzenColumn Size="6" Order="2" OrderMD="1">Reordered on medium screens</RadzenColumn>
</RadzenRow>

Constructors

RadzenColumnlink

A responsive grid column component used within RadzenRow to create flexible, responsive layouts based on a 12-column grid system. RadzenColumn provides breakpoint-specific sizing, offsetting, and ordering capabilities for building adaptive interfaces. Must be used inside a RadzenRow component. The column width is specified as a value from 1-12, representing the number of grid columns to span. Supports responsive design through breakpoint-specific properties including Size for default column width (1-12), SizeXS/SM/MD/LG/XL/XX for breakpoint-specific widths, Offset for number of columns to skip before this column (creates left margin), OffsetXS/SM/MD/LG/XL/XX for breakpoint-specific offsets, Order to control visual order of columns (useful for reordering on different screen sizes), and OrderXS/SM/MD/LG/XL/XX for breakpoint-specific ordering. Columns automatically fill available space when no size is specified, and wrap to new lines when the total exceeds 12.

Declaration
public RadzenColumn()

Properties

Offsetlink

Gets or sets the number of columns to skip before this column (left margin spacing). Creates empty space to the left by pushing the column to the right.

Declaration
public int? Offset { get; set; }
Property Value
Type Description
int?Gets or sets the number of columns to skip before this column (left margin spacing). Creates empty space to the left by pushing the column to the right.

OffsetLGlink

Gets or sets the offset for large screens (breakpoint ≥ 1024px).

Declaration
public int? OffsetLG { get; set; }
Property Value
Type Description
int?Gets or sets the offset for large screens (breakpoint ≥ 1024px).

OffsetMDlink

Gets or sets the offset for medium screens (breakpoint ≥ 768px).

Declaration
public int? OffsetMD { get; set; }
Property Value
Type Description
int?Gets or sets the offset for medium screens (breakpoint ≥ 768px).

OffsetSMlink

Gets or sets the offset for small screens (breakpoint ≥ 576px).

Declaration
public int? OffsetSM { get; set; }
Property Value
Type Description
int?Gets or sets the offset for small screens (breakpoint ≥ 576px).

OffsetXLlink

Gets or sets the offset for extra large screens (breakpoint ≥ 1280px).

Declaration
public int? OffsetXL { get; set; }
Property Value
Type Description
int?Gets or sets the offset for extra large screens (breakpoint ≥ 1280px).

OffsetXSlink

Gets or sets the offset for extra small screens (breakpoint < 576px).

Declaration
public int? OffsetXS { get; set; }
Property Value
Type Description
int?Gets or sets the offset for extra small screens (breakpoint < 576px).

OffsetXXlink

Gets or sets the offset for extra extra large screens (breakpoint ≥ 1536px).

Declaration
public int? OffsetXX { get; set; }
Property Value
Type Description
int?Gets or sets the offset for extra extra large screens (breakpoint ≥ 1536px).

Orderlink

Gets or sets the visual display order of this column within its row. Allows reordering columns without changing their position in markup. Values can be 0-12 or "first"/"last".

Declaration
public string Order { get; set; }
Property Value
Type Description
stringGets or sets the visual display order of this column within its row. Allows reordering columns without changing their position in markup. Values can be 0-12 or "first"/"last".

OrderLGlink

Gets or sets the column order for large screens (breakpoint ≥ 1024px).

Declaration
public string OrderLG { get; set; }
Property Value
Type Description
stringGets or sets the column order for large screens (breakpoint ≥ 1024px).

OrderMDlink

Gets or sets the column order for medium screens (breakpoint ≥ 768px).

Declaration
public string OrderMD { get; set; }
Property Value
Type Description
stringGets or sets the column order for medium screens (breakpoint ≥ 768px).

OrderSMlink

Gets or sets the column order for small screens (breakpoint ≥ 576px).

Declaration
public string OrderSM { get; set; }
Property Value
Type Description
stringGets or sets the column order for small screens (breakpoint ≥ 576px).

OrderXLlink

Gets or sets the column order for extra large screens (breakpoint ≥ 1280px).

Declaration
public string OrderXL { get; set; }
Property Value
Type Description
stringGets or sets the column order for extra large screens (breakpoint ≥ 1280px).

OrderXSlink

Gets or sets the column order for extra small screens (breakpoint < 576px).

Declaration
public string OrderXS { get; set; }
Property Value
Type Description
stringGets or sets the column order for extra small screens (breakpoint < 576px).

OrderXXlink

Gets or sets the column order for extra extra large screens (breakpoint ≥ 1536px).

Declaration
public string OrderXX { get; set; }
Property Value
Type Description
stringGets or sets the column order for extra extra large screens (breakpoint ≥ 1536px).

Sizelink

Gets or sets the default column width as a value from 1-12 in the grid system. If not specified, the column will automatically expand to fill available space.

Declaration
public int? Size { get; set; }
Property Value
Type Description
int?Gets or sets the default column width as a value from 1-12 in the grid system. If not specified, the column will automatically expand to fill available space.

SizeLGlink

Gets or sets the column width for large screens (breakpoint ≥ 1024px). Overrides the default Size on desktops and larger devices.

Declaration
public int? SizeLG { get; set; }
Property Value
Type Description
int?Gets or sets the column width for large screens (breakpoint ≥ 1024px). Overrides the default Size on desktops and larger devices.

SizeMDlink

Gets or sets the column width for medium screens (breakpoint ≥ 768px). Overrides the default Size on tablets and larger devices.

Declaration
public int? SizeMD { get; set; }
Property Value
Type Description
int?Gets or sets the column width for medium screens (breakpoint ≥ 768px). Overrides the default Size on tablets and larger devices.

SizeSMlink

Gets or sets the column width for small screens (breakpoint ≥ 576px). Overrides the default Size on small tablets and larger devices.

Declaration
public int? SizeSM { get; set; }
Property Value
Type Description
int?Gets or sets the column width for small screens (breakpoint ≥ 576px). Overrides the default Size on small tablets and larger devices.

SizeXLlink

Gets or sets the column width for extra large screens (breakpoint ≥ 1280px). Overrides the default Size on large desktops and larger devices.

Declaration
public int? SizeXL { get; set; }
Property Value
Type Description
int?Gets or sets the column width for extra large screens (breakpoint ≥ 1280px). Overrides the default Size on large desktops and larger devices.

SizeXSlink

Gets or sets the column width for extra small screens (breakpoint < 576px). Overrides the default Size on mobile devices.

Declaration
public int? SizeXS { get; set; }
Property Value
Type Description
int?Gets or sets the column width for extra small screens (breakpoint < 576px). Overrides the default Size on mobile devices.

SizeXXlink

Gets or sets the column width for extra extra large screens (breakpoint ≥ 1536px). Overrides the default Size on very large displays.

Declaration
public int? SizeXX { get; set; }
Property Value
Type Description
int?Gets or sets the column width for extra extra large screens (breakpoint ≥ 1536px). Overrides the default Size on very large displays.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string

GetComponentStylelink

Gets the component CSS style.

Declaration
protected string GetComponentStyle()
Returns
Type Description
string

GetStylelink

Gets the final CSS style rendered by the component. Combines it with a style custom attribute.

Declaration
protected string GetStyle()
Returns
Type Description
string
An error has occurred. This app may no longer respond until reloaded. Reload 🗙