Skip to content

Commit bd906cd

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent e097292 commit bd906cd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+4515
-27
lines changed

‎docs-aspnet-core/_config.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,8 @@ navigation:
422422
title: "StockChart"
423423
"*tabstrip":
424424
title: "TabStrip"
425+
"*timeline":
426+
title: "TimeLine"
425427
"*timepicker":
426428
title: "TimePicker"
427429
"*tooltip":

‎docs-aspnet-core/html-helpers/navigation/timeline/actions.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: Actions
3+
page_title: TimeLine Actions | Telerik UI for ASP.NET Core HTML Helpers
4+
description: "Action links in the Telerik UI TimeLine HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: actions_htmlhelpers_timeline_aspnetcore
6+
position: 10
7+
---
8+
9+
# Actions
10+
11+
The TimeLine can render links (`<a>` tags) for the items from the `Actions` collection in its data source, so the user can navigate to the specific pages.
12+
13+
The `href` attribute of an action will be set to the value of the `src` field of the action literal, and the text will come from the `text` field.
14+
15+
The example below shows how you can a few actions actions for one event.
16+
17+
```Razor
18+
@(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
19+
.Name("Timeline")
20+
.DataDateField("EventDate")
21+
.DataDescriptionField("Description")
22+
.DataSubTitleField("Subtitle")
23+
.DataTitleField("Title")
24+
.DataActionsField("Actions")
25+
.Orientation("horizontal")
26+
.DataSource(dt => dt.Read("GetTimeLineData", "Timeline"))
27+
)
28+
```
29+
```Controller
30+
public partial class TimeLine : BaseController
31+
{
32+
public JsonResult GetTimeLineData()
33+
{
34+
List<TimelineEventModel> events = new List<TimelineEventModel>();
35+
36+
events.Add(new TimelineEventModel() {
37+
Title = "Summer trip in Europe",
38+
Subtitle = "May 15, 2015",
39+
Description = "Lorem ipsum dolor sit amet",
40+
EventDate = new System.DateTime(2015, 6, 25),
41+
Actions = new List<TimelineEventActionModel>() {
42+
new TimelineEventActionModel() { text = "More info about Barcelona", url="https://en.wikipedia.org/wiki/Barcelona" },
43+
new TimelineEventActionModel() { text = "More info about Malta", url="https://en.wikipedia.org/wiki/Malta" }
44+
}
45+
});
46+
47+
events.Add(new TimelineEventModel()
48+
{
49+
Title = "United States East Coast Tour",
50+
Subtitle = "Feb 27, 2018",
51+
Description = "The second event description.",
52+
EventDate = new System.DateTime(2018, 1, 27),
53+
Actions = new List<TimelineEventActionModel>() {
54+
new TimelineEventActionModel() { text = "More info about New York City", url="https://en.wikipedia.org/wiki/New_York_City" }
55+
}
56+
});
57+
58+
return Json(events);
59+
}
60+
}
61+
```
62+
```Model
63+
public class TimelineEventModel
64+
{
65+
public string Title { get; set; }
66+
public string Subtitle { get; set; }
67+
public string Description { get; set; }
68+
69+
public DateTime EventDate { get; set; }
70+
71+
public List<TimelineEventActionModel> Actions { get; set; }
72+
}
73+
74+
public class TimelineEventActionModel
75+
{
76+
public string text { get; set; } // this field name must be "text"
77+
public string url { get; set; } // this field name must be "url"
78+
}
79+
```
80+
81+
## See Also
82+
83+
84+
* [Basic Usage of the TimeLine (Demo)](https://demos.telerik.com/aspnet-core/timeline/index)
85+

‎docs-aspnet-core/html-helpers/navigation/timeline/images.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: Images
3+
page_title: TimeLine Images | Telerik UI for ASP.NET Core HTML Helpers
4+
description: "Adding images in the Telerik UI TimeLine HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: images_htmlhelpers_timeline_aspnetcore
6+
position: 15
7+
---
8+
9+
# Images
10+
11+
The TimeLine can render an `<img />` tag for the first item from the `Images` collection in its data source. Its `src` attribute will be set to the value of the `src` field of the image literal.
12+
13+
The example below shows how you can add an image for the events.
14+
15+
>tip If you want to show more than one image, you need to customize the [template of the TimeLine](templates).
16+
17+
18+
```Razor
19+
@(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
20+
.Name("Timeline")
21+
.DataDateField("EventDate")
22+
.DataDescriptionField("Description")
23+
.DataSubTitleField("Subtitle")
24+
.DataTitleField("Title")
25+
.DataImagesField("Images")
26+
.Orientation("vertical")
27+
.DataSource(dt => dt.Read("GetTimeLineData", "Timeline"))
28+
)
29+
```
30+
```Controller
31+
public partial class TimeLine : BaseController
32+
{
33+
public JsonResult GetTimeLineData()
34+
{
35+
List<TimelineEventModel> events = new List<TimelineEventModel>();
36+
37+
events.Add(new TimelineEventModel() {
38+
Title = "Summer trip in Europe",
39+
Subtitle = "May 15, 2015",
40+
Description = "Lorem ipsum dolor sit amet",
41+
EventDate = new System.DateTime(2015, 5, 25),
42+
Images = new List<TimelineEventImageModel>() {
43+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&amp;height=500" }
44+
}
45+
});
46+
47+
events.Add(new TimelineEventModel()
48+
{
49+
Title = "United States East Coast Tour",
50+
Subtitle = "Feb 27, 2018",
51+
Description = "The second event description.",
52+
EventDate = new System.DateTime(2018, 2, 27),
53+
Images = new List<TimelineEventImageModel>() {
54+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&amp;height=500" }
55+
}
56+
});
57+
58+
return Json(events);
59+
}
60+
}
61+
```
62+
```Model
63+
public class TimelineEventModel
64+
{
65+
public string Title { get; set; }
66+
public string Subtitle { get; set; }
67+
public string Description { get; set; }
68+
69+
public DateTime EventDate { get; set; }
70+
71+
public List<TimelineEventImageModel> Images { get; set; }
72+
}
73+
74+
public class TimelineEventImageModel
75+
{
76+
public string src { get; set; } // this field name must be "src"
77+
}
78+
```
79+
80+
81+
## See Also
82+
83+
84+
* [Templates in the TimeLine]({% slug templates_htmlhelpers_timeline_aspnetcore %}).
85+
* [Basic Usage of the TimeLine (Demo)](https://demos.telerik.com/aspnet-core/timeline/index)

‎docs-aspnet-core/html-helpers/navigation/timeline/images/timeline-overview.png‎

18.9 KB
Loading

‎docs-aspnet-core/html-helpers/navigation/timeline/orientation.md‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
---
2+
title: Orientation
3+
page_title: TimeLine Orientation | Telerik UI for ASP.NET Core HTML Helpers
4+
description: "See how to control the orientation of the Telerik UI TimeLine HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: orientation_htmlhelpers_timeline_aspnetcore
6+
position: 5
7+
---
8+
9+
# Orientation
10+
11+
The TimeLine can render its events in a [vertical](#vertical) or [horizontal](#horizontal) list.
12+
13+
## Vertical
14+
15+
By default, the timeline is vertical, with events arranged on one side of the axis.
16+
17+
You can have the events render alternatingly on both sides of the axis by adding its `.AlternatingMode()` option.
18+
19+
If you add the `.CollapsibleEvents()` option, all events will start out collapsed (by default, all events are expanded). The user can then expand a particular event to see more than its title and subtitle.
20+
21+
```Razor
22+
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
23+
.Name("Timeline")
24+
.Orientation("vertical") // defines the layout of the widget
25+
.AlternatingMode() // renders the events on both sides of the axis in vertical mode
26+
.CollapsibleEvents() // starts all events collapsed in vertical mode
27+
.DataDateField("EventDate")
28+
.DataDescriptionField("Description")
29+
.DataSubTitleField("Subtitle")
30+
.DataTitleField("Title")
31+
.DataImagesField("Images")
32+
.DataActionsField("Actions")
33+
.DataSource(dt => dt.Read("GetTimeLineData", "TimeLine"))
34+
)
35+
```
36+
```Controller
37+
public partial class TimeLine : BaseController
38+
{
39+
public JsonResult GetTimeLineData()
40+
{
41+
List<TimelineEventModel> events = new List<TimelineEventModel>();
42+
43+
events.Add(new TimelineEventModel() {
44+
Title = "Barcelona \u0026 Tenerife",
45+
Subtitle = "May 15, 2015",
46+
Description = "First event description.",
47+
EventDate = new System.DateTime(2015, 4, 15),
48+
Images = new List<TimelineEventImageModel>() {
49+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&amp;height=500" }
50+
},
51+
Actions = new List<TimelineEventActionModel>() {
52+
new TimelineEventActionModel() { text = "More info about Barcelona", url="https://en.wikipedia.org/wiki/Barcelona" }
53+
}
54+
});
55+
56+
events.Add(new TimelineEventModel()
57+
{
58+
Title = "United States East Coast Tour",
59+
Subtitle = "Feb 27, 2018",
60+
Description = "The second event description.",
61+
EventDate = new System.DateTime(2018, 1, 27),
62+
Images = new List<TimelineEventImageModel>() {
63+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&amp;height=500" }
64+
},
65+
Actions = new List<TimelineEventActionModel>() {
66+
new TimelineEventActionModel() { text = "More info about New York City", url="https://en.wikipedia.org/wiki/New_York_City" }
67+
}
68+
});
69+
70+
events.Add(new TimelineEventModel()
71+
{
72+
Title = "Malta, a Country of Кnights",
73+
Subtitle = "My second trip this year",
74+
Description = "Third event description.",
75+
EventDate = new System.DateTime(2015, 5, 25),
76+
Images = new List<TimelineEventImageModel>() {
77+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&amp;height=500" }
78+
},
79+
Actions = new List<TimelineEventActionModel>() {
80+
new TimelineEventActionModel() { text = "More info about Malta", url="https://en.wikipedia.org/wiki/Malta" }
81+
}
82+
});
83+
84+
return Json(events);
85+
}
86+
}
87+
```
88+
```Model
89+
public class TimelineEventModel
90+
{
91+
public string Title { get; set; }
92+
public string Subtitle { get; set; }
93+
public string Description { get; set; }
94+
95+
public DateTime EventDate { get; set; }
96+
97+
public List<TimelineEventImageModel> Images { get; set; }
98+
public List<TimelineEventActionModel> Actions { get; set; }
99+
}
100+
101+
public class TimelineEventImageModel
102+
{
103+
public string src { get; set; } // this field name must be "src"
104+
}
105+
public class TimelineEventActionModel
106+
{
107+
public string text { get; set; } // this field name must be "text"
108+
public string url { get; set; } // this field name must be "url"
109+
}
110+
```
111+
112+
## Horizontal
113+
114+
To use the horizontal rendering, set the `.Orientation("horizontal")` option.
115+
116+
In the horizontal mode, the timeline renders buttons the user can click or tap to navigate between periods. There is always one rendered event below the time axis, and the user can select another to reveal its details.
117+
118+
The horizontal mode renders the event details on demand (only when they are selected), and is responsive (renders as many of the events as there is room on the axis for).
119+
120+
Alternating rendering and collapsing is not available for the events in this mode.
121+
122+
```Razor
123+
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
124+
.Name("Timeline")
125+
.Orientation("horizontal") // defines the layout of the widget
126+
.DataDateField("EventDate")
127+
.DataDescriptionField("Description")
128+
.DataSubTitleField("Subtitle")
129+
.DataTitleField("Title")
130+
.DataImagesField("Images")
131+
.DataActionsField("Actions")
132+
.DataSource(dt => dt.Read("GetTimeLineData", "TimeLine"))
133+
)
134+
```
135+
```Controller
136+
public partial class TimeLine : BaseController
137+
{
138+
public JsonResult GetTimeLineData()
139+
{
140+
List<TimelineEventModel> events = new List<TimelineEventModel>();
141+
142+
events.Add(new TimelineEventModel() {
143+
Title = "Barcelona \u0026 Tenerife",
144+
Subtitle = "May 15, 2015",
145+
Description = "First event description.",
146+
EventDate = new System.DateTime(2015, 4, 15),
147+
Images = new List<TimelineEventImageModel>() {
148+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&amp;height=500" }
149+
},
150+
Actions = new List<TimelineEventActionModel>() {
151+
new TimelineEventActionModel() { text = "More info about Barcelona", url="https://en.wikipedia.org/wiki/Barcelona" }
152+
}
153+
});
154+
155+
events.Add(new TimelineEventModel()
156+
{
157+
Title = "United States East Coast Tour",
158+
Subtitle = "Feb 27, 2018",
159+
Description = "The second event description.",
160+
EventDate = new System.DateTime(2018, 1, 27),
161+
Images = new List<TimelineEventImageModel>() {
162+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&amp;height=500" }
163+
},
164+
Actions = new List<TimelineEventActionModel>() {
165+
new TimelineEventActionModel() { text = "More info about New York City", url="https://en.wikipedia.org/wiki/New_York_City" }
166+
}
167+
});
168+
169+
events.Add(new TimelineEventModel()
170+
{
171+
Title = "Malta, a Country of Кnights",
172+
Subtitle = "My second trip this year",
173+
Description = "Third event description.",
174+
EventDate = new System.DateTime(2015, 5, 25),
175+
Images = new List<TimelineEventImageModel>() {
176+
new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&amp;height=500" }
177+
},
178+
Actions = new List<TimelineEventActionModel>() {
179+
new TimelineEventActionModel() { text = "More info about Malta", url="https://en.wikipedia.org/wiki/Malta" }
180+
}
181+
});
182+
183+
return Json(events);
184+
}
185+
}
186+
```
187+
```Model
188+
public class TimelineEventModel
189+
{
190+
public string Title { get; set; }
191+
public string Subtitle { get; set; }
192+
public string Description { get; set; }
193+
194+
public DateTime EventDate { get; set; }
195+
196+
public List<TimelineEventImageModel> Images { get; set; }
197+
public List<TimelineEventActionModel> Actions { get; set; }
198+
}
199+
200+
public class TimelineEventImageModel
201+
{
202+
public string src { get; set; } // this field name must be "src"
203+
}
204+
public class TimelineEventActionModel
205+
{
206+
public string text { get; set; } // this field name must be "text"
207+
public string url { get; set; } // this field name must be "url"
208+
}
209+
```
210+
211+
## See Also
212+
213+
* [Horizontal Orientation of the TimeLine (Demo)](https://demos.telerik.com/aspnet-core/timeline/horizontal)
214+
215+

0 commit comments

Comments
 (0)