Skip to content

Commit e534205

Browse files
suba-1997suba-1997
committed
934883: Test and resolve issues in UG all sections - ASP core Timeline control.
1 parent a773ff8 commit e534205

File tree

15 files changed

+95
-59
lines changed

15 files changed

+95
-59
lines changed

‎ej2-asp-core-mvc/code-snippet/timeline/items/content/string-based/stringbased.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
public ActionResult Demo()
1+
public ActionResult StringContent()
22
{
33
List<TimelineItem> orderStatus = new List<TimelineItem>();
44
orderStatus.Add(new TimelineItem { Content = "Shipped" });

‎ej2-asp-core-mvc/code-snippet/timeline/items/content/template-based/templatebased.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
public ActionResult Demo()
1+
public ActionResult TemplateContent()
22
{
33
List<TimelineItem> orderStatus = new List<TimelineItem>();
44
orderStatus.Add(new TimelineItem { Content = "#content-template" });

‎ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/cssclass.cs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
public ActionResult CssClass()
2+
{
3+
List<TimelineItem> cssClassItem = new List<TimelineItem>();
4+
cssClassItem.Add(new TimelineItem { Content = "Eat" });
5+
cssClassItem.Add(new TimelineItem { Content = "Code" });
6+
cssClassItem.Add(new TimelineItem { Content = "Repeat" });
7+
ViewBag.cssClassItem = cssClassItem;
8+
return View();
9+
}

‎ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/razor

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@using Syncfusion.EJ2.Layouts
2+
3+
<div id="container" style="height: 250px;">
4+
@Html.EJS().Timeline("timeline").Items(ViewBag.cssClassItem).Render()
5+
</div>
6+
7+
<style>
8+
.eat .e-dot,
9+
.eat.e-timeline-item.e-connector::after {
10+
background-color: aqua;
11+
border-color: aqua;
12+
}
13+
14+
.code .e-dot,
15+
.code.e-timeline-item.e-connector::after {
16+
background-color: blue;
17+
border-color: blue;
18+
}
19+
20+
.repeat .e-dot,
21+
.repeat.e-timeline-item.e-connector::after {
22+
background-color: yellow;
23+
border-color: yellow;
24+
}
25+
</style>

‎ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/tagHelper

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@using Syncfusion.EJ2.Layouts;
2+
3+
<div class="container" style="height: 250px">
4+
<ejs-timeline id="timeline">
5+
<e-timeline-items>
6+
<e-timeline-item content="Eat" cssClass='eat' ></e-timeline-item>
7+
<e-timeline-item content="Code" cssClass='code'></e-timeline-item>
8+
<e-timeline-item content="Repeat" cssClass='repeat'></e-timeline-item>
9+
</e-timeline-items>
10+
</ejs-timeline>
11+
</div>
12+
13+
<style>
14+
.eat .e-dot,
15+
.eat.e-timeline-item.e-connector::after {
16+
background-color: aqua;
17+
border-color: aqua;
18+
}
19+
20+
.code .e-dot,
21+
.code.e-timeline-item.e-connector::after {
22+
background-color: blue;
23+
border-color: blue;
24+
}
25+
26+
.repeat .e-dot,
27+
.repeat.e-timeline-item.e-connector::after {
28+
background-color: yellow;
29+
border-color: yellow;
30+
}
31+
</style>

‎ej2-asp-core-mvc/code-snippet/timeline/items/disabled/disabled.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
public ActionResult Demo()
1+
public ActionResult DisabledItem()
22
{
33
List<TimelineItem> disabledItem = new List<TimelineItem>();
44
disabledItem.Add(new TimelineItem { Content = "Eat" });

‎ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/dotitem.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
public ActionResult Demo()
1+
public ActionResult DotItem()
22
{
33
List<TimelineItem> dotItems = new List<TimelineItem>();
44
dotItems.Add(new TimelineItem { Content = "Default" });

‎ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/tagHelper

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<style>
1515
/* Provide the URL for the image here. */
1616
.e-dot.custom-image {
17-
background-image: url("./images/timeline/dot-image.png");
17+
background-image: url("https://ej2.syncfusion.com/demos/src/listview/images/margaret.png");
1818
}
1919

2020
.e-dot.custom-text::before {

‎ej2-asp-core-mvc/code-snippet/timeline/items/opposite-content/oppositecontent.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
public ActionResult Demo()
1+
public ActionResult OppositeContent()
22
{
33
List<TimelineItem> mealTimes = new List<TimelineItem>();
44
mealTimes.Add(new TimelineItem { Content = "Breakfast", OppositeContent = "8:00 AM" });

‎ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/events.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,6 @@ The Timeline control triggers the [created](https://help.syncfusion.com/cr/aspne
2222
{% highlight cshtml tabtitle="CSHTML" %}
2323
{% include code-snippet/timeline/events/created/tagHelper %}
2424
{% endhighlight %}
25-
{% highlight c# tabtitle="Separator.cs" %}
26-
{% include code-snippet/timeline/events/created/created.cs %}
27-
{% endhighlight %}
2825
{% endtabs %}
2926

3027
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -49,9 +46,6 @@ The Timeline control triggers the [beforeItemRender](https://help.syncfusion.com
4946
{% highlight cshtml tabtitle="CSHTML" %}
5047
{% include code-snippet/timeline/events/beforeItemRender/tagHelper %}
5148
{% endhighlight %}
52-
{% highlight c# tabtitle="Separator.cs" %}
53-
{% include code-snippet/timeline/events/beforeItemRender/beforeItemRender.cs %}
54-
{% endhighlight %}
5549
{% endtabs %}
5650

5751
{% elsif page.publishingplatform == "aspnet-mvc" %}

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

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,6 @@ You can define string content for the Timeline items.
2626
{% highlight cshtml tabtitle="CSHTML" %}
2727
{% include code-snippet/timeline/items/content/string-based/tagHelper %}
2828
{% endhighlight %}
29-
{% highlight c# tabtitle="Separator.cs" %}
30-
{% include code-snippet/timeline/items/content/string-based/stringbased.cs %}
31-
{% endhighlight %}
3229
{% endtabs %}
3330

3431
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -55,9 +52,6 @@ You can specify the [Template Content](https://help.syncfusion.com/cr/aspnetcore
5552
{% highlight cshtml tabtitle="CSHTML" %}
5653
{% include code-snippet/timeline/items/content/template-based/tagHelper %}
5754
{% endhighlight %}
58-
{% highlight c# tabtitle="Separator.cs" %}
59-
{% include code-snippet/timeline/items/content/template-based/templatebased.cs %}
60-
{% endhighlight %}
6155
{% endtabs %}
6256

6357
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -84,9 +78,6 @@ You can add additional information to each Timeline item, by using the [opposite
8478
{% highlight cshtml tabtitle="CSHTML" %}
8579
{% include code-snippet/timeline/items/opposite-content/tagHelper %}
8680
{% endhighlight %}
87-
{% highlight c# tabtitle="Separator.cs" %}
88-
{% include code-snippet/timeline/items/opposite-content/oppositecontent.cs %}
89-
{% endhighlight %}
9081
{% endtabs %}
9182

9283
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -125,9 +116,6 @@ You can display text for the Timeline items using the `dotCss` property, by addi
125116
{% highlight cshtml tabtitle="CSHTML" %}
126117
{% include code-snippet/timeline/items/dot-item/tagHelper %}
127118
{% endhighlight %}
128-
{% highlight c# tabtitle="Separator.cs" %}
129-
{% include code-snippet/timeline/items/dot-item/dotitem.cs %}
130-
{% endhighlight %}
131119
{% endtabs %}
132120

133121
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -154,9 +142,6 @@ You can use the [disabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfus
154142
{% highlight cshtml tabtitle="CSHTML" %}
155143
{% include code-snippet/timeline/items/disabled/tagHelper %}
156144
{% endhighlight %}
157-
{% highlight c# tabtitle="Separator.cs" %}
158-
{% include code-snippet/timeline/items/disabled/disabled.cs %}
159-
{% endhighlight %}
160145
{% endtabs %}
161146

162147
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -175,4 +160,26 @@ You can use the [disabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfus
175160

176161
## CSS class
177162

178-
The [cssClass](https://help.syncfusion.com/cr/aspnetcore-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.
163+
You can customize the appearance of the Timeline item by specifying a custom CSS class using the [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property.
164+
165+
{% if page.publishingplatform == "aspnet-core" %}
166+
167+
{% tabs %}
168+
{% highlight cshtml tabtitle="CSHTML" %}
169+
{% include code-snippet/timeline/items/cssClass/tagHelper %}
170+
{% endhighlight %}
171+
{% endtabs %}
172+
173+
{% elsif page.publishingplatform == "aspnet-mvc" %}
174+
175+
{% tabs %}
176+
{% highlight razor tabtitle="CSHTML" %}
177+
{% include code-snippet/timeline/items/cssClass/razor %}
178+
{% endhighlight %}
179+
{% highlight c# tabtitle="Separator.cs" %}
180+
{% include code-snippet/timeline/items/cssClass/cssClass.cs %}
181+
{% endhighlight %}
182+
{% endtabs %}
183+
{% endif %}
184+
185+
![CssClass items](images/cssClass.png)

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,6 @@ You can display the items one below the other vertically by setting the [orienta
2222
{% highlight cshtml tabtitle="CSHTML" %}
2323
{% include code-snippet/timeline/orientations/vertical/tagHelper %}
2424
{% endhighlight %}
25-
{% highlight c# tabtitle="Separator.cs" %}
26-
{% include code-snippet/timeline/orientations/vertical/vertical.cs %}
27-
{% endhighlight %}
2825
{% endtabs %}
2926

3027
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -51,9 +48,6 @@ In horizontal orientation, the items are displayed in a side-by-side manner by s
5148
{% highlight cshtml tabtitle="CSHTML" %}
5249
{% include code-snippet/timeline/orientations/horizontal/tagHelper %}
5350
{% endhighlight %}
54-
{% highlight c# tabtitle="Separator.cs" %}
55-
{% include code-snippet/timeline/orientations/horizontal/horizontal.cs %}
56-
{% endhighlight %}
5751
{% endtabs %}
5852

5953
{% elsif page.publishingplatform == "aspnet-mvc" %}

‎ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/template.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ The `template` context receives the following information:
2525
{% highlight cshtml tabtitle="CSHTML" %}
2626
{% include code-snippet/timeline/template/tagHelper %}
2727
{% endhighlight %}
28-
{% highlight c# tabtitle="Separator.cs" %}
29-
{% include code-snippet/timeline/template/template.cs %}
30-
{% endhighlight %}
3128
{% endtabs %}
3229

3330
{% elsif page.publishingplatform == "aspnet-mvc" %}

‎ej2-asp-core-mvc/timeline/customization.md

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,6 @@ You can define the styles applicable to the all the Timeline item connectors.
2424
{% highlight cshtml tabtitle="CSHTML" %}
2525
{% include code-snippet/timeline/customization/connector-common/tagHelper %}
2626
{% endhighlight %}
27-
{% highlight c# tabtitle="Separator.cs" %}
28-
{% include code-snippet/timeline/customization/connector-common/connectorcommon.cs %}
29-
{% endhighlight %}
3027
{% endtabs %}
3128

3229
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -53,9 +50,6 @@ You can also apply unique styles to individual connectors, to differentiate spec
5350
{% highlight cshtml tabtitle="CSHTML" %}
5451
{% include code-snippet/timeline/customization/connector-individual/tagHelper %}
5552
{% endhighlight %}
56-
{% highlight c# tabtitle="Separator.cs" %}
57-
{% include code-snippet/timeline/customization/connector-individual/connectorindividual.cs %}
58-
{% endhighlight %}
5953
{% endtabs %}
6054

6155
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -84,9 +78,6 @@ You can modify the color of the dots to highlight the specific Timeline items.
8478
{% highlight cshtml tabtitle="CSHTML" %}
8579
{% include code-snippet/timeline/customization/dot-color/tagHelper %}
8680
{% endhighlight %}
87-
{% highlight c# tabtitle="Separator.cs" %}
88-
{% include code-snippet/timeline/customization/dot-color/dotcolor.cs %}
89-
{% endhighlight %}
9081
{% endtabs %}
9182

9283
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -113,9 +104,6 @@ You can adjust the size of the dot to make it larger or smaller by using the `--
113104
{% highlight cshtml tabtitle="CSHTML" %}
114105
{% include code-snippet/timeline/customization/dot-size/tagHelper %}
115106
{% endhighlight %}
116-
{% highlight c# tabtitle="Separator.cs" %}
117-
{% include code-snippet/timeline/customization/dot-size/dotsize.cs %}
118-
{% endhighlight %}
119107
{% endtabs %}
120108

121109
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -142,9 +130,6 @@ You can add shadow effects to the Timeline dots to make it feel visually engagin
142130
{% highlight cshtml tabtitle="CSHTML" %}
143131
{% include code-snippet/timeline/customization/dot-shadow/tagHelper %}
144132
{% endhighlight %}
145-
{% highlight c# tabtitle="Separator.cs" %}
146-
{% include code-snippet/timeline/customization/dot-shadow/dotshadow.cs %}
147-
{% endhighlight %}
148133
{% endtabs %}
149134

150135
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -171,9 +156,6 @@ You can achieve the desired dot variant by customizing the border, outline and b
171156
{% highlight cshtml tabtitle="CSHTML" %}
172157
{% include code-snippet/timeline/customization/dot-variant/tagHelper %}
173158
{% endhighlight %}
174-
{% highlight c# tabtitle="Separator.cs" %}
175-
{% include code-snippet/timeline/customization/dot-variant/dotvariant.cs %}
176-
{% endhighlight %}
177159
{% endtabs %}
178160

179161
{% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -192,17 +174,14 @@ You can achieve the desired dot variant by customizing the border, outline and b
192174

193175
### Dot outline
194176

195-
By adding the `e-outline` class to the Timeline `cssClass` property it enables the dots to have an outline state.
177+
By adding the `e-outline` class to the Timeline [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property it enables the dots to have an outline state.
196178

197179
{% if page.publishingplatform == "aspnet-core" %}
198180

199181
{% tabs %}
200182
{% highlight cshtml tabtitle="CSHTML" %}
201183
{% include code-snippet/timeline/customization/dot-outline/tagHelper %}
202184
{% endhighlight %}
203-
{% highlight c# tabtitle="Separator.cs" %}
204-
{% include code-snippet/timeline/customization/dot-outline/dot-outline.cs %}
205-
{% endhighlight %}
206185
{% endtabs %}
207186

208187
{% elsif page.publishingplatform == "aspnet-mvc" %}

‎ej2-asp-core-mvc/timeline/images/cssClass.png

4.61 KB
Loading

0 commit comments

Comments
 (0)