Skip to content

Commit 50dc432

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 97d93c3 commit 50dc432

File tree

33 files changed

+849
-289
lines changed

33 files changed

+849
-289
lines changed

‎docs-aspnet/_contentTemplates/mvc/add-client-side-resources.md

+2
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,6 @@ Before you can use a Telerik UI component, you must include the theme, the jQuer
6767
> * A jQuery script must be loaded only once. It must be placed only in the `<head>` tag of the `_Layout.cshtml` file. Make sure there are no duplicate jQuery references elsewhere in the `_Layout` file.
6868
> * The Kendo UI scripts, the Kendo UI CSS file must use a compatible version of the theme, and the `Kendo.Mvc.dll` referenced in the project must be the same version as the Kendo UI script files.
6969
70+
If you prefer to include the Kendo UI scripts and styles from a local source instead of CDNs, refer to the [Local Client-Side Resources]({% slug using_local_client_side_resources %}) article.
71+
7072
#end

‎docs-aspnet/backwards-compatibility/2023-backwards-compatibility.md

+14
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,20 @@ position: 1
1010

1111
This article lists the breaking or important changes in the 2023 releases of {{ site.product }}.
1212

13+
## {{ site.product }} R3 2023
14+
15+
> Important change
16+
17+
**Web Font Icons**
18+
19+
As of the 2023 R3 release, the font icons have been detached from the [Kendo UI Themes CDN]({% slug cdnservices_core %}) and have been extracted to a separate package. To continue using the font icons, reference the following stylesheet into your application:
20+
21+
```
22+
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
23+
```
24+
25+
The font icons are also available as an NPM package. For more information on how to install the NPM package, refer to the following [documentation](https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/#usage).
26+
1327
## {{ site.product }} R1 2023 SP2
1428

1529
**FloatingActionButton**

‎docs-aspnet/getting-started-core/first-steps-vs-mac.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ permalink: /getting-started/first-steps-vs-mac
1313

1414
Welcome to the First Steps on Mac guide on getting started with Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET Core with Visual Studio for Mac!
1515

16-
The guide creates a use-case scenario which demonstrates how to start working with the suite and implements the Kendo UI DatePicker for ASP.NET Core in your project by using the Telerik UI DatePicker HtmlHelper or TagHelper. For its purposes, the guide uses Visual Studio for Mac 2019.
16+
The guide creates a use-case scenario which demonstrates how to start working with the suite and implements the Kendo UI DatePicker for ASP.NET Core in your project by using the Telerik UI DatePicker HtmlHelper or TagHelper. For its purposes, the guide uses Visual Studio for Mac 2022.
1717

1818
To get up and running with the project:
1919

@@ -30,7 +30,7 @@ To get up and running with the project:
3030

3131
## Creating the Application
3232

33-
1. Open Visual Studio for Mac 2019 and select **New**.
33+
1. Open Visual Studio for Mac 2022 and select **New**.
3434
1. Select **Web Application(Model-View-Controller) .NET Core** > **App** and click **Next**.
3535
1. Select the target framework of the project and click **Next**.
3636
1. Set a name and location for the project and click **Create**.

‎docs-aspnet/getting-started-core/first-steps.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: First Steps on Windows
33
page_title: First Steps with VS for Windows
4-
description: "Create a sample project that uses the Telerik UI components for ASP.NET Core (aka MVC 6 or ASP.NET Core MVC) in Visual Studio for Windows."
4+
description: "Create a sample project that uses the Telerik UI components for ASP.NET Core (ASP.NET Core MVC application) in Visual Studio for Windows."
55
previous_url: /aspnetmvc-apps/mvc-6/getting-started, /mvc-6/getting-started, /getting-started/getting-started, /getting-started/first-steps-default-project
66
slug: gettingstarted_aspnetmvc6_aspnetmvc
77
position: 1
@@ -10,9 +10,9 @@ permalink: /getting-started/first-steps
1010

1111
# First Steps in {{ site.product }} with VS for Windows
1212

13-
This tutorial demonstrates how to start working with Telerik UI for ASP.NET Core. You will implement the Telerik UI DatePicker for ASP.NET Core in your project by using its dedicated HtmlHelper or TagHelper. In this guide, you will download and implement the components by using NuGet and Visual Studio 2019 for Windows.
13+
This tutorial demonstrates how to start working with Telerik UI for ASP.NET Core. You will implement the Telerik UI DatePicker for ASP.NET Core in your project by using its dedicated HtmlHelper or TagHelper. In this guide, you will download and implement the components by using NuGet and Visual Studio 2022 for Windows.
1414

15-
The approach demonstrated in this guide is applicable both for new projects and for already existing projects where you want to implement Telerik UI controls.
15+
The approach demonstrated in this guide is applicable both for new projects and for existing projects where you want to implement Telerik UI controls.
1616

1717
>tipIf you want to start a new project from a template, you can [use the Telerik UI for ASP.NET Core Visual Studio extensions]({%slug gettingstarted_project_template%}) and create a new pre-configured application that has all necessary scripts, styles, and editor templates.
1818
@@ -49,7 +49,7 @@ In this tutorial, you will:
4949
5050
## Creating the Application
5151

52-
1. Open Visual Studio 2019 for Windows and select **Create a new project**.
52+
1. Open Visual Studio 2022 for Windows and select **Create a new project**.
5353

5454
1. In the search box, enter **Model-View-Controller**, select the **ASP.NET Core Web App (Model-View-Controller)** C# template, and then select **Next**.
5555

‎docs-aspnet/getting-started-core/images/sample-page.png

11 KB
Loading

‎docs-aspnet/getting-started-core/razor-pages.md

+38-7
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,11 @@ All Telerik UI for ASP.NET Core components are compatible with the ASP.NET Razor
3939
1. Add the `@model` directive and an AntiForgeryToken on top of the Razor page:
4040

4141
```
42+
@page
4243
@model IndexModel
4344
45+
@using Kendo.Mvc.UI
46+
4447
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
4548
@Html.AntiForgeryToken()
4649
```
@@ -98,12 +101,7 @@ All Telerik UI for ASP.NET Core components are compatible with the ASP.NET Razor
98101
</commands>
99102
</column>
100103
</columns>
101-
<datasource type="DataSourceTagHelperType.Ajax" page-size="10"
102-
server-aggregates="true"
103-
server-filtering="true"
104-
server-grouping="true"
105-
server-paging="true"
106-
server-sorting="true">
104+
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
107105
<transport>
108106
<read url="/Index?handler=Read" data="forgeryToken" />
109107
<create url="/Index?handler=Create" data="forgeryToken" />
@@ -114,6 +112,9 @@ All Telerik UI for ASP.NET Core components are compatible with the ASP.NET Razor
114112
<model id="OrderID">
115113
<fields>
116114
<field name="OrderID" type="number" editable="false"></field>
115+
<field name="Freight" type="number"></field>
116+
<field name="ShipName" type="string"></field>
117+
<field name="ShipCity" type="string"></field>
117118
</fields>
118119
</model>
119120
</schema>
@@ -205,7 +206,7 @@ All Telerik UI for ASP.NET Core components are compatible with the ASP.NET Razor
205206
206207
You can post data to the PageModel by binding the model properties to editors and submitting the entire model through a form. The example below demonstrates how to post the selected option from the [AutoComplete component]({% slug htmlhelpers_autocomplete_aspnetcore %}) to the PageModel:
207208
208-
```tab-RazorPage(csthml)
209+
```tab-HtmlHelper-RazorPage(csthml)
209210
@page
210211
@model IndexModel
211212
@@ -236,6 +237,36 @@ You can post data to the PageModel by binding the model properties to editors an
236237
</div>
237238
</form>
238239
```
240+
```tab-TagHelper-RazorPage(csthml)
241+
@page
242+
@model IndexModel
243+
244+
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
245+
@Html.AntiForgeryToken()
246+
247+
@{
248+
var countries_data = new List<string>() { "France", "Germany", "United Kingdom" };
249+
}
250+
251+
<form id="formExample" class="form-horizontal" method="post">
252+
<div class="form-group">
253+
<label for="ShipName">Ship name:</label>
254+
<div class="col-sm-10">
255+
<kendo-autocomplete for="ShipName"
256+
filter="FilterType.StartsWith"
257+
placeholder="Select country..."
258+
bind-to="countries_data"
259+
separator=", ">
260+
</kendo-autocomplete>
261+
</div>
262+
</div>
263+
<div class="form-group">
264+
<div class="col-sm-offset-2 col-sm-10">
265+
<button type="submit" class="btn btn-default">Send</button>
266+
</div>
267+
</div>
268+
</form>
269+
```
239270
```tab-PageModel(cshtml.cs)
240271
public class IndexModel : PageModel
241272
{

‎docs-aspnet/html-helpers/charts/chart-types/line-charts.md

+70-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ To create a Line series in the Chart, use `Line` and `VerticalLine` in the `Seri
3333

3434
## Configuring the Axes
3535

36-
To configure the axes, use the `CategoryAxis` and `ValueAxis` settings. Multiple value axes are also supported.
36+
To configure the axes, use the `CategoryAxis` and `ValueAxis` settings.
3737

3838
```HtmlHelper
3939
@(Html.Kendo().Chart()
@@ -87,6 +87,75 @@ The configuration from the previous example results in the following Line Chart.
8787

8888
![{{ site.product_short }} A sample Line Chart](images/chart-line.png)
8989

90+
Multiple value axes are also supported. For example, to define four value axes, follow the steps below:
91+
92+
1. Configure four `ValueAxis()` configurations with the desired options and set the name of each axis through the `Numeric()` method.
93+
1. Within the `Series()` configuration, use the `Axis()`option to specify the name of the value axis for each of the defined series.
94+
1. Set the alignment of the value axes by using the `AxisCrossingValue()` of the `CategoryAxis()`. This method accepts comma-separated indexes that correspond to the indices, at which the value axes cross the category axis.
95+
96+
```
97+
@(Html.Kendo().Chart()
98+
.Name("chart")
99+
.Title("March Weather Report")
100+
.Legend(legend => legend
101+
.Position(ChartLegendPosition.Bottom)
102+
)
103+
.Series(series =>
104+
{
105+
series
106+
.Line(new double[] { 6, 10, 10, 10, 10, 9, 5, 5, 10, 8, 8, 5, 8, 11, 9, 15, 20, 23, 24, 21, 21, 20, 22, 22, 20, 18, 16, 15, 20, 13.2, 18 })
107+
.Color("#ff1c1c")
108+
.Name("Humidity")
109+
.Axis("humid");
110+
series
111+
.Line(new double[] { -5, -6, 0, -4, -3, -5.2, -5, -1.7, -1, 0, -0.4, -2, -2, -5, 4, -2, -4, -1, -1, 2, 4, -1, 1, 1, 4, 0, -1, 1, -2, 5.7, 5 })
112+
.Color("#ffae00")
113+
.Name("Min. Temperature [°C]")
114+
.Axis("temp");
115+
series
116+
.Area(new double[] { 16.4, 21.7, 35.4, 19, 10.9, 13.6, 10.9, 10.9, 10.9, 16.4, 16.4, 13.6, 13.6, 29.9, 27.1, 16.4, 13.6, 10.9, 16.4, 10.9, 24.5, 10.9, 8.1, 19, 21.7, 27.1, 24.5, 16.4, 27.1, 29.9, 27.1 })
117+
.Color("#73c100")
118+
.Name("Wind Speed [km/h]")
119+
.Axis("wind");
120+
series
121+
.Area(new double[] { 5.4, 2, 5.4, 3, 2, 1, 3.2, 7.4, 0, 8.2, 0, 1.8, 0.3, 0, 0, 2.3, 0, 3.7, 5.2, 6.5, 0, 7.1, 0, 4.7, 0, 1.8, 0, 0, 0, 1.5, 0.8 })
122+
.Color("#007eff")
123+
.Name("Rainfall [mm]")
124+
.Axis("rain");
125+
})
126+
.CategoryAxis(axis => axis
127+
.Categories("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31")
128+
// Align the first and the last value axes to the left
129+
// and the second and the third to the right.
130+
.AxisCrossingValue(0, 32, 32, 0)
131+
)
132+
.ValueAxis(axis => axis // First value axis.
133+
.Numeric("humid")
134+
.Color("#ff1c1c")
135+
.Min(0)
136+
.Max(60)
137+
)
138+
.ValueAxis(axis => axis // Second value axis.
139+
.Numeric("rain")
140+
.Color("#007eff")
141+
.Min(0)
142+
.Max(60)
143+
)
144+
.ValueAxis(axis => axis // Third value axis.
145+
.Numeric("wind")
146+
.Color("#73c100")
147+
.Min(0)
148+
.Max(60)
149+
)
150+
.ValueAxis(axis => axis // Fourth value axis.
151+
.Numeric("temp")
152+
.Color("#ffae00")
153+
.Min(-30)
154+
.Max(30)
155+
)
156+
)
157+
```
158+
90159
## Configuring the Line Styles
91160

92161
You can render the lines between the points by setting different styles through the `Style` configuration in the `SeriesDefaults` common settings.

‎docs-aspnet/html-helpers/data-management/grid/binding/ajax-binding.md

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ The Ajax-bound mode has the following features:
1717
- The Grid retrieves only the data (in JSON format) representing the current page. As a result, only the Grid is updated.
1818
- All Grid templates (column, detail) are executed client-side. They follow the [Kendo UI for jQuery template](https://docs.telerik.com/kendo-ui/framework/templates/overview) definition rules and may contain embedded JavaScript code.
1919

20+
{% if site.core %}
21+
@[template](/_contentTemplates/core/json-serialization-note.md#json-serialization-note)
22+
{% endif %}
23+
2024
To configure the Grid for {{ site.framework }} to do Ajax binding to the **Products** table of the Northwind database:
2125

2226
1. Create a new {{ site.framework }} web application. Follow the steps from the [introductory article]({% if site.core %}{% slug gettingstarted_aspnetmvc6_aspnetmvc %}{% else %}{% slug gettingstarted_aspnetmvc %}{% endif %}) to add {{ site.product }} to the application.

‎docs-aspnet/html-helpers/data-management/grid/binding/razor-page.md

+61-9
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,37 @@ To enable CRUD operations in the Telerik UI Grid within a `RazorPage`:
2323

2424

2525
```HtmlHelper
26-
.DataSource(ds => ds.Ajax()
27-
.Read(r => r.Url("/Grid/GridCrudOperations?handler=Read").Data("forgeryToken"))
28-
.Update(u => u.Url("/Grid/GridCrudOperations?handler=Update").Data("forgeryToken"))
29-
.Create(c => c.Url("/Grid/GridCrudOperations?handler=Create").Data("forgeryToken"))
30-
.Destroy(d => d.Url("/Grid/GridCrudOperations?handler=Destroy").Data("forgeryToken"))
31-
.Model(m => m.Id(id => id.OrderID))
26+
@page
27+
@model IndexModel
28+
29+
@using Kendo.Mvc.UI
30+
31+
@(Html.Kendo().Grid<OrderViewModel>()
32+
.Name("grid")
33+
.Editable()
34+
.Scrollable()
35+
.Pageable()
36+
.ToolBar(t => t.Create())
37+
.Columns(columns =>
38+
{
39+
columns.Bound(column => column.Freight);
40+
columns.Bound(column => column.ShipName);
41+
columns.Bound(column => column.ShipCity);
42+
columns.Command(column =>
43+
{
44+
column.Edit();
45+
column.Destroy();
46+
}).Width(230);
47+
})
48+
.DataSource(ds => ds
49+
.Ajax()
50+
.Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
51+
.Update(u => u.Url("/Index?handler=Update").Data("forgeryToken"))
52+
.Create(c => c.Url("/Index?handler=Create").Data("forgeryToken"))
53+
.Destroy(d => d.Url("/Index?handler=Destroy").Data("forgeryToken"))
54+
.Model(m => m.Id(id => id.OrderID))
55+
.PageSize(10)
56+
)
3257
)
3358
```
3459
@@ -90,9 +115,21 @@ To bind the Telerik UI Grid to a property from the PageModel:
90115
```
91116
public class GridPageModel : PageModel
92117
{
93-
public IList<OrderViewModel> orders;
94-
95-
//other ActionMethods
118+
[BindProperty]
119+
public IList<OrderViewModel> orders { get; set; }
120+
121+
public void OnGet()
122+
{
123+
orders = new List<OrderViewModel>();
124+
// Populate the collection with data.
125+
Enumerable.Range(1, 50).ToList().ForEach(i => orders.Add(new OrderViewModel
126+
{
127+
OrderID = i + 1,
128+
Freight = i * 10,
129+
ShipName = "ShipName " + i,
130+
ShipCity = "ShipCity " + i
131+
}));
132+
}
96133
}
97134
```
98135
@@ -107,9 +144,24 @@ To bind the Telerik UI Grid to a property from the PageModel:
107144
```HtmlHelper
108145
@(Html.Kendo().Grid<OrderViewModel>(Model.orders)
109146
.Name("grid")
147+
.Scrollable()
148+
.Pageable()
149+
.Columns(columns =>
150+
{
151+
columns.Bound(column => column.Freight);
152+
columns.Bound(column => column.ShipName);
153+
columns.Bound(column => column.ShipCity);
154+
})
155+
.DataSource(ds => ds
156+
.Ajax()
157+
.PageSize(20)
158+
.ServerOperation(false)
159+
)
110160
)
111161
```
112162
113163
## See Also
114164
165+
* [Remote Ajax Binding by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/remote-data-binding)
166+
* [Local Ajax Binding by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/local-data-binding)
115167
* [Server-Side API](/api/grid)

0 commit comments

Comments
 (0)