Items in ASP.NET CORE Timeline control
30 Jan 20259 minutes to read
The Timeline items can be added by using the <e-timeline-item> tag helper. Each item can be configured with options such as content, oppositeContent, dotCss, disabled and cssClass.
Adding content
You can define the item content using the content property.
String content
You can define string content for the Timeline items.
@using Syncfusion.EJ2.Layouts;
<div class="container" style="height: 350px">
<ejs-timeline id="timeline">
<e-timeline-items>
<e-timeline-item content="Shipped"></e-timeline-item>
<e-timeline-item content="Departed"></e-timeline-item>
<e-timeline-item content="Arrived"></e-timeline-item>
<e-timeline-item content="Out for Delivery"></e-timeline-item>
</e-timeline-items>
</ejs-timeline>
</div>
Templated content
You can specify the Template Content for the items, by using the selector for an element in HTML.
@using Syncfusion.EJ2.Layouts;
<div class="container" style="height: 350px">
<ejs-timeline id="timeline">
<e-timeline-items>
<e-timeline-item content="#content-template"></e-timeline-item>
<e-timeline-item content="#content-template"></e-timeline-item>
<e-timeline-item content="#content-template"></e-timeline-item>
<e-timeline-item content="Out for Delivery"></e-timeline-item>
</e-timeline-items>
</ejs-timeline>
</div>
<script id="content-template" type="text/x-jsrender">
<div class="content-container">
<div class="title">
${if(itemIndex==0)} Shipped
${else if(itemIndex==1)} Departed
${else if(itemIndex==2)} Arrived
${/if}
</div>
<span class="description">
${if(itemIndex==0)} Package details received
${else if(itemIndex==1)} In-transit
${else if(itemIndex==2)} Package arrived at nearest hub
${/if}
</span>
<div class="info">
${if(itemIndex==0)} - Awaiting dispatch
${else if(itemIndex==1)} (International warehouse)
${else if(itemIndex==2)} (New york - US)
${/if}
</div>
</div>
</script>
<style>
.content-container {
position: relative;
position: relative;
width: 180px;
padding: 10px;
margin-left: 5px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
background-color: ghostwhite;
}
.content-container::before {
content: '';
position: absolute;
left: -8px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 8px solid silver;
}
.content-container .title {
font-size: 16px;
}
.content-container .description {
color: #999999;
font-size: 12px;
}
.content-container .info {
color: #999999;
font-size: 10px;
}
</style>
Adding opposite content
You can add additional information to each Timeline item, by using the oppositeContent property which is positioned opposite to the item content. Similar to the content property you can define string or function as contents to the oppositeContent.
@using Syncfusion.EJ2.Layouts;
<div class="container" style="height:350px">
<ejs-timeline id="timeline">
<e-timeline-items>
<e-timeline-item content="Breakfast" oppositeContent="8:00 AM"></e-timeline-item>
<e-timeline-item content="Lunch" oppositeContent="1:00 PM"></e-timeline-item>
<e-timeline-item content="Dinner" oppositeContent="8:00 PM"></e-timeline-item>
</e-timeline-items>
</ejs-timeline>
</div>
Dot item
You can define CSS class to set icons, background colors, or images to personalize the appearance of dots associated with each Timeline item by using the dotCss property.
Adding icons
You can define the CSS class to show the icon for each item using the dotCss property.
Adding images
You can include images for the Timeline items using the dotCss property, by setting the CSS background-image property.
Adding text
You can display text for the Timeline items using the dotCss property, by adding text to the CSS content property.
@using Syncfusion.EJ2.Layouts;
<div class="container" style="height: 350px">
<ejs-timeline id="timeline">
<e-timeline-items>
<e-timeline-item content="Default"></e-timeline-item>
<e-timeline-item content="Icon" dotCss="e-icons e-check"></e-timeline-item>
<e-timeline-item content="Image" dotCss="custom-image"></e-timeline-item>
<e-timeline-item content="Text" dotCss="custom-text"></e-timeline-item>
</e-timeline-items>
</ejs-timeline>
</div>
<style>
/* Provide the URL for the image here. */
.e-dot.custom-image {
background-image: url("https://ej2.syncfusion.com/demos/src/listview/images/margaret.png");
}
.e-dot.custom-text::before {
content: 'A';
}
</style>
Disabling items
You can use the disabled property to disable an item when set to true. By default, the value is false.
@using Syncfusion.EJ2.Layouts;
<div class="container" style="height: 250px">
<ejs-timeline id="timeline">
<e-timeline-items>
<e-timeline-item content="Eat"></e-timeline-item>
<e-timeline-item content="Code"></e-timeline-item>
<e-timeline-item content="Repeat" disabled=true></e-timeline-item>
</e-timeline-items>
</ejs-timeline>
</div>
CSS class
You can customize the appearance of the Timeline item by specifying a custom CSS class using the cssClass property.
@using Syncfusion.EJ2.Layouts;
<div class="container" style="height: 250px">
<ejs-timeline id="timeline">
<e-timeline-items>
<e-timeline-item content="Eat" cssClass='eat' ></e-timeline-item>
<e-timeline-item content="Code" cssClass='code'></e-timeline-item>
<e-timeline-item content="Repeat" cssClass='repeat'></e-timeline-item>
</e-timeline-items>
</ejs-timeline>
</div>
<style>
.eat .e-dot,
.eat.e-timeline-item.e-connector::after {
background-color: aqua;
border-color: aqua;
}
.code .e-dot,
.code.e-timeline-item.e-connector::after {
background-color: blue;
border-color: blue;
}
.repeat .e-dot,
.repeat.e-timeline-item.e-connector::after {
background-color: yellow;
border-color: yellow;
}
</style>