Skip to content

Commit a0b94d7

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 2afb898 commit a0b94d7

File tree

67 files changed

+1937
-698
lines changed

Some content is hidden

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

67 files changed

+1937
-698
lines changed

‎docs-aspnet-core/getting-started/scaffolding.md‎

Lines changed: 34 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Scaffolding
3-
page_title: Scaffolding | Progress Telerik UI for ASP.NET Core
3+
page_title: Scaffolding | Telerik UI for ASP.NET Core
44
description: "Learn how to use the Kendo UI Scaffolder extensions."
55
slug: scaffolding_aspnetcore
66
position: 4
@@ -10,50 +10,42 @@ position: 4
1010

1111
As of the R1 2019 release, Telerik UI for ASP.NET Core provides Scaffolding templates.
1212

13-
They allow you to use the standard scaffolding to generate MVC-helper declarations for editors that use the Telerik UI for ASP.NET Core components instead of standard inputs.
14-
15-
You can use them in both MVC views and Razor Pages.
13+
These templates allow you to apply standard scaffolding to generate MVC-helper declarations for editors which use the Telerik UI for ASP.NET Core components instead of applying standard inputs. You can use the Scaffolding extensions both in MVC views and in Razor Pages.
1614

1715
Depending on the type of field, the following editors will be generated:
1816

19-
* `String`: `input` element with Kendo styles
20-
* `String` (multiline): `textarea` element with Kendo styles
21-
* `Number`: `kendo-numerictextbox` tag helper
22-
* `DateTime`: `kendo-datetimepicker` tag helper
23-
* `Boolean`: `Html.Kendo().CheckBoxFor` helper
24-
25-
The scaffolding logic and tools are the same as with the ordinary .NET Core web applications. The main repository and logic for the scaffolding provided by Microsoft is [https://github.com/aspnet/Scaffolding](https://github.com/aspnet/Scaffolding). The original template files are located in its: [https://github.com/aspnet/Scaffolding/tree/master/src/VS.Web.CG.Mvc/Templates](https://github.com/aspnet/Scaffolding/tree/master/src/VS.Web.CG.Mvc/Templates) folder.
17+
* `String`—An `input` element with Kendo UI styles.
18+
* `String` (multiline)—A `textarea` element with Kendo UI styles.
19+
* `Number`—A `kendo-numerictextbox` tag helper.
20+
* `DateTime`—A `kendo-datetimepicker` tag helper.
21+
* `Boolean`—An `Html.Kendo().CheckBoxFor` helper.
2622

27-
In order to use the scaffolding provided by Microsoft you can follow these resources:
23+
The scaffolding logic and tools are the same as in the ordinary .NET Core web applications. The main repository and logic for the scaffolding that is provided by Microsoft is located in [https://github.com/aspnet/Scaffolding](https://github.com/aspnet/Scaffolding). The original template files are located in its [https://github.com/aspnet/Scaffolding/tree/master/src/VS.Web.CG.Mvc/Templates](https://github.com/aspnet/Scaffolding/tree/master/src/VS.Web.CG.Mvc/Templates) folder.
2824

25+
For more information on using the scaffolding by Microsoft, refer to the following resources:
2926
- [Add a model to an ASP.NET Core MVC app](https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-2.1)
3027
- [Add a model to a Razor Pages app in ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/model?view=aspnetcore-2.1)
3128

29+
> **Important**
30+
>
31+
> The Scaffolding features allow you to generate templates based on classes. They are different from the editor templates that are used for editing by widgets such as the Grid, for example. The editor templates are located in your installation folder at `C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core <your version>\wrappers\aspnetcore\EditorTemplates`.
3232
33-
>tip The Scaffolding features allow you to generate templates based on classes and are different than the editor templates used by widgets like the grid for editing records. If you are looking for the editor templates, you can find them in your installation folder under `C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core <your version>\wrappers\aspnetcore\EditorTemplates`.
34-
35-
## Getting Started
36-
33+
## Prerequisites
3734

38-
### Requirements
35+
Install and set up Telerik UI for ASP.NET Core in your project by either of the following ways:
36+
* [Use Visual Studio](https://docs.telerik.com/aspnet-core/getting-started/getting-started)
37+
* [Use the CLI](https://docs.telerik.com/aspnet-core/getting-started/getting-started-cli)
3938

40-
Make sure that Telerik UI for ASP.NET Core is installed and set up in your project. There are two ways to do that:
41-
42-
* [Use Visual Studio](https://docs.telerik.com/aspnet-core/getting-started/getting-started)
43-
* [Use the CLI](https://docs.telerik.com/aspnet-core/getting-started/getting-started-cli)
44-
45-
### Installation
39+
## Installation
4640

4741
To install the UI for ASP.NET Core Scaffolding templates and extensions in your project:
4842

49-
1. Clone or Download the [https://github.com/telerik/scaffold-templates-core](https://github.com/telerik/scaffold-templates-core) repository.
50-
51-
1. Copy the `Templates` folder from the repo above to the **root** of your project.
43+
1. Clone or download the [https://github.com/telerik/scaffold-templates-core](https://github.com/telerik/scaffold-templates-core) repository.
44+
1. Copy the `Templates` folder from the `scaffold-templates-core` repository to the root of your project.
45+
1. Exclude the `scaffold-templates-core` repository from the project to avoid its compilation when you build the application. To exclude the repository, use either of the following approaches:
5246

53-
1. Exclude it from the project to make sure it will not be compiled when building. There are two ways to do that:
47+
* Add the following lines directly to the project file.
5448

55-
* add the following to the project file directly:
56-
5749
```.csproj
5850
<ItemGroup>
5951
<Compile Remove="Templates\**" />
@@ -62,41 +54,38 @@ To install the UI for ASP.NET Core Scaffolding templates and extensions in your
6254
<None Remove="Templates\**" />
6355
</ItemGroup>
6456
```
65-
66-
* OR, use the GUI in Visual Studio:
67-
68-
**Figure 1. Exclude the Templates folder from compilation**
69-
70-
![Exclude Templatse folder](images/exclude-templates-from-project-GUI.png)
7157

58+
* Use the Visual Studio interface.
7259

73-
### Use With Visual Studio
60+
**Figure 1. Exclude the Templates folder from compilation**
7461

75-
The Kendo UI Scaffolding Templates pertain to cshtml generation, so you must first create the appropriate model and controller as per your applicaiton needs. You can use the standard Scaffolding, or code you already have.
62+
![Exclude Templatse folder](images/exclude-templates-from-project-GUI.png)
7663

77-
If you don't have a model and controller already, below the list you can find a sample set so you can follow this example.
64+
## Using Scaffolding Templates with Visual Studio
7865

79-
To add a View that will use a Kendo scaffolded template:
66+
The Kendo UI Scaffolding Templates pertain to `cshtml` generation. That is why, first you have to create the appropriate model and controller as per your application requirements. You can either use the standard Scaffolding or the code you already have. If you do not already have a model and controller, use the sample set below the list to follow the example.
67+
68+
To add a View that will use a Kendo UI Scaffolding template:
8069

8170
1. Select **Add** > **New Scaffolded Item...** from the context menu of the desired location.
8271

8372
**Figure 2. Add Scaffolded Item**
8473

8574
![Add Scaffolded Item](images/add-scaffolded-item.png)
8675

87-
1. Choose item type (for example, **MVC View**) and click **Add**
76+
1. Choose item type (for example, **MVC View**) and click **Add**.
8877

8978
**Figure 3. Add Scaffolded View**
9079

9180
![Add Scaffolded View](images/add-scaffolded-view.png)
9281

93-
1. Set the View properties (name, template and model to match the code you already have) and click **Add**. For example, an `Edit` view for the `SampleScaffoldingData` model.
82+
1. Set the View properties (name, template, and model to match the code you already have) and click **Add**. For example, an `Edit` view for the `SampleScaffoldingData` model.
9483

9584
**Figure 3. Set View Properties**
9685

9786
![Set View Properties](images/set-scaffolded-view-properties.png)
98-
99-
After following the steps, you should have something similar to the following in your project. You can also use the sample class and controller to test the behavior with dummy data instead of actual models.
87+
88+
As a result, in your project you have an output that is similar to the following code. You can also use the sample class and controller to test the behavior with dummy data instead of actual models.
10089

10190
```Model
10291
using System;
@@ -201,11 +190,10 @@ namespace SampleCoreApp.Controllers
201190
}
202191
```
203192

204-
205193
## See Also
206194

207-
* [Add the Kendo components to Your Project with VS 2017](https://docs.telerik.com/aspnet-core/getting-started/getting-started)
208-
* [Add the Kendo components to Your Project with the CLI](https://docs.telerik.com/aspnet-core/getting-started/getting-started-cli)
195+
* [Adding Kendo UI Components to Projects with VS 2017](https://docs.telerik.com/aspnet-core/getting-started/getting-started)
196+
* [Adding Kendo UI Components to Projects with the CLI](https://docs.telerik.com/aspnet-core/getting-started/getting-started-cli)
209197
* [ASP.NET Scaffolding](https://github.com/aspnet/Scaffolding)
210198
* [Default ASP.NET Scaffolding Templates](https://github.com/aspnet/Scaffolding/tree/master/src/VS.Web.CG.Mvc/Templates)
211199
* [UI for ASP.NET Core Scaffolding Templates](https://github.com/telerik/scaffold-templates-core)

‎docs-aspnet-core/html-helpers/navigation/menu/binding/binding-overview.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Data Binding Overview
3+
page_title: Data Binding | Kendo UI Menu HtmlHelper for ASP.NET Core
4+
description: "Learn the basics approaches for binding the Kendo UI Menu HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_menu_databinding_aspnetcore
6+
position: 1
7+
---
8+
9+
# Data Binding
10+
11+
The Menu provides a set of options for binding it to data.
12+
13+
The supported data-binding approaches are:
14+
15+
* [Model Binding]({% slug htmlhelpers_menu_modelbinding_aspnetcore %})
16+
* [Sitemap Binding]({% slug htmlhelpers_menu_sitemapbinding_aspnetcore %})
17+
18+
## See Also
19+
20+
* [JavaScript API Reference of the Menu](http://docs.telerik.com/kendo-ui/api/javascript/ui/menu)
21+
* [Menu HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/menu/overview)
22+
* [Menu Official Demos](http://demos.telerik.com/aspnet-core/menu/index)
23+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
24+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
25+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI]({% slug gettingstartedcli_aspnetmvc6_aspnetmvc %})
26+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/html-helpers/navigation/menu/binding/model-binding.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Model Binding
3+
page_title: Model Binding | Kendo UI Menu HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement Model Binding with Kendo UI Menu HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_menu_modelbinding_aspnetcore
6+
position: 2
7+
---
8+
9+
# Model Binding
10+
11+
To bind a Kendo UI Menu to a hierarchical model:
12+
13+
1. Make sure you followed all the steps from the [introductory article on Telerik UI for ASP.NET Core]({% slug gettingstarted_aspnetmvc6_aspnetmvc %}).
14+
15+
1. Create a new action method and pass the **Categories** table as the model. Note that the **Categories** must be associated to the **Products** table.
16+
17+
```Razor
18+
public ActionResult Index()
19+
{
20+
NorthwindDataContext northwind = new NorthwindDataContext();
21+
22+
return View(northwind.Categories);
23+
}
24+
```
25+
26+
1. Make your view strongly typed.
27+
28+
```Razor
29+
@model IEnumerable<MvcApplication1.Models.Category>
30+
```
31+
32+
1. Add a Menu.
33+
34+
```Razor
35+
@(Html.Kendo().Menu()
36+
.Name("menu") //The name of the Menu is mandatory. It specifies the "id" attribute of the widget.
37+
.BindTo(Model, mappings =>
38+
{
39+
mappings.For<category>(binding => binding //Define the first level of the Menu.
40+
.ItemDataBound((item, category) => //Define the mapping between the Menu item properties and the model properties.
41+
{
42+
item.Text = category.CategoryName;
43+
})
44+
.Children(category => category.Products)); //Define which property of the model contains the children.
45+
mappings.For<product>(binding => binding
46+
.ItemDataBound((item, product) =>
47+
{
48+
item.Text = product.ProductName;
49+
}));
50+
})
51+
)
52+
```
53+
54+
## See Also
55+
56+
* [JavaScript API Reference of the Menu](http://docs.telerik.com/kendo-ui/api/javascript/ui/menu)
57+
* [Menu HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/menu/overview)
58+
* [Menu Official Demos](http://demos.telerik.com/aspnet-core/menu/index)

‎docs-aspnet-core/html-helpers/navigation/menu/binding/sitemap-binding.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Sitemap Binding
3+
page_title: Sitemap Binding | Kendo UI Menu HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement Sitemap Binding with Kendo UI Menu HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_menu_sitemapbinding_aspnetcore
6+
position: 3
7+
---
8+
9+
# Sitemap Binding
10+
11+
To bind a Kendo UI Menu to a sitemap:
12+
13+
1. Make sure you followed all the steps from the [introductory article on Telerik UI for ASP.NET Core]({% slug gettingstarted_aspnetmvc6_aspnetmvc %}).
14+
15+
1. Create a simple sitemap with the `sample.sitemap` file name at the root of the project.
16+
17+
```Razor
18+
<?xml version="1.0" encoding="utf-8" ?>
19+
<siteMap>
20+
<siteMapNode title="Home" controller="Home" action="Overview">
21+
<siteMapNode title="Grid">
22+
<siteMapNode controller="grid" action="index" title="First Look (Razor)" area="razor"/>
23+
</siteMapNode>
24+
<siteMapNode title="Menu">
25+
<siteMapNode controller="menu" action="index" title="First Look (Razor)" area="razor"/>
26+
</siteMapNode>
27+
</siteMapNode>
28+
</siteMap>
29+
```
30+
31+
1. Load the sitemap using `SiteMapManager`.
32+
33+
```Razor
34+
public ActionResult Index()
35+
{
36+
if (!SiteMapManager.SiteMaps.ContainsKey("sample"))
37+
{
38+
SiteMapManager.SiteMaps.Register<XmlSiteMap>("sample", sitmap => sitmap.LoadFrom("~/sample.sitemap"));
39+
}
40+
return View();
41+
}
42+
```
43+
44+
1. Add a Menu.
45+
46+
```Razor
47+
@(Html.Kendo().Menu()
48+
.Name("menu") //The name of the Menu is mandatory. It specifies the "id" attribute of the widget.
49+
.BindTo("sample") //Bind to the sitemap with name "sample".
50+
)
51+
```
52+
53+
## See Also
54+
55+
* [JavaScript API Reference of the Menu](http://docs.telerik.com/kendo-ui/api/javascript/ui/menu)
56+
* [Menu HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/menu/overview)
57+
* [Menu Official Demos](http://demos.telerik.com/aspnet-core/menu/index)

‎docs-aspnet-core/html-helpers/navigation/menu/keyboard-navigation.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation | Kendo UI Menu HtmlHelper for ASP.NET Core
4+
description: "Learn how to use the keyboard navigation functionality of the Kendo UI Menu HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_menu_keyboardnavigation_aspnetcore
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The Menu provides a keyboard navigation functionality. When on focus, the first root item is activated.
12+
13+
Kendo UI Menu supports the following keyboard shortcuts and user actions:
14+
15+
| SHORTCUT | DESCRIPTION |
16+
|:--- |:--- |
17+
| `Home` | Focuses the first item |
18+
| `End` | Focuses the last item |
19+
| Left `Arrow` key | <ul><li>Moves the active item on the root level of horizontal Menus to the left</li> <li>Closes an item group</li></ul> |
20+
| Right `Arrow` key | <ul><li>Moves the active item on the root level of horizontal Menus to the right</li> <li>opens an item group of a vertical Menu</li> <li>Moves the active state to the next root item of a horizontal Menu, if the previous active item has been inside an item group</li></ul> |
21+
| Up `Arrow` key | Moves the active item of vertical Menu item groups upwards |
22+
| Down `Arrow` key | <ul><li>Moves the active item of vertical Menu item groups downwards</li> <li>Opens an item group of a horizontal Menu</li></ul> |
23+
| `Enter` | Selects or navigates the focused item |
24+
| `Space` | Selects or navigates the focused item |
25+
| `Esc` | Closes an item group |
26+
| (`Shift`+) `Tab` | Blurs the Menu and moves the focus to the next (previous) focusable page element |
27+
28+
## See Also
29+
30+
* [JavaScript API Reference of the Menu](http://docs.telerik.com/kendo-ui/api/javascript/ui/menu)
31+
* [Menu HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/menu/overview)
32+
* [Menu Official Demos](http://demos.telerik.com/aspnet-core/menu/index)

0 commit comments

Comments
 (0)