Orientations in ASP.NET MVC Timeline control

20 Mar 20242 minutes to read

The Timeline control supports the display of items in both horizontal and vertical direction by using the orientation property.

Vertical

You can display the items one below the other vertically by setting the orientation property to Vertical. By default, the items are displayed in vertical orientation.

@using Syncfusion.EJ2.Layouts

<div id="container" style="height: 350px;">
    @Html.EJS().Timeline("timeline").Orientation(TimelineOrientation.Vertical).Items(ViewBag.tripItenerary).Render()
</div>

<style>
    #container {
        width: 60%;
        margin: 30px auto;
        padding: 30px;
    }

    #container:has(.e-vertical) {
        height: 350px;
    }
</style>
public ActionResult Demo()
{
    List<TimelineItem> tripItenerary = new List<TimelineItem>();
    tripItenerary.Add(new TimelineItem { Content = "Day 1, 4:00 PM", OppositeContent = "Check-in and campsite visit" });
    tripItenerary.Add(new TimelineItem { Content = "Day 1, 7:00 PM", OppositeContent = "Dinner with music" });
    tripItenerary.Add(new TimelineItem { Content = "Day 2, 5:30 AM", OppositeContent = "Sunrise between mountains" });
    tripItenerary.Add(new TimelineItem { Content = "Day 2, 8:00 AM", OppositeContent = "Breakfast and check-out" });
    ViewBag.tripItenerary = tripItenerary;
    
    return View();
}

Vertical

Horizontal

In horizontal orientation, the items are displayed in a side-by-side manner by setting the orientation property to Horizontal.

@using Syncfusion.EJ2.Layouts

<div id="container">
    @Html.EJS().Timeline("timeline").Orientation(TimelineOrientation.Horizontal).Items(ViewBag.tripItenerary).Render()
</div>
public ActionResult Demo()
{
    List<TimelineItem> tripItenerary = new List<TimelineItem>();
    tripItenerary.Add(new TimelineItem { Content = "Day 1, 4:00 PM", OppositeContent = "Check-in and campsite visit" });
    tripItenerary.Add(new TimelineItem { Content = "Day 1, 7:00 PM", OppositeContent = "Dinner with music" });
    tripItenerary.Add(new TimelineItem { Content = "Day 2, 5:30 AM", OppositeContent = "Sunrise between mountains" });
    tripItenerary.Add(new TimelineItem { Content = "Day 2, 8:00 AM", OppositeContent = "Breakfast and check-out" });
    ViewBag.tripItenerary = tripItenerary;
    
    return View();
}

Horizontal