Getting Started

First Steps

Welcome to the First Steps guide on getting started with Progress® Telerik® UI for ASP.NET MVC with Visual Studio!

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 MVC in your project by using the Telerik UI DatePicker HtmlHelper. For its purposes, the guide uses Visual Studio for Windows 2019.

To configure an ASP.NET MVC web application to use UI for ASP.NET MVC, you can use either of the following approaches:

To get up and running with the project:

  1. Download the controls
  2. Create the ASP.NET MVC Web Application
  3. Add the Telerik NuGet Feed to Visual Studio
  4. Add the UI for ASP.NET MVC NuGet package
  5. Include the Telerik UI for ASP.NET MVC client-side resources
  6. Reference the Kendo.Mvc.dll assembly
  7. Update the web.config file of the application
  8. Set the HtmlHelper initialization

Creating the Application

  1. Open Visual Studio for Windows 2019 and select Create a New Project.
  2. Select ASP.NET Web Application (.NET Framework) and click Next.
  3. Set a name and location for the project and click Create.
  4. Select MVC and click Create.

Add the Telerik NuGet Feed to Visual Studio

  • Add the Telerik NuGet Feed for Trial License Users
  • Add the Telerik NuGet Feed for Users with Commercial License

Add the Telerik NuGet Feed for Trial License Users

  1. If you don't have an active license, download an UI for ASP.NET MVC trial. During the installation of the components, you can setup the Telerik NuGet feed to be added automatically - check the "Set up Telerik NuGet package source" checkbox:

    NuGet checkbox in Progress Trial Installer

Add the Telerik NuGet Feed for Users with Commercial License

  1. If you have an active commercial UI for ASP.NET MVC license, you can automatically set up the NuGet Feed through the Progress Control Panel. Download the Progress Control Panel from the Overview page of your Telerik account.

    Download Progress Control Panel

  2. When logging in the Progress Control Panel, check the "set up Telerik NuGet package source" option.

    Set Up Nuget on Progress Control Panel Login

    If you miss to set up the Nuget Feed on login, go to the Progress Control Panel options and scroll to Nuget Settings. Enter your Telerik credentials and click Save and Close button.

    Set Up Nuget on Progress Control Panel options

    Adding the NuGet Package

  3. Open the NuGet Package Manager.

    Locating and opening the NuGet package manager menu

  4. Click the Browse tab and search for Telerik.UI.for.AspNet.MVC to install it.

    Selecting and installing the NuGet package

Including the Client-Side Resources

  • The CDN links and/or package versions have to point to the same UI for ASP.NET MVC version which your project references.
  • The Kendo UI scripts have to be placed after jQuery.

To include the necessary Telerik UI for ASP.NET MVC JavaScript and CSS files:

  1. Go to ~\Views\Shared\_Layout.cshtml and add the theme of your choice to the <head> of the document. Since the Microsoft project uses Bootstrap, you can use the Kendo UI SASS Bootstrap v4 theme to match it.

  2. The Microsoft ASP.NET Web Application template comes with a jQuery script reference at the end of _Layout.cshtml file:

    @Scripts.Render("~/bundles/jquery")

Find it and remove it. The Kendo UI script files required by UI for ASP.NET Core must be loaded in the <head> tag after the jQuery script.

  1. Copy and paste the scripts from the snippet bellow to the <head> tag in the _Layout. The content of the <head> tag with the theme file and the script files included should look as shown in the snippet below. kendo.all.min.js and kendo.aspnetmvc.min.js script files have to be loaded after the jquery.min.js script. jQuery should be loaded only once in the <head> tag. Make sure there are no duplicate references elsewhere in the _Layout.

    <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title - My Telerik MVC Application</title>

<link href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>

Adding the Kendo.Mvc.dll Reference

The Kendo.Mvc.dll assembly contains the Telerik UI for ASP.NET MVC helpers. Kendo.Mvc.dll depends on the latest version of System.Web.Mvc. If the application uses a previous MVC version, upgrade to the latest version.

  1. Right-click the References node in Solution Explorer. Click Add Reference.
  2. Select the Browse tab of the Add Reference dialog. Navigate to the install location of Telerik UI for ASP.NET MVC.
  3. Navigate to wrappers/aspnetmvc/Binaries/MVC5. This directory contains the ASP.NET MVC 5 version of Telerik UI for ASP.NET MVC.
  4. Select Kendo.Mvc.dll. Click OK.

Alternatively, use the following approach:

  1. Copy the assembly from the Telerik UI for ASP.NET MVC install location.
  2. Paste the assembly in the bin folder of the application.
  3. Add a reference to the assembly in Visual Studio.

Updating the web.config File

By updating the web.config file of the web application you indicate the Kendo.Mvc.UI namespace where the helpers are located. For issues related to unmatching System.Web.Mvc versions, refer to the article on troubleshooting.

  1. Open Views/Web.config or, if using ASPX, the root Web.config file.
  2. Locate the namespaces tag.

  3. Append an add tag to the namespaces tag.

    <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    <add namespace="Kendo.Mvc.UI" />
</namespaces>

  4. Add a binding redirect to your current System.Web.Mvc version.

    <configuration>
    <runtime>
        <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
            <dependentAssembly>
                <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
                <bindingRedirect oldVersion="1.0.0.0-5.2.7.0" newVersion="5.2.7.0" />
            </dependentAssembly>
        </assemblyBinding>
    </runtime>
</configuration>

Setting the HtmlHelper Initialization

When you use a Kendo UI widget through its MVC server-side wrapper initialization:

  1. Create a model in the Models folder of the application.

    public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public Nullable<decimal> UnitPrice { get; set; }
    public bool Discontinued { get; set; }
}

  2. Open the ~/Views/Home/Index.cshtml view or, if using ASPX, the Index.aspx file.

  3. Add a Kendo UI Grid HtmlHelper.

        <div class="text-center">
        <h2>Kendo UI Grid</h2>
        @(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.ProductID).Width(100);
                columns.Bound(c => c.ProductName).Width(300);
                columns.Bound(c => c.UnitPrice).Width(100);
                columns.Bound(c => c.Discontinued).Width(200);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Select", "Home"))
            )
        )
    </div>

  4. Open the HomeController.cs and add a new action method which will return the data as JSON. The Grid makes Ajax requests to this action. Import the Kendo.Mvc.UI and the Kendo.Mvc.Extensions namespaces do that you can use Kendo.Mvc.UI.DataSourceRequest and the ToDataSourceResult extension method.

    public ActionResult Select([DataSourceRequest]DataSourceRequest request)
{
    var data = Enumerable.Range(1, 10)
        .Select(index => new Product
        {
            ProductID = index,
            ProductName = "Product #" + index,
            UnitPrice = index * 10,
            Discontinued = false
        });

    return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

  5. Press CTRL+F5 to build and run the application. As a result, the following sample page is created.

    Sample page

Next Steps

See Also

In this article
Related articles
Not finding the help you need? Improve this article