New to Telerik UI for ASP.NET Core? Download free 30-day trial

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:

    1. Get the current records through the dataSource.data() method.
    2. Iterate through each of the items.
    3. Get the unique identifier for the currently rendered list item.
    4. 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.
    5. To ensure proper stylization regarding the cards, update the card callout classes.

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


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


    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

See Also

In this article