Skip to content

Commit 5c1dc68

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 5903704 commit 5c1dc68

File tree

13 files changed

+725
-8
lines changed

13 files changed

+725
-8
lines changed

‎docs-aspnet-core/_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,8 @@ navigation:
202202
title: "DateInput"
203203
"*datepicker":
204204
title: "DatePicker"
205+
"*daterangepicker":
206+
title: "DateRangePicker"
205207
"*datetimepicker":
206208
title: "DateTimePicker"
207209
"*dialog":
@@ -257,6 +259,8 @@ navigation:
257259
title: "PivotGrid"
258260
"*scheduler":
259261
title: "Scheduler"
262+
"*scrollview":
263+
title: "ScrollView"
260264
"*slider":
261265
title: "Slider"
262266
"*sortable":

‎docs-aspnet-core/html-helpers/editors/daterangepicker/overview.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Overview
3+
page_title: DateRangePicker | Telerik UI for ASP.NET Core HtmlHelpers
4+
description: "Learn the basics when working with the Kendo UI DateRangePicker HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /aspnet-core/helpers/html-helpers/daterangepicker
6+
slug: htmlhelpers_daterangepicker_aspnetcore
7+
position: 1
8+
---
9+
10+
# DateRangePicker HtmlHelper Overview
11+
12+
The DateRangePicker HtmlHelper extension is a server-side wrapper for the [Kendo UI DateRangePicker](https://demos.telerik.com/kendo-ui/daterangepicker/index) widget.
13+
14+
For more information on the HtmlHelper, refer to the article on the [DateRangePicker HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/daterangepicker/overview).
15+
16+
## Configuration
17+
18+
The following example demonstrates the basic configuration for the DateRangePicker.
19+
20+
###### Example
21+
22+
```
23+
@(Html.Kendo().DateRangePicker()
24+
.Name("daterangepicker") // The name of the DateRangePicker is mandatory. It specifies the "id" attribute of the widget.
25+
.Min(new DateTime(1900, 1, 1)) // Sets the min date of the DateRangePicker.
26+
.Max(new DateTime(2099, 12, 31)) // Sets the min date of the DateRangePicker.
27+
.Range(r => r.Start(DateTime.Now).End(DateTime.Now.AddDays(10))) // Sets the range of the DateRangePicker.
28+
)
29+
```
30+
31+
## Event Handling
32+
33+
You can subscribe to all DateRangePicker [events](http://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker#events).
34+
35+
The following example demonstrates how to subscribe to events by a handler name.
36+
37+
###### Example
38+
39+
```
40+
@(Html.Kendo().DateRangePicker()
41+
.Name("daterangepicker")
42+
.Events(e => e
43+
.Open("daterangepicker_open")
44+
.Close("daterangepicker_close")
45+
.Change("daterangepicker_change")
46+
)
47+
)
48+
<script>
49+
function daterangepicker_open() {
50+
//Handle the open event
51+
}
52+
53+
function daterangepicker_close() {
54+
//Handle the close event
55+
}
56+
57+
function daterangepicker_change() {
58+
//Handle the change event
59+
}
60+
</script>
61+
```
62+
63+
## Reference
64+
65+
### Existing Instances
66+
67+
To reference an existing Kendo UI DateRangePicker instance, use the [`jQuery.data()`](http://api.jquery.com/jQuery.data/) method. Once a reference has been established, use the [DateRangePicker API](http://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker#methods) to control its behavior.
68+
69+
The following example demonstrates how to access an existing DateRangePicker instance.
70+
71+
###### Example
72+
73+
//Place this after your Kendo UI DateRangePicker for ASP.NET Core declaration.
74+
<script>
75+
$(function() {
76+
//Notice that the Name() of the DateRangePicker is used to get its client-side instance.
77+
var daterangepicker = $("#daterangepicker").data("kendoDateRangePicker");
78+
});
79+
</script>
80+
81+
## See Also
82+
83+
* [Overview of the JavaScript Kendo UI DateRangePicker Widget](http://docs.telerik.com/kendo-ui/controls/editors/daterangepicker/overview)
84+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
85+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
86+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI]({% slug gettingstartedcli_aspnetmvc6_aspnetmvc %})
87+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/html-helpers/media/scrollview/overview.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
title: Overview
3+
page_title: ScrollView | Telerik UI for ASP.NET Core HtmlHelpers
4+
description: "Learn the basics when working with the Kendo UI ScrollView for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_scrollview_aspnetcore
6+
---
7+
8+
# ScrollView Overview
9+
10+
The ScrollView HtmlHelper extension is a server-side wrapper for the [Kendo UI ScrollView](https://demos.telerik.com/kendo-ui/scrollview/index) widget.
11+
12+
It displays a horizontal collection of content or image views with built-in navigation between them. It can be scrolled via dragging, gestures, arrow click or page click or tap.
13+
14+
## Key Features
15+
16+
The Kendo UI ScrollView widget:
17+
18+
* Can be initialized with HTML only.
19+
* Features data source binding.
20+
* Has a customizable template.
21+
* Provides a built-in pager.
22+
* Allows you to scroll to a specific page programmatically via its API methods.
23+
* Has adjustable bounce effects and scroll velocity.
24+
* Allows you to capture user interactions by handling the events that are triggered by the widget.
25+
26+
## Getting Started
27+
28+
There are two types of initialization that the Kendo UI ScrollView features - from HTML and via data source with a template. To initialize the Kendo UI ScrollView from HTML use its `Items()` method. Then add HTML elements for each page as part of the content of the Kendo UI ScrollView items.
29+
30+
### Initialize the ScrollView from HTML
31+
32+
The following example demonstrates how to initialize the Kendo UI ScrollView from HTML elements.
33+
34+
###### Example
35+
36+
```
37+
<style>
38+
h1 {
39+
margin-top: 30%;
40+
text-align:center;
41+
}
42+
</style>
43+
@(Html.Kendo().ScrollView()
44+
.Name("scrollView")
45+
.ContentHeight("100%")
46+
.Items(x =>
47+
{
48+
x.Add().Content("<h1>One</h1>");
49+
x.Add().Content("<h1>Two</h1>");
50+
x.Add().Content("<h1>Three</h1>");
51+
})
52+
.HtmlAttributes(new { style = "height:748px; width:1022px; max-width: 100%;" })
53+
)
54+
```
55+
56+
### Initialize the ScrollView with a Data Source and a Template
57+
58+
To initialize the Kendo UI ScrollView with a Data Source and a template, create a [`Kendo UI Template`](https://docs.telerik.com/kendo-ui/framework/templates/overview) and use the `TemplateId()` method to pass it and provide a DataSource. Ensure that the template caters for the `pageSize` of the data source. If `serverPaging` is enabled, the Kendo UI ScrollView will request the data in advance so it becomes available before it is required, thus improving user experience. The Kendo UI ScrollView uses virtualization when it is bound to a data source and it only has three pages at all times - the current, the previous and the next.
59+
60+
The following example demonstrates the Kendo UI ScrollView with a Data Source.
61+
62+
###### Example
63+
64+
```
65+
@(Html.Kendo().ScrollView()
66+
Name("scrollView")
67+
ContentHeight("100%")
68+
TemplateId("employee-template")
69+
DataSource(d =>
70+
d.Custom()
71+
.Type("odata")
72+
.Transport(t => t.Read(r => r.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees")))
73+
.ServerPaging(true)
74+
.PageSize(1))
75+
HtmlAttributes(new { style = "height:600px; width:890px; max-width: 100%;" })
76+
)
77+
<script id="employee-template" type="text/x-kendo-template">
78+
<div class="template">
79+
<h1>
80+
<span>#:TitleOfCourtesy# #: FirstName# #: LastName# </span>
81+
</h1>
82+
<h3>Title: #: Title #</h3>
83+
<div class="notes"><em>#:Notes#</em></div>
84+
<div class="country">
85+
#: Country #
86+
</div>
87+
</div>
88+
</script>
89+
```
90+
91+
## See Also
92+
93+
* [ScrollView TagHelper for ASP.NET Core]({% slug taghelpers_scrollview_aspnetcore %})
94+
* [ScrollView HtmlHelper for ASP.NET MVC](https://docs.telerik.com/aspnet-mvc/helpers/scrollview/overview)
95+
* [ScrollView Official Demos](https://demos.telerik.com/aspnet-core/scrollview/index)
96+
* [ScrollView JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview)
97+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
98+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
99+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI]({% slug gettingstartedcli_aspnetmvc6_aspnetmvc %})
100+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/tag-helpers/media/scrollview/overview.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: Overview
3+
page_title: ScrollView | Telerik UI for ASP.NET Core TagHelpers
4+
description: "Learn the basics when working with the Kendo UI ScrollView for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: taghelpers_scrollview_aspnetcore
6+
---
7+
8+
# ScrollView Overview
9+
10+
The ScrollView TagHelper helps you configure the [Kendo UI ScrollView](https://demos.telerik.com/kendo-ui/scrollview/index) widget in ASP.NET Core applications.
11+
12+
It displays a horizontal collection of content or image views with built-in navigation between them. It can be scrolled via dragging, gestures, arrow click or page click or tap.
13+
14+
## Key Features
15+
16+
The Kendo UI ScrollView widget:
17+
18+
* Can be initialized with HTML only.
19+
* Features data source binding.
20+
* Has a customizable template.
21+
* Provides a built-in pager.
22+
* Allows you to scroll to a specific page programmatically via its API methods.
23+
* Has adjustable bounce effects and scroll velocity.
24+
* Allows you to capture user interactions by handling the events that are triggered by the widget.
25+
26+
## Getting Started
27+
28+
There are two types of initialization that the Kendo UI ScrollView features - from HTML and via data source with a template. To initialize the Kendo UI ScrollView from HTML use its `items` tag and define the content for each page.
29+
30+
### Initialize the ScrollView from HTML
31+
32+
The following example demonstrates how to define the Kendo UI ScrollView by using a tag helper.
33+
34+
###### Example
35+
36+
```
37+
<kendo-scrollview name="scrollView" content-height="100%" template-id="scrollview-template" style="height:600px; width:890px; max-width: 100%;">
38+
<items>
39+
<scrollview-item>
40+
<content><h1>One</h1></content>
41+
</scrollview-item>
42+
<scrollview-item>
43+
<content><h1>Two</h1></content>
44+
</scrollview-item>
45+
<scrollview-item>
46+
<content><h1>Three</h1></content>
47+
</scrollview-item>
48+
</items>
49+
</kendo-scrollview>
50+
<style>
51+
h1 {
52+
margin-top: 30%;
53+
text-align:center;
54+
}
55+
</style>
56+
```
57+
58+
### Initialize the ScrollView with a Data Source and a Template
59+
60+
To initialize the Kendo UI ScrollView with a Data Source and a template, create a [`Kendo UI Template`](https://docs.telerik.com/kendo-ui/framework/templates/overview) and use the `template-id` property to pass itand provide a DataSource. Ensure that the template caters for the `pageSize` of the data source. If `serverPaging` is enabled, the Kendo UI ScrollView will request the data in advance so it becomes available before it is required, thus improving user experience. The Kendo UI ScrollView uses virtualization when it is bound to a data source and it only has three pages at all times - the current, the previous and the next.
61+
62+
The following example demonstrates the Kendo UI ScrollView with a Data Source.
63+
64+
###### Example
65+
66+
```
67+
<kendo-scrollview name="scrollView" content-height="100%" template-id="scrollview-template" style="height:600px; width:890px; max-width: 100%;">
68+
<datasource custom-type="odata" page-size="3" server-paging="true">
69+
<transport>
70+
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products" />
71+
</transport>
72+
</datasource>
73+
</kendo-scrollview>
74+
<script id="scrollview-template" type="text/x-kendo-template">
75+
<div class="img-wrapper">
76+
# for (var i = 0; i < data.length; i++) { #
77+
<div>
78+
<div style="width: 140px; height: 140px; background-image: #=setBackground(data[i].ProductID)#; background-repeat:no-repeat; background-size: cover;"></div>
79+
<p>#= data[i].ProductName #</p>
80+
</div>
81+
# } #
82+
</div>
83+
</script>
84+
```
85+
86+
## See Also
87+
88+
* [ScrollView HtmlHelper for ASP.NET Core]({% slug htmlhelpers_scrollview_aspnetcore %})
89+
* [ScrollView Official Demos](https://demos.telerik.com/aspnet-core/scrollview/tag-helper)
90+
* [ScrollView JavaScript API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview)
91+
* [Overview of the UI for ASP.NET Core TagHelpers]({% slug taghelpers_aspnetmvc6_aspnetmvc %})
92+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
93+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
94+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI]({% slug gettingstartedcli_aspnetmvc6_aspnetmvc %})
95+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-mvc/_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ navigation:
6767
title: "DateInput"
6868
"helpers/datepicker":
6969
title: "DatePicker"
70+
"helpers/daterangepicker":
71+
title: "DateRangePicker"
7072
"helpers/datetimepicker":
7173
title: "DateTimePicker"
7274
"helpers/diagram":
@@ -191,6 +193,8 @@ navigation:
191193
title: "RadioButton"
192194
"helpers/scheduler":
193195
title: "Scheduler"
196+
"helpers/scrollview":
197+
title: "ScrollView"
194198
"helpers/slider":
195199
title: "Slider"
196200
"helpers/sortable":

0 commit comments

Comments
 (0)