Pick a Timeline Item If the Items Are Aligned Left or Right

Environment

Product	Telerik UI for ASP.NET Core Timeline
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.621 version

Description

How can I pick an item if the items are aligned left or right in the Timeline?

Solution

To achieve the desired scenario:

1. Add a Boolean property to the Model of the Timeline that will indicate whether a particular timeline event will be displayed on the left or right.

2. Subscribe to the DataBound event of the Timeline.

3. Within the function handler:

4. Get the current records through the dataSource.data() method.

5. Iterate through each of the items.

6. Get the unique identifier for the currently rendered list item.

7. Add or remove the k-reverse class generated for the position of the current list item and based on the isLeft field of the state mentioned previously.

8. To ensure proper stylization regarding the cards, update the card callout classes.

Model.cs

    public class TimelineEventModel
    {
        ...
        public bool isLeft { get; set; }
        ...
    }

Timeline.cshtml

    @(Html.Kendo().Timeline<TimelineDemoApp.Models.TimelineEventModel>()
            .Name("Timeline")
            .Events(e=>e.DataBound("onDataBound"))
            //additional configuration...
    )

script.js

    function onDataBound(){
         var items=this.dataSource.data(); 
         for(var i = 0; i < items.length; i++){ 
               var item = items[i]; 
               var uidAttr = kendo.attr('uid');
               var element = this.element.find('li[' + uidAttr + '=' + item.uid + ']');
               var isLeft = item.isLeft;
                  
               element.toggleClass("k-reverse", isLeft);
               element.find('.k-card-callout')
                      	.toggleClass('k-callout-e', isLeft)
                      	.toggleClass('k-callout-w', !isLeft);
         }
    }

More ASP.NET Core Timeline Resources

• ASP.NET Core Timeline Documentation

• ASP.NET Core Timeline Demos

• ASP.NET Core Timeline Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Timeline for ASP.NET Core
• Server-Side API Reference of the Timeline for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base