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:
- Add a Boolean property to the
Modelof the Timeline that will indicate whether a particular timeline event will be displayed on the left or right. - Subscribe to the
DataBoundevent of the Timeline. -
Within the function handler:
- Get the current records through the
dataSource.data()method. - Iterate through each of the items.
- Get the unique identifier for the currently rendered list item.
- Add or remove the
k-reverseclass generated for the position of the current list item and based on theisLeftfield of the state mentioned previously. - To ensure proper stylization regarding the cards, update the card callout classes.
- Get the current records through the
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);
}
}