Timeline - Pick left or right side

[Joseph]

Trying to figure out if there is a way to pick if the items will be on the left or right, i dont want to alternate but rather pick which ones will be on each side.  If anyone knows how and could pass on the info that would be great!

[Alexander]

Hi Joseph,

I noticed that there is not a Telerik UI for ASP.NET Core license associated with your account which limits the availability of our support services for the product. In this regard, It is recommended that you either purchase or renew your license in order to gain access to the latest updates, fixes, features, and support regarding the Telerik UI for ASP.NET Core components. More information regarding the currently available plans can be found in the Support Plans section.

With that said, currently, the Telerik UI for ASP.NET Core Timeline does not expose a built-in configuration that allows a left or right positioning for a particular Timeline event.

Having this in mind, you achieve the desired result using the following approach:

• Add a boolean property to the Model of the Timeline that would indicate whether a particular timeline event will be displayed on the left or right. For example:

Model:

    public class TimelineEventModel
    {
        public string Title { get; set; }
        public string Subtitle { get; set; }
        public string Description { get; set; }

        public DateTime EventDate { get; set; }
        public string AltField { get; set; }
        public bool isLeft { get; set; }
        public List<TimelineEventModelImage> Images { get; set; }
        public List<TimelineEventModelAction> Actions { get; set; }

    }

• Subscribe to the DataBound event of the Timeline and within it, provide a function handler:

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

• Within the function handler:
  1. Get the current records through the dataSource.data()
  2. Iterate through each of the items.
  3. Get the unique identifier for the currently rendered list item and add or remove the "k-reverse" class generated for the position of the current list item based on the state isLeft field mentioned previously.
  4. Update the card callout classes as well, in order to ensure proper stylization regarding the cards.

    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);
         }
    }

I hope you find this helpful.

Regards,
Alexander
Progress Telerik