Events in Blazor Timeline component

20 Mar 20243 minutes to read

This section describes the Timeline events that will be triggered when an appropriate actions are performed. The following events are available in the TImeline component.

Created

The Timeline component triggers the Created event when the component rendering is completed.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline Created="TimelineCreated">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public void TimelineCreated()
    {
        // Here, you can customize your code.
    }
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planning" },
        new TimelineItemModel() { Content = "Developing" },
        new TimelineItemModel() { Content = "Testing" },
        new TimelineItemModel() { Content = "Launch" }
    };
}

ItemRendered

The Timeline component triggers the ItemRendered event after rendering each item.

@using Syncfusion.Blazor.Layouts

<div class="container" style="height: 350px">
    <SfTimeline ItemRendered="TimelineItemRendered">
        <TimelineItems>
            @foreach (var item in timelineItems)
            {
                <TimelineItem>
                    <Content> @item.Content </Content>
                </TimelineItem>
            }
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    public void TimelineItemRendered(TimelineRenderedEventArgs args)
    {
        // Here, you can customize your code.
    }
    public class TimelineItemModel
    {
        public string Content { get; set; }
    }
    private List<TimelineItemModel> timelineItems = new List<TimelineItemModel>()
    {
        new TimelineItemModel() { Content = "Planning" },
        new TimelineItemModel() { Content = "Developing" },
        new TimelineItemModel() { Content = "Testing" },
        new TimelineItemModel() { Content = "Launch" }
    };
}