You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs-aspnet/getting-started-core/first-steps-vs-extensions.md
+52-46Lines changed: 52 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,8 +35,8 @@ You'll learn how to:
35
35
<ulclass="toc-ul">
36
36
<li><span class="k-icon k-i-check"></span>Download and install the Telerik UI extensions.</li>
37
37
<li><span class="k-icon k-i-check"></span>Create an ASP.NET Core MVC (Model-View-Controller) project.</li>
38
-
<li><span class="k-icon k-i-check"></span>Initialize a DatePicker and a Grid.</li>
39
-
<li><span class="k-icon k-i-check"></span>Bind data to Telerik UI widgets.</li>
38
+
<li><span class="k-icon k-i-check"></span>Bind data to Telerik UI components like the Grid.</li>
39
+
<li><span class="k-icon k-i-check"></span>Enhance the project with additional components like the DatePicker.</li>
40
40
<li><span class="k-icon k-i-check"></span>Use the Telerik UI Themes.</li>
41
41
<li><span class="k-icon k-i-check"></span>Add your license file.</li>
42
42
</ul>
@@ -47,7 +47,7 @@ You'll learn how to:
47
47
48
48
*[Visual Studio 2017 or later](https://visualstudio.microsoft.com/downloads)
49
49
50
-
>For .NET Core 3.1 version or later, Visual Studio 2019 is required.
50
+
>For newer .NET Core versions, a recent matching Visual Studio might be required.
51
51
52
52
* Windows 10 or higher
53
53
@@ -80,11 +80,13 @@ Once you install the Telerik UI Extensions, you can open Visual Studio and start
80
80
81
81
Using this name guarantees that the `namespace` from the code snippets in this tutorial will match your project.
82
82
83
-
83
+
84
84
85
-
1. From the drop-down boxes, select the **.NET CORE** framework and **ASP.NET Core** version **5.0**.
85
+
1. From the drop-down box, select the latest **ASP.NET Core** version for .NET target framework.
86
86
87
-
Telerik UI supports all ASP.NET Core versions, including 3.x, 5.0, and newer. The default is .NET 5.0.
87
+
Telerik UI supports all newer ASP.NET Core versions.
88
+
89
+
88
90
89
91
1. Select HTML or Tag Helpers.
90
92
@@ -93,58 +95,37 @@ Once you install the Telerik UI Extensions, you can open Visual Studio and start
93
95
94
96
>tip In Razor files, Tag Helpers come with predefined strongly-typed attributes that enable server-side code to participate in the creation and rendering of HTML elements. The resulting markup is cleaner and easier to read than with traditional HTML Helpers, which are invoked as methods that are mixed with HTML inside your Razor views.
95
97
96
-
97
-
98
-
1. From the **VERSION** drop-down, select the latest Telerik UI version.
98
+
1. From the **Select Version** list, select the latest Telerik UI version, and then select **Next**.
99
99
100
100
* If you use the Telerik UI extensions for the first time, you will see a login window. Enter the credentials for your [Telerik account](https://www.telerik.com/account) to download the controls.
101
101
* If you haven't purchased a license, download the trial version of the Telerik UI controls.
102
102
103
103
104
-
1. Select **STANDARD**, and then select **Next**.
104
+
1.From the available options Select **Grid and Menu**, and then select **Next**.
105
105
106
-
The wizard offers [various templates]({% slug newprojectwizards_visualstudio_aspnetcore %}#available-templates) for projects with pre-configured Grid and Menu controls and for projects using Razor Pages. This tutorial uses the **STANDARD** MVC version.
106
+
The wizard offers [various templates]({% slug newprojectwizards_visualstudio_aspnetcore %}#available-templates) for projects with pre-configured Grid and Menu controls and for projects using Razor Pages. This tutorial uses the **Grid and Menu** MVC version.
107
107
108
-
1. Select the default Boostrap-v4 theme, and then select **Finish**.
108
+
109
+
110
+
1. Select the default theme and then select **Finish**.
109
111
110
112
The selected theme defines the appearance of the Telerik UI components. You can [change the theme](#changing-the-app-theme) at any time.
113
+
114
+
111
115
112
116
Congratulations! The created project:
113
117
114
118
* Is a working app.
115
119
116
120
* Has all resources required by Telerik UI, and you can start adding components immediately.
117
121
118
-
## Initializing a DatePicker
119
-
120
-
Next, you will add the first Telerik UI component to the project—the [Telerik UI DatePicker]({% slug htmlhelpers_datepicker_aspnetcore %}). The Telerik UI extensions have already configured the project with all required Telerik UI resources, and all you need now is to add the DatePicker HTML or Tag Helper. Whether you select the HTML or Tag Helper syntax depends on what you have configured when you have [created the project](#creating-the-project).
121
-
122
-
Utilize the [Telerik UI DatePicker]({% slug htmlhelpers_datepicker_aspnetcore %}) component by adding the snippet from the following example to `~/Views/Home/Index.cshtml`.
123
-
124
-
```HtmlHelper
125
-
<div class="text-center">
126
-
<h2>Telerik UI DatePicker for ASP.NET Core</h2>
127
-
@(Html.Kendo().DatePicker()
128
-
.Name("my-picker")
129
-
)
130
-
</div>
131
-
```
132
-
```TagHelper
133
-
<div class="text-center">
134
-
<h2>Telerik UI DatePicker for ASP.NET Core</h2>
135
-
<kendo-datepicker name="my-picker"/>
136
-
</div>
137
-
```
138
-
139
-
Run the project. The following page is visualized in the browser:
The next step is to examine the Telerik UI Grid which the template wizard added to your project. The Grid is the richest component in the entire toolset, but this sample will only demonstrate a basic implementation.
144
125
145
-
The next step is to add the more complex Telerik UI Grid to your project. You will bind the Grid to data, and this requires adding a model and controller.
126
+
Binding the Grid requires adding a model and controller. The Wizard has done the following automatically:
146
127
147
-
1.Add a `Models` folder to the project. Create an `OrderViewModel` class and add it to the `Models` folder.
128
+
1.Added a `Models` folder to the project. Created an `OrderViewModel` class and added it to the `Models` folder.
148
129
149
130
The model represents the shape of the data that the Grid will display.
150
131
@@ -185,13 +166,11 @@ The next step is to add the more complex Telerik UI Grid to your project. You wi
185
166
186
167
>When the Grid is bound to a strongly-typed model such as the OrderViewModel, it automatically detects the data types of the fields.
187
168
188
-
1.Right-click the `Controllers` folder. Select **Add** > **Controller...**, and then select **Add**.
169
+
1.Created a new Controller and named the file `GridController`.
189
170
190
171
The controller handles the incoming requests, retrieves the model data, and then returns the requested data.
191
172
192
-
1. Name the file `GridController`.
193
-
194
-
1. In `GridController.cs`, add the following declarations at the top. They enable the data processing by the Telerik UI extensions:
173
+
1. In `GridController.cs`, added the following declarations at the top. They enable the data processing by the Telerik UI extensions:
195
174
196
175
```
197
176
using Kendo.Mvc.Extensions;
@@ -202,7 +181,7 @@ The next step is to add the more complex Telerik UI Grid to your project. You wi
202
181
using TelerikAspNetCoreApp.Models;
203
182
```
204
183
205
-
1. In `GridController.cs`, add an ActionMethod that will return the data for the Grid.
184
+
1. In `GridController.cs`, added an ActionMethod that will return the data for the Grid.
206
185
207
186
```
208
187
public class GridController : Controller
@@ -224,7 +203,7 @@ The next step is to add the more complex Telerik UI Grid to your project. You wi
224
203
}
225
204
```
226
205
227
-
1. In the `~/Views/Home/Index.cshtml` file, add the Grid:
206
+
1. In the `~/Views/Home/Index.cshtml` file, added the Grid:
Next, you will add another Telerik UI component to the project—the [Telerik UI DatePicker]({% slug htmlhelpers_datepicker_aspnetcore %}). You can add the DatePicker as an HTML or Tag Helper. Whether you select the HTML or Tag Helper syntax depends on what you have configured when you have [created the project](#creating-the-project).
265
+
266
+
Utilize the [Telerik UI DatePicker]({% slug htmlhelpers_datepicker_aspnetcore %}) component by adding the snippet from the following example to `~/Views/Home/Index.cshtml`.
267
+
268
+
```HtmlHelper
269
+
<div class="text-center">
270
+
<h2>Telerik UI DatePicker for ASP.NET Core</h2>
271
+
@(Html.Kendo().DatePicker()
272
+
.Name("my-picker")
273
+
)
274
+
</div>
275
+
```
276
+
```TagHelper
277
+
<div class="text-center">
278
+
<h2>Telerik UI DatePicker for ASP.NET Core</h2>
279
+
<kendo-datepicker name="my-picker"/>
280
+
</div>
281
+
```
282
+
283
+
Run the project. The following result is visualized in the browser:
Copy file name to clipboardExpand all lines: docs-aspnet/vs-integration/configure-project-wizard.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ The configuration wizard handles the following tasks:
30
30
The **Theme Selection** page enables you to change the [visual theme](https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#getting-started) of your {{ site.product }} application.
31
31
32
32
{% if site.core %}
33
-
33
+
34
34
{% else %}
35
35
36
36
{% endif %}
@@ -46,7 +46,7 @@ The **Project Settings** page allows you to modify the project settings by confi
46
46
-**Use CDN Support**—Enables or disables the [Kendo UI CDN support](https://docs.telerik.com/kendo-ui/intro/installation/cdn-service).
47
47
48
48
{% if site.core %}
49
-
49
+
50
50
{% else %}
51
51
The **Project Settings** page enables you to modify the project settings by configuring the following options:
@@ -82,12 +91,11 @@ The **Project Settings** page enables you to modify the project settings by conf
82
91
- **Copy Global Resources**—Copies the localization files to {% if site.core %}`~/wwwroot/lib/kendo-ui/js/messages`{% else %}`~/Scripts/kendo/{version}/cultures`{% endif %}.
83
92
- **Use CDN Support**—Enables or disables the [Kendo UI CDN support](https://docs.telerik.com/kendo-ui/intro/installation/cdn-service).
The wizard automates several steps that are crucial for the project configuration. If you decide to perform these steps manually, follow the links below:
92
100
93
101
- [Adding the NuGet Package]{% if site.core %}({% slug gettingstarted_aspnetmvc6_aspnetmvc %}#adding-the-nuget-package){% else %}({% slug setupwithnuget_aspnetmvc %}#installing-the-nuget-package){% endif %}
0 commit comments