Class RadzenTimeline

A timeline component for displaying chronological sequences of events with visual indicators and connecting lines. RadzenTimeline presents events along a vertical or horizontal axis, ideal for histories, project milestones, or process flows. Visualizes temporal data in a linear sequence with customizable markers, labels, and content for each event. Supports Vertical (top-to-bottom) or Horizontal (left-to-right) orientation, Center/Start/End/Alternate positioning of the connecting line, custom point markers/labels/content per item via templates, content alignment control (start, center, end, stretch), chronological order reversal, and flexible content where each item can have point marker, label, and main content. Timeline items are defined using RadzenTimelineItem components. Common uses include order tracking, project progress, changelog displays, or activity feeds.

Inheritance

object

ComponentBase

RadzenComponent

RadzenTimeline

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.SetParametersAsync(ParameterView)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenTimeline : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Basic vertical timeline:

<RadzenTimeline>
    <Items>
        <RadzenTimelineItem>
            <PointContent><RadzenIcon Icon="check_circle" /></PointContent>
            <ChildContent>
                <RadzenText TextStyle="TextStyle.H6">Order Placed</RadzenText>
                <RadzenText>January 1, 2025</RadzenText>
            </ChildContent>
        </RadzenTimelineItem>
        <RadzenTimelineItem>
            <PointContent><RadzenIcon Icon="local_shipping" /></PointContent>
            <ChildContent>
                <RadzenText TextStyle="TextStyle.H6">Shipped</RadzenText>
                <RadzenText>January 2, 2025</RadzenText>
            </ChildContent>
        </RadzenTimelineItem>
    </Items>
</RadzenTimeline>

Horizontal timeline with labels:

<RadzenTimeline Orientation="Orientation.Horizontal" LinePosition="LinePosition.Bottom">
    <Items>
        <RadzenTimelineItem>
            <LabelContent>2020</LabelContent>
            <ChildContent>Company founded</ChildContent>
        </RadzenTimelineItem>
        <RadzenTimelineItem>
            <LabelContent>2022</LabelContent>
            <ChildContent>First product launch</ChildContent>
        </RadzenTimelineItem>
    </Items>
</RadzenTimeline>

Constructors

RadzenTimeline()

A timeline component for displaying chronological sequences of events with visual indicators and connecting lines. RadzenTimeline presents events along a vertical or horizontal axis, ideal for histories, project milestones, or process flows. Visualizes temporal data in a linear sequence with customizable markers, labels, and content for each event. Supports Vertical (top-to-bottom) or Horizontal (left-to-right) orientation, Center/Start/End/Alternate positioning of the connecting line, custom point markers/labels/content per item via templates, content alignment control (start, center, end, stretch), chronological order reversal, and flexible content where each item can have point marker, label, and main content. Timeline items are defined using RadzenTimelineItem components. Common uses include order tracking, project progress, changelog displays, or activity feeds.

Declaration

public RadzenTimeline()

Examples

Basic vertical timeline:

<RadzenTimeline>
    <Items>
        <RadzenTimelineItem>
            <PointContent><RadzenIcon Icon="check_circle" /></PointContent>
            <ChildContent>
                <RadzenText TextStyle="TextStyle.H6">Order Placed</RadzenText>
                <RadzenText>January 1, 2025</RadzenText>
            </ChildContent>
        </RadzenTimelineItem>
        <RadzenTimelineItem>
            <PointContent><RadzenIcon Icon="local_shipping" /></PointContent>
            <ChildContent>
                <RadzenText TextStyle="TextStyle.H6">Shipped</RadzenText>
                <RadzenText>January 2, 2025</RadzenText>
            </ChildContent>
        </RadzenTimelineItem>
    </Items>
</RadzenTimeline>

Horizontal timeline with labels:

<RadzenTimeline Orientation="Orientation.Horizontal" LinePosition="LinePosition.Bottom">
    <Items>
        <RadzenTimelineItem>
            <LabelContent>2020</LabelContent>
            <ChildContent>Company founded</ChildContent>
        </RadzenTimelineItem>
        <RadzenTimelineItem>
            <LabelContent>2022</LabelContent>
            <ChildContent>First product launch</ChildContent>
        </RadzenTimelineItem>
    </Items>
</RadzenTimeline>

Properties

AlignItems

Gets or sets the cross-axis alignment of timeline item content (label, point, and child content). Controls vertical alignment for horizontal timelines, or horizontal alignment for vertical timelines.

Declaration

[Parameter]
public AlignItems AlignItems { get; set; }

Property Value

Type	Description
AlignItems	The alignment. Default is Center.

Items

Gets or sets the render fragment containing RadzenTimelineItem components that define the timeline events. Each RadzenTimelineItem represents one event or milestone in the timeline.

Declaration

[Parameter]
public RenderFragment Items { get; set; }

Property Value

Type	Description
RenderFragment	The items render fragment containing timeline event definitions.

LinePosition

Gets or sets where the connecting line appears relative to the timeline items. Options include Center (line between content), Start/End (line on side), or Alternate (zigzag pattern).

Declaration

[Parameter]
public LinePosition LinePosition { get; set; }

Property Value

Type	Description
LinePosition	The line position. Default is Center.

Orientation

Gets or sets the layout direction of the timeline. Vertical displays events top-to-bottom, Horizontal displays events left-to-right.

Declaration

[Parameter]
public Orientation Orientation { get; set; }

Property Value

Type	Description
Orientation	The orientation. Default is Vertical.

Reverse

Gets or sets whether to reverse the timeline order visually (but not in markup). When true with vertical orientation, items flow bottom-to-top. With horizontal, items flow right-to-left.

Declaration

[Parameter]
public bool Reverse { get; set; }

Property Value

Type	Description
bool	true to reverse the visual order; otherwise, false. Default is false.

Methods

BuildRenderTree(RenderTreeBuilder)

A timeline component for displaying chronological sequences of events with visual indicators and connecting lines. RadzenTimeline presents events along a vertical or horizontal axis, ideal for histories, project milestones, or process flows. Visualizes temporal data in a linear sequence with customizable markers, labels, and content for each event. Supports Vertical (top-to-bottom) or Horizontal (left-to-right) orientation, Center/Start/End/Alternate positioning of the connecting line, custom point markers/labels/content per item via templates, content alignment control (start, center, end, stretch), chronological order reversal, and flexible content where each item can have point marker, label, and main content. Timeline items are defined using RadzenTimelineItem components. Common uses include order tracking, project progress, changelog displays, or activity feeds.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable