Skip to content

Commit 7099b4e

Browse files
IndrajithSrinivasanIndrajithSrinivasan
authored
Merge pull request #2804 from syncfusion-content/EJ2-875578-timelineAPI
UG(875578): Need to Map API link to the timeline property.
2 parents ce5b996 + fd96363 commit 7099b4e

File tree

14 files changed

+549
-21
lines changed

14 files changed

+549
-21
lines changed

‎ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/align.md

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
layout: post
3+
title: Alignment in ##Platform_Name## Timeline Control | Syncfusion
4+
description: Checkout and learn about Alignment in Syncfusion ##Platform_Name## Timeline control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Alignment
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Alignment in ##Platform_Name## Timeline control
12+
13+
You can display the Timeline content `Before`, `After`, `Alternate` and `AlternateReverse` by using the [align](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.Timeline.html#Syncfusion_EJ2_Layouts_Timeline_Align) property. The oppositeContent will be displayed parallel to the content when configured in the [TimelineItem](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html).
14+
15+
## Before
16+
17+
In [Before](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineAlign.html) alignment, for `horizontal` orientation the item content is placed at the top and oppositeContent at the bottom whereas in `vertical`, the content to the left and oppositeContent to the right.
18+
19+
{% if page.publishingplatform == "aspnet-core" %}
20+
21+
{% tabs %}
22+
{% highlight cshtml tabtitle="CSHTML" %}
23+
{% include code-snippet/timeline/align/before/tagHelper %}
24+
{% endhighlight %}
25+
{% highlight c# tabtitle="Separator.cs" %}
26+
{% include code-snippet/timeline/align/before/before.cs %}
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
{% elsif page.publishingplatform == "aspnet-mvc" %}
31+
32+
{% tabs %}
33+
{% highlight razor tabtitle="CSHTML" %}
34+
{% include code-snippet/timeline/align/before/razor %}
35+
{% endhighlight %}
36+
{% highlight c# tabtitle="Separator.cs" %}
37+
{% include code-snippet/timeline/align/before/before.cs %}
38+
{% endhighlight %}
39+
{% endtabs %}
40+
{% endif %}
41+
42+
![Before Alignment](images/align-before.png)
43+
44+
## After
45+
46+
In [After](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineAlign.html) alignment, for `horizontal` orientation the item content is placed at the bottom and oppositeContent at the top whereas in `vertical`, the content to the right and oppositeContent to the left.
47+
48+
{% if page.publishingplatform == "aspnet-core" %}
49+
50+
{% tabs %}
51+
{% highlight cshtml tabtitle="CSHTML" %}
52+
{% include code-snippet/timeline/align/after/tagHelper %}
53+
{% endhighlight %}
54+
{% highlight c# tabtitle="Separator.cs" %}
55+
{% include code-snippet/timeline/align/after/after.cs %}
56+
{% endhighlight %}
57+
{% endtabs %}
58+
59+
{% elsif page.publishingplatform == "aspnet-mvc" %}
60+
61+
{% tabs %}
62+
{% highlight razor tabtitle="CSHTML" %}
63+
{% include code-snippet/timeline/align/after/razor %}
64+
{% endhighlight %}
65+
{% highlight c# tabtitle="Separator.cs" %}
66+
{% include code-snippet/timeline/align/after/after.cs %}
67+
{% endhighlight %}
68+
{% endtabs %}
69+
{% endif %}
70+
71+
![After Alignment](images/align-after.png)
72+
73+
## Alternate
74+
75+
In [Alternate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineAlign.html) alignment, the item content are arranged alternatively regardless of the Timeline orientation.
76+
77+
{% if page.publishingplatform == "aspnet-core" %}
78+
79+
{% tabs %}
80+
{% highlight cshtml tabtitle="CSHTML" %}
81+
{% include code-snippet/timeline/align/alternate/tagHelper %}
82+
{% endhighlight %}
83+
{% highlight c# tabtitle="Separator.cs" %}
84+
{% include code-snippet/timeline/align/alternate/alternate.cs %}
85+
{% endhighlight %}
86+
{% endtabs %}
87+
88+
{% elsif page.publishingplatform == "aspnet-mvc" %}
89+
90+
{% tabs %}
91+
{% highlight razor tabtitle="CSHTML" %}
92+
{% include code-snippet/timeline/align/alternate/razor %}
93+
{% endhighlight %}
94+
{% highlight c# tabtitle="Separator.cs" %}
95+
{% include code-snippet/timeline/align/alternate/alternate.cs %}
96+
{% endhighlight %}
97+
{% endtabs %}
98+
{% endif %}
99+
100+
![Alternate Alignment](images/align-alternate.png)
101+
102+
## Alternate reverse
103+
104+
In [AlternateReverse](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineAlign.html) alignment, the item content are arranged in reverse alternate regardless of the Timeline orientation.
105+
106+
{% if page.publishingplatform == "aspnet-core" %}
107+
108+
{% tabs %}
109+
{% highlight cshtml tabtitle="CSHTML" %}
110+
{% include code-snippet/timeline/align/alternate-reverse/tagHelper %}
111+
{% endhighlight %}
112+
{% highlight c# tabtitle="Separator.cs" %}
113+
{% include code-snippet/timeline/align/alternate-reverse/alternatereverse.cs %}
114+
{% endhighlight %}
115+
{% endtabs %}
116+
117+
{% elsif page.publishingplatform == "aspnet-mvc" %}
118+
119+
{% tabs %}
120+
{% highlight razor tabtitle="CSHTML" %}
121+
{% include code-snippet/timeline/align/alternate-reverse/razor %}
122+
{% endhighlight %}
123+
{% highlight c# tabtitle="Separator.cs" %}
124+
{% include code-snippet/timeline/align/alternate-reverse/alternatereverse.cs %}
125+
{% endhighlight %}
126+
{% endtabs %}
127+
{% endif %}
128+
129+
![AlternateReverse Alignment](images/align-alternate-reverse.png)

‎ej2-asp-core-mvc/timeline/events.md renamed to ‎ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/events.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ This section describes the Timeline events that will be triggered when an approp
1414

1515
## created
1616

17-
The Timeline control triggers the `created` event when the control rendering is completed.
17+
The Timeline control triggers the [created](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.Timeline.html#Syncfusion_EJ2_Layouts_Timeline_Created) event when the control rendering is completed.
1818

1919
{% if page.publishingplatform == "aspnet-core" %}
2020

@@ -41,7 +41,7 @@ The Timeline control triggers the `created` event when the control rendering is
4141

4242
## beforeItemRender
4343

44-
The Timeline control triggers the `beforeItemRender` event before rendering each item.
44+
The Timeline control triggers the [beforeItemRender](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.Timeline.html#Syncfusion_EJ2_Layouts_Timeline_BeforeItemRender) event before rendering each item.
4545

4646
{% if page.publishingplatform == "aspnet-core" %}
4747

‎ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/items.md

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
layout: post
3+
title: Items in ##Platform_Name## Timeline Control | Syncfusion
4+
description: Checkout and learn about Items in Syncfusion ##Platform_Name## Timeline control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Items
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Items in ##Platform_Name## Timeline control
12+
13+
The Timeline items can be added by using the [items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.Timeline.html#Syncfusion_EJ2_Layouts_Timeline_Items) property. Each item can be configured with options such as `content`, `oppositeContent`, `dotCss`, `disabled` and `cssClass`.
14+
15+
## Adding content
16+
17+
You can define the item content using the [content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_Content) property.
18+
19+
### String content
20+
21+
You can define string content for the Timeline items.
22+
23+
{% if page.publishingplatform == "aspnet-core" %}
24+
25+
{% tabs %}
26+
{% highlight cshtml tabtitle="CSHTML" %}
27+
{% include code-snippet/timeline/items/content/string-based/tagHelper %}
28+
{% endhighlight %}
29+
{% highlight c# tabtitle="Separator.cs" %}
30+
{% include code-snippet/timeline/items/content/string-based/stringbased.cs %}
31+
{% endhighlight %}
32+
{% endtabs %}
33+
34+
{% elsif page.publishingplatform == "aspnet-mvc" %}
35+
36+
{% tabs %}
37+
{% highlight razor tabtitle="CSHTML" %}
38+
{% include code-snippet/timeline/items/content/string-based/razor %}
39+
{% endhighlight %}
40+
{% highlight c# tabtitle="Separator.cs" %}
41+
{% include code-snippet/timeline/items/content/string-based/stringbased.cs %}
42+
{% endhighlight %}
43+
{% endtabs %}
44+
{% endif %}
45+
46+
![String-based content](images/content.png)
47+
48+
### Templated content
49+
50+
You can specify the [Template Content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_ContentTemplate) content for the items, by using the selector for an element in HTML.
51+
52+
{% if page.publishingplatform == "aspnet-core" %}
53+
54+
{% tabs %}
55+
{% highlight cshtml tabtitle="CSHTML" %}
56+
{% include code-snippet/timeline/items/content/template-based/tagHelper %}
57+
{% endhighlight %}
58+
{% highlight c# tabtitle="Separator.cs" %}
59+
{% include code-snippet/timeline/items/content/template-based/templatebased.cs %}
60+
{% endhighlight %}
61+
{% endtabs %}
62+
63+
{% elsif page.publishingplatform == "aspnet-mvc" %}
64+
65+
{% tabs %}
66+
{% highlight razor tabtitle="CSHTML" %}
67+
{% include code-snippet/timeline/items/content/template-based/razor %}
68+
{% endhighlight %}
69+
{% highlight c# tabtitle="Separator.cs" %}
70+
{% include code-snippet/timeline/items/content/template-based/templatebased.cs %}
71+
{% endhighlight %}
72+
{% endtabs %}
73+
{% endif %}
74+
75+
![Templated content](images/content-template.png)
76+
77+
## Adding opposite content
78+
79+
You can add additional information to each Timeline item, by using the [oppositeContent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_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.
80+
81+
{% if page.publishingplatform == "aspnet-core" %}
82+
83+
{% tabs %}
84+
{% highlight cshtml tabtitle="CSHTML" %}
85+
{% include code-snippet/timeline/items/opposite-content/tagHelper %}
86+
{% endhighlight %}
87+
{% highlight c# tabtitle="Separator.cs" %}
88+
{% include code-snippet/timeline/items/opposite-content/oppositecontent.cs %}
89+
{% endhighlight %}
90+
{% endtabs %}
91+
92+
{% elsif page.publishingplatform == "aspnet-mvc" %}
93+
94+
{% tabs %}
95+
{% highlight razor tabtitle="CSHTML" %}
96+
{% include code-snippet/timeline/items/opposite-content/razor %}
97+
{% endhighlight %}
98+
{% highlight c# tabtitle="Separator.cs" %}
99+
{% include code-snippet/timeline/items/opposite-content/oppositecontent.cs %}
100+
{% endhighlight %}
101+
{% endtabs %}
102+
{% endif %}
103+
104+
![opposite content](images/opposite-content.png)
105+
106+
## Dot item
107+
108+
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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_DotCss) property.
109+
110+
### Adding icons
111+
112+
You can define the CSS class to show the icon for each item using the `dotCss` property.
113+
114+
### Adding images
115+
116+
You can include images for the Timeline items using the `dotCss` property, by setting the CSS `background-image` property.
117+
118+
### Adding text
119+
120+
You can display text for the Timeline items using the `dotCss` property, by adding text to the CSS `content` property.
121+
122+
{% if page.publishingplatform == "aspnet-core" %}
123+
124+
{% tabs %}
125+
{% highlight cshtml tabtitle="CSHTML" %}
126+
{% include code-snippet/timeline/items/dot-item/tagHelper %}
127+
{% endhighlight %}
128+
{% highlight c# tabtitle="Separator.cs" %}
129+
{% include code-snippet/timeline/items/dot-item/dotitem.cs %}
130+
{% endhighlight %}
131+
{% endtabs %}
132+
133+
{% elsif page.publishingplatform == "aspnet-mvc" %}
134+
135+
{% tabs %}
136+
{% highlight razor tabtitle="CSHTML" %}
137+
{% include code-snippet/timeline/items/dot-item/razor %}
138+
{% endhighlight %}
139+
{% highlight c# tabtitle="Separator.cs" %}
140+
{% include code-snippet/timeline/items/dot-item/dotitem.cs %}
141+
{% endhighlight %}
142+
{% endtabs %}
143+
{% endif %}
144+
145+
![Dot items](images/dot-item.png)
146+
147+
## Disabling items
148+
149+
You can use the [disabled](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_Disabled) property to disable an item when set to `true`. By default, the value is `false`.
150+
151+
{% if page.publishingplatform == "aspnet-core" %}
152+
153+
{% tabs %}
154+
{% highlight cshtml tabtitle="CSHTML" %}
155+
{% include code-snippet/timeline/items/disabled/tagHelper %}
156+
{% endhighlight %}
157+
{% highlight c# tabtitle="Separator.cs" %}
158+
{% include code-snippet/timeline/items/disabled/disabled.cs %}
159+
{% endhighlight %}
160+
{% endtabs %}
161+
162+
{% elsif page.publishingplatform == "aspnet-mvc" %}
163+
164+
{% tabs %}
165+
{% highlight razor tabtitle="CSHTML" %}
166+
{% include code-snippet/timeline/items/disabled/razor %}
167+
{% endhighlight %}
168+
{% highlight c# tabtitle="Separator.cs" %}
169+
{% include code-snippet/timeline/items/disabled/disabled.cs %}
170+
{% endhighlight %}
171+
{% endtabs %}
172+
{% endif %}
173+
174+
![Disabling items](images/disabled.png)
175+
176+
## CSS class
177+
178+
The [cssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property allows you to define a custom class to modify the appearance of the Timeline item.

‎ej2-asp-core-mvc/timeline/EJ2_ASP.MVC/orientations.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
layout: post
3+
title: Orientations in ##Platform_Name## Timeline Control | Syncfusion
4+
description: Checkout and learn about Orientations in Syncfusion ##Platform_Name## Timeline control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Orientations
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Orientations in ##Platform_Name## Timeline control
12+
13+
The Timeline control supports the display of items in both horizontal and vertical direction by using the [orientation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.Timeline.html#Syncfusion_EJ2_Layouts_Timeline_Orientation) property.
14+
15+
## Vertical
16+
17+
You can display the items one below the other vertically by setting the [orientation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.Timeline.html#Syncfusion_EJ2_Layouts_Timeline_Orientation) property to `Vertical`. By default, the items are displayed in vertical orientation.
18+
19+
{% if page.publishingplatform == "aspnet-core" %}
20+
21+
{% tabs %}
22+
{% highlight cshtml tabtitle="CSHTML" %}
23+
{% include code-snippet/timeline/orientations/vertical/tagHelper %}
24+
{% endhighlight %}
25+
{% highlight c# tabtitle="Separator.cs" %}
26+
{% include code-snippet/timeline/orientations/vertical/vertical.cs %}
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
{% elsif page.publishingplatform == "aspnet-mvc" %}
31+
32+
{% tabs %}
33+
{% highlight razor tabtitle="CSHTML" %}
34+
{% include code-snippet/timeline/orientations/vertical/razor %}
35+
{% endhighlight %}
36+
{% highlight c# tabtitle="Separator.cs" %}
37+
{% include code-snippet/timeline/orientations/vertical/vertical.cs %}
38+
{% endhighlight %}
39+
{% endtabs %}
40+
{% endif %}
41+
42+
![Vertical](images/vertical.png)
43+
44+
## Horizontal
45+
46+
In horizontal orientation, the items are displayed in a side-by-side manner by setting the [orientation](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Layouts.Timeline.html#Syncfusion_EJ2_Layouts_Timeline_Orientation) property to `Horizontal`.
47+
48+
{% if page.publishingplatform == "aspnet-core" %}
49+
50+
{% tabs %}
51+
{% highlight cshtml tabtitle="CSHTML" %}
52+
{% include code-snippet/timeline/orientations/horizontal/tagHelper %}
53+
{% endhighlight %}
54+
{% highlight c# tabtitle="Separator.cs" %}
55+
{% include code-snippet/timeline/orientations/horizontal/horizontal.cs %}
56+
{% endhighlight %}
57+
{% endtabs %}
58+
59+
{% elsif page.publishingplatform == "aspnet-mvc" %}
60+
61+
{% tabs %}
62+
{% highlight razor tabtitle="CSHTML" %}
63+
{% include code-snippet/timeline/orientations/horizontal/razor %}
64+
{% endhighlight %}
65+
{% highlight c# tabtitle="Separator.cs" %}
66+
{% include code-snippet/timeline/orientations/horizontal/horizontal.cs %}
67+
{% endhighlight %}
68+
{% endtabs %}
69+
{% endif %}
70+
71+
![Horizontal](images/horizontal.png)

0 commit comments

Comments
 (0)