Radzen Blazor Components

Column

The RadzenColumn component is used within a RadzenRow to create a structured grid layout. Without the RadzenRow component, the RadzenColumn would not be rendered correctly.

Columns

RadzenColumns are positioned on a 12-column based responsive grid.

Auto-layout columns

Column 1 of 4

Column 2 of 4

Column 3 of 4

Column 4 of 4

One column with a predefined Size

Size="4"

Auto

All columns with a predefined Size

Size="4"

Size="5"

Size="3"

Responsive sizes

Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.

Size="12" SizeXS="11" SizeSM="10" SizeMD="9" SizeLG="8" SizeXL="7" SizeXX="6"

Wrapping

4 RadzenColumns with Size="6" render on two lines in a RadzenRow.

Size="6"

Column Offset

The Offset property moves the column to the right following the grid column layout.

E.g. Offset="3" offsets 3 columns to the right.

Size="6" Offset="3"

Responsive offsetting

Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See Breakpoints to learn more.

Offset="0" OffsetXS="1" OffsetSM="2" OffsetMD="3" OffsetLG="4" OffsetXL="5" OffsetXX="6"

Column Order

The Order property is used to reorder columns visually.

Column 1, Order="3"

Column 2, Order="1"

Column 3, Order="2"

Responsive ordering

You can reorder columns on different screen sizes. Resize your browser window to see how the columns reorder. See Breakpoints to learn more.

Order="1", OrderMD="4" OrderLG="6" OrderXL="8"

Order="3"

Order="5"

Order="7"

Nested layouts

Auto-layout columns

Example with 3 levels of nesting. You can nest rows and columns indefinitely.

Level 1

Level 2

Level 3

Level 2

Columns with a predefined Size

The second column contains a nested row with 4 columns.

Size="3"

Auto size

Size="3"

Size="6"

Size="3"

Gutters

By default, the spacing between columns is set to `1rem`, via the `--rz-gap` CSS variable. Spacing between coulmns can be controlled by setting the `Gap` property of the parent `RadzenRow` component.

Column 1 of 3

Column 2 of 3

Column 3 of 3

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

Learn More Download Now

Overview
Dashboard Updated
Get Started
Support
UI Fundamentals
- Colors
- Typography
- Icons
- Borders
- Shadows
- Ripple
- Breakpoints New
- Spacing New
DataGrid Updated
- Data-binding
- Virtualization
  - IQueryable support
  - LoadData support
- Columns Updated
- Filtering Updated
- Hierarchy Updated
- Selection Updated
- Sorting
- Paging Updated
- Grouping Updated
- Density New
- GridLines New
- Cell Context Menu
- Save/Load settings New
- InLine Editing
- Conditional formatting
- Export to Excel and CSV
- Cascading DropDowns
- Empty Data Grid
Data Updated
- DataList
- DataFilter New
- Pager
- Scheduler
- Tree
Images
- Gravatar
- Image
Layout
- Layout New
- Stack New
- Row New
- Column New
- Card Updated
- Dialog Updated
- Panel
- Splitter
Navigation
- Accordion
- BreadCrumb
- ContextMenu
- Link
- Login Updated
- Menu Updated
- PanelMenu
- ProfileMenu
- Steps Updated
- Tabs
Forms
- AutoComplete
- Button Updated
- CheckBox
- CheckBoxList
- ColorPicker
- DatePicker
- DropDown
  - Single selection Updated
  - Multiple selection Updated
  - Virtualization Updated
  - Filtering Updated
  - Grouping Updated
  - Custom objects binding Updated
- DropDownDataGrid
- Fieldset
- FileInput
- HtmlEditor
  - Default Tools
  - Custom Tools
- ListBox
- Mask
- Numeric
- Password
- RadioButtonList
- Rating
- SelectBar Updated
- Slider
- SpeechToTextButton New
- SplitButton Updated
- Switch
- TemplateForm
- TextArea
- TextBox
- Upload
Data Visualization
Feedback
- Badge Updated
- Notification
- Alert New
  - Alert Configuration
  - Alert Styling
- ProgressBar Updated
- Tooltip
Validators

Column

Columns

Auto-layout columns

One column with a predefined Size

All columns with a predefined Size

Responsive sizes

Wrapping

Column Offset

The Offset property moves the column to the right following the grid column layout.

Responsive offsetting

Column Order

The Order property is used to reorder columns visually.

Responsive ordering

Nested layouts

Auto-layout columns

Columns with a predefined Size

Gutters

By default, the spacing between columns is set to 1rem, via the --rz-gap CSS variable. Spacing between coulmns can be controlled by setting the Gap property of the parent RadzenRow component.

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

By default, the spacing between columns is set to `1rem`, via the `--rz-gap` CSS variable. Spacing between coulmns can be controlled by setting the `Gap` property of the parent `RadzenRow` component.