Skip to content

Commit b248812

Browse files
author
User Jenkins
committed
Sync with Kendo UI Professional
1 parent eaa2137 commit b248812

File tree

6 files changed

+164
-0
lines changed

6 files changed

+164
-0
lines changed

‎docs-aspnet/html-helpers/data-management/listview/binding.md‎ renamed to ‎docs-aspnet/html-helpers/data-management/listview/binding/ajax-binding.md‎

File renamed without changes.

‎docs-aspnet/html-helpers/layout/badge/overview.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,50 @@ With the badge you can customize the content using templates.
5050
.Appearance("rectangle"))
5151
</a>
5252

53+
## Using as a label
54+
55+
You can integrate the Badge into other UI components. The following example demonstrates how to use it as a label in Grid client column templates.
56+
57+
```C#
58+
@(Html.Kendo().Grid<OrderViewModel>()
59+
.Name("grid")
60+
.Columns(columns => {
61+
columns.Bound("OrderID").HtmlAttributes(new { @class = "templateCell" }).ClientTemplateId("orderTemplate");
62+
})
63+
.Events(ev => ev.DataBound("initBadges"))
64+
.DataSource(dataSource => dataSource
65+
.Ajax()
66+
.Read(read => read.Action("Orders_Read", "Grid"))
67+
)
68+
)
69+
70+
<script type="kendo-template" id="orderTemplate">
71+
#if(OrderID <= 10){#
72+
@(Html.Kendo().Badge()
73+
.Name("flag#=OrderID#")
74+
.ThemeColor(BadgeColor.Success)
75+
.Text("New")
76+
.ToClientTemplate()
77+
)
78+
#}#
79+
#if(OrderID > 10){#
80+
@(Html.Kendo().Badge()
81+
.Name("flag#=OrderID#")
82+
.ThemeColor(BadgeColor.Error)
83+
.Text("Old")
84+
.ToClientTemplate()
85+
)
86+
#}#
87+
</script>
88+
```
89+
```JavaScript
90+
function initBadges(e) {
91+
$(".templateCell").each(function(){
92+
eval($(this).children("script").last().html());
93+
});
94+
}
95+
```
96+
5397
## Referencing Existing Instances
5498

5599
You can access an existing Button instance by using the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) method which gets executed by the jQuery object of the originating element. Once the reference is established, use the [Badge client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/badge#methods) to control its behavior.

‎docs-aspnet/html-helpers/scheduling/calendar/globalization/localization.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Localization
3+
page_title: Localization
4+
description: "Get started with the Telerik UI Calendar for {{ site.framework }} and translate its messages for different culture locales."
5+
slug: localization_calendar_aspnetcore
6+
position: 2
7+
---
8+
9+
# Localization
10+
11+
The Calendar provides options for localizing its user interface by utilizing its [`Culture`](/api/Kendo.Mvc.UI.Fluent/CalendarBuilder#culturesystemstring) property.
12+
13+
To enable the desired culture, add a reference to the script file before the Calendar is initialized and include the desired culture in the settings of the helper.
14+
15+
```
16+
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/cultures/kendo.culture.de-DE.min.js"></script>
17+
@(Html.Kendo().Calendar()
18+
.Name("calendar")
19+
.Culture("de-DE")
20+
)
21+
```
22+
23+
## See Also
24+
25+
* [Server-Side API](/api/calendar)

‎docs-aspnet/html-helpers/scheduling/calendar/globalization/overview.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: Overview
3+
page_title: Globalization
4+
description: "Get started with the Telerik UI Calendar for {{ site.framework }} and learn about the globalization options it supports."
5+
slug: globalization_calendar_aspnetcore
6+
position: 1
7+
---
8+
9+
# Calendar Globalization
10+
11+
The globalization process combines the translation of component messages (localization) with adapting them to specific cultures (internationalization and right-to-left support).
12+
13+
The globalization functionality of the Calendar is enabled through:
14+
* [Localization of messages]({% slug localization_calendar_aspnetcore %})
15+
* [Right-to-left support]({% slug rtl_calendar_aspnetcore %})
16+
17+
{% if site.has_cta_panels == true %}
18+
{% include cta-panel-introduction.html %}
19+
{% endif %}
20+
21+
## See Also
22+
23+
* [Server-Side API](/api/calendar)
24+
* [Globalization by the {{ site.framework }} Calendar (demo)](https://demos.telerik.com/{{ site.platform }}/calendar/globalization)
25+

‎docs-aspnet/html-helpers/scheduling/calendar/globalization/rtl-support.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: RTL Support
3+
page_title: Calendar Right-to-Left Support
4+
description: "Get started with the Telerik UI Calendar for {{ site.framework }} and learn about the RTL supports it provides."
5+
slug: rtl_calendar_aspnetcore
6+
position: 3
7+
---
8+
9+
# Right-to-Left Support
10+
11+
Right-to-left (RTL) support reflects the ability of a UI component to render its content in a right-to-left direction for right-to-left languages, such as Arabic, Hebrew, Chinese, or Japanese.
12+
13+
For more information, refer to:
14+
* [Demo of the RTL support in the {{ site.framework }} Calendar (demo)](https://demos.telerik.com/{{ site.platform }}/calendar/right-to-left-support)
15+
* [RTL support in {{ site.product }}]({% slug overview_rtlsupport_core %})
16+
17+
## See Also
18+
19+
* [RTL support by the {{ site.framework }} Calendar (demo)](https://demos.telerik.com/{{ site.platform }}/calendar/right-to-left-support)
20+
* [Globalization in {{ site.product }}]({% slug overview_globalization_core %})
21+
* [RTL support in {{ site.product }}]({% slug overview_rtlsupport_core %})

‎docs-aspnet/tag-helpers/editors/daterangepicker/overview.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn the basics when working with the Telerik UI DateRangePicker TagHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /helpers/html-helpers/daterangepicker, /helpers/editors/daterangepicker/overview
6+
slug: taghelpers_daterangepicker_aspnetcore
7+
position: 1
8+
---
9+
10+
# DateRangePicker TagHelper Overview
11+
12+
The Telerik UI DateRangePicker TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI DateRangePicker widget.
13+
14+
The DateRangePicker allows users to select a date range from a calendar or through a direct input. It is a container that holds start and end date inputs. The helper supports custom templates for its `month` view, configuration options for minimum and maximum dates, a start view, and navigation depth.
15+
16+
17+
* [Demo page for the DateRangePicker](https://demos.telerik.com/aspnet-core/daterangepicker/tag-helper)
18+
19+
## Initializing the DateRangePicker
20+
21+
The following example demonstrates how to define the DateRangePicker by using the DateRangePicker TagHelper.
22+
23+
<kendo-daterangepicker name='daterangepicker'></kendo-daterangepicker>
24+
25+
## Basic Configuration
26+
27+
The DateRangePicker TagHelper configuration options are passed as attributes of the tag.
28+
29+
```cshtml
30+
31+
@(Html.Kendo().DateRangePicker()
32+
.Name("daterangepicker") // The name of the DateRangePicker is mandatory. It specifies the "id" attribute of the DateRangePicker.
33+
.Min(new DateTime(1900, 1, 1)) // Sets the min date of the DateRangePicker.
34+
.Max(new DateTime(2099, 12, 31)) // Sets the min date of the DateRangePicker.
35+
.Format("dd/MM/yyyy")
36+
.Range(r => r.Start(DateTime.Now).End(DateTime.Now.AddDays(10))) // Sets the range of the DateRangePicker.
37+
)
38+
```
39+
```tagHelper
40+
41+
<kendo-daterangepicker name="daterangepicker" min="new DateTime(1900, 1, 1)" max="new DateTime(2099, 12, 31)" format="dd/MM/yyyy">
42+
<range start="DateTime.Now" end="DateTime.Now.AddDays(10)"/>
43+
</kendo-daterangepicker>
44+
```
45+
46+
## See Also
47+
48+
* [Basic Usage of the DateRangePicker TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/daterangepicker/tag-helper)
49+
* [Server-Side API](/api/daterangepicker)

0 commit comments

Comments
 (0)