Skip to content

Latest commit

 

History

History
156 lines (108 loc) · 7.13 KB

manual-setup.md

File metadata and controls

156 lines (108 loc) · 7.13 KB
title page_title description slug position permalink
Adding Telerik UI through Local Files
Adding Telerik UI through Local Files
Learn how to manually set up Telerik UI for ASP.NET MVC by using local files in a sample project created with Visual Studio.
manualsetup_aspnetmvc
3
/getting-started/manual-setup

Adding Telerik UI through Local Files

This article describes how to manually configure an ASP.NET MVC application to use the Telerik UI controls. You will learn how to add the Kendo.Mvc.dll assembly that contains the UI for ASP.NET MVC helpers by using locally available files. You will also add the required namespaces and client-side resources like CSS files and Kendo UI scripts.

The method described here is applicable both to new and already existing projects. An alternative approach that automatically adds the namespaces and the Kendo.Mvc.dll assembly to the project is the [Setup with Telerik NuGet]({% slug setupwithnuget_aspnetmvc %}).

Prerequisites

Creating the Application

If you already have an existing project and you want to add Telerik UI for ASP.NET MVC to the application, skip this section and continue with Including the Client-Side Resources.

To create the application:

  1. Open Visual Studio 2019 for Windows. In the toolbar, select File > New > Project.
  2. Search for and select ASP.NET Web Application C# and click Next.
  3. Set a name and location for the project and click Create.
  4. Select the MVC template and click Create.

@template

Downloading and Referencing the Kendo.Mvc.dll Assembly

The Kendo.Mvc.dll assembly contains the UI for ASP.NET MVC Html helpers. Follow the steps below to download it and reference it in the project:

  1. Log in to your Telerik account.

  2. Download the installation file:

    • If you use the free trial, follow this link to download the installer. Once the installation completes, your free trial will be activated and you can continue with the next step.

    • If you have already purchased a license, continue with the next step.

  3. Go to the Telerik UI for ASP.NET MVC download page and download the Telerik UI zip bundle.

    • If you use the free trial, download the telerik.ui.for.aspnetmvc.{{ site.mvcCoreVersion }}.trial.zip file.

    • If you have purchased a license, download the telerik.ui.for.aspnetmvc.{{ site.mvcCoreVersion }}.commercial.zip file.

  4. Open the downloaded bundle and extract the Kendo.Mvc.dll from the \wrappers\aspnetmvc\Binaries\Mvc5\ folder to the bin folder of your project.

  5. Right-click References in the Visual Studio Solution Explorer, browse to the bin folder, select the Kendo.Mvc.dll, and add it as reference to the project.

Adding the Kendo.Mvc.UI Namespace

Add the Kendo.Mvc.UI namespace to the ~/Views/Home/Index.cshtml view.

    @using Kendo.Mvc.UI

Initializing the Grid HtmlHelper

Perform the steps below to add a Grid to the project:

  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 and add the 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>

  3. Open the HomeController.cs and import the Kendo.Mvc.UI and the Kendo.Mvc.Extensions namespaces so that you can use Kendo.Mvc.UI.DataSourceRequest and the ToDataSourceResult extension method in the next step.

    using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

  4. Additionally, import the namespace for the model that you created in step 1.

  5. In the HomeController.cs, add a new action method which will return the data as JSON. The Grid makes an Ajax request to this action, to get its data.

    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);
}

Building and Running the Application

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

{{ site.product_short }} Sample page

Adding Your License File

Using any client-side assets from the [Kendo UI CDN]({% slug cdnservices_core %}) or the @progress/kendo-ui NPM package requires you to add a Telerik license file to your application. A missing license file triggers [a banner, a watermark, and causes a warning message]({% slug troubleshooting-license-key-errors %}) in the browser's console.

To generate your license file and add it to your application, follow the instructions in the [Installing a License File]({% slug installation_license_key_aspnetcore %}) article.

Next Steps

  • [Explore the Telerik UI for ASP.NET MVC fundamentals]({% slug fundamentals_aspnetmvc %})
  • [Grid Overview]({% slug htmlhelpers_grid_aspnetcore_overview %})
  • [Integrate Telerik UI for ASP.NET MVC in Visual Studio]({% slug overview_visualstudio_aspnetcore %})

See Also