Welcome to the Getting Started with Progress® Telerik® UI for ASP.NET MVC in Visual Studio tutorial!
The fastest way to start with Telerik UI is with a project template, but you can also manually add the Telerik controls to an existing application.
This tutorial guides you through implementing the Telerik UI for ASP.NET MVC Grid and Datepicker in a new application. To create the application, you will use the project template provided by the Visual Studio Extensions that come with the Telerik UI for ASP.NET MVC installation.
The Telerik extensions streamline the Telerik UI for ASP.NET MVC setup by automatically adding the necessary references and configuration. These extensions also provide a wizard that can configure an existing ASP.NET MVC application for the Telerik controls.
Other popular approaches for starting with Telerik UI for ASP.NET MVC include:
- Setup with Telerik NuGet—this method allows you to download the Telerik controls by using the NuGet package manager in Visual Studio.
Manual setup with local files—with this method, you add the
Kendo.Mvc.dllassembly to your project by using local files. This assembly enables you to use the Telerik UI components.
Telerik UI for ASP.NET MVC requires the .NET Framework.
Visual Studio 2012 or later.
For Visual Studio 2017 or later, you must install the ASP.NET & web development workload. See Microsoft's Install Visual Studio workloads documentation for guidance.
Follow these steps to download and install Telerik UI for ASP.NET MVC:
Log in to your Telerik account.
If you don't have a Telerik account yet, you can create one for free.
Download the installation file:
To get the free trial version, follow this link to download UI for ASP.NET MVC. The installer will activate your trial when you complete the installation.
If you have already purchased a license:
Click Downloads in the top navigation bar of your Telerik account.
Click UI for ASP.NET MVC.
.msiinstaller file from the Installation section.
Close any running Visual Studio instances and run the Telerik UI for ASP.NET MVC installer. The automatic setup will guide you through the rest of the installation. The Telerik Visual Studio Extensions are installed by default.
The default installation folder is
C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC<version>.
After the Visual Studio Extensions are installed, create a Telerik ASP.NET MVC application by using the Create New Project wizard in Visual Studio.
In the Visual Studio toolbar, click File > New > Project.
Search for and select the Telerik ASP.NET MVC C# project template. Click Next.
Select the GRID AND MENU template.
For more information on the additional predefined Telerik template options, refer to the Creating New Projects article.
Select the Default-v2 visual theme for your Telerik ASP.NET MVC Application, and click Finish to complete the creation of the application.
The newly created application already has a reference to the required
Kendo.Mvc.dll assembly. The wizard also references the client-side resources (the Kendo UI script and theme-related CSS files) in the
You can now start adding components.
As a result of selecting the GRID AND MENU template, a Grid component has been added to the
Index.cshtml view, and a Menu to the
_Layout.cshtml. The Grid is configured and bound remotely to sample data returned by the
GridController. The next step is to add an additional component to the application.
Add a DatePicker to the
<h4>Telerik UI for ASP.NET MVC DatePicker:</h4> @(Html.Kendo().DatePicker() .Name("datepicker") // The Name of the DatePicker is mandatory. It specifies the "id" attribute of the component. .Value(DateTime.Today) // Sets the value of the DatePicker. )
CTRL+F5 to build and run the application. You have a Grid and a DatePicker on your page.
Using any client-side assets from the Kendo UI CDN or the @progress/kendo-ui NPM package requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers a banner, a watermark, and causes a warning message in the browser's console.
To generate your license file and add it to your application, follow the instructions in the Adding a License File article.
- Explore the Telerik UI for ASP.NET MVC fundamentals
- Grid Data Binding Overview
- Integrate Telerik UI for ASP.NET MVC in Visual Studio