This is a migrated thread and some comments may be shown as answers.

Getting Started

5 Answers 639 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Will asked on 19 Dec 2016, 04:38 PM

I am an experienced developer and know the fundamentals of MVC. I bought Kendo UI Complete so that I can provide professional UI components on my websites at low development cost - i.e. avoid spending days experimenting. I've gone through http://docs.telerik.com/aspnet-core/getting-started and found it very disappointing in the following respects:

1. It contains typos - for example _Layout.cshtml is called Layout.cshtml

2. It creates a webapp with a lot of extra stuff that I don't want. I like to start with a minimal app and then add features.

3. The relationship between Bootstrap and Kendo style sheets / js isn't clear. I expect to be able to apply a custom theme to my website that works with all the Kendo widgets, but my attempts to change theme result in badly presented components.

4. There isn't clear differentiation of documentation that is Kendo UI for .NET Core specific.

5. Kendo documentation is badly organised. I'm not even told what version of what product it was last tested on.

In order to resolve these problems I am proposing this thread as an alternative starting point for people who are new to Kendo UI for .NET Core. Perhaps someone would kindly write a better set of instructions than http://docs.telerik.com/aspnet-core/getting-started and then keep them up-to-date.

5 Answers, 1 is accepted

answered on 19 Dec 2016, 08:06 PM

This is the sort of thing I was thinking about - please comment...

Adding Kendo UI Core to an existing ASP.NET Core Web Application using VS2015

(File | New - Project - Other Languages - Visual C# - Web - ASP.NET Core Web Application > Web Application)

Step 1 Open the NuGet Package Manager.
Step 2 Choose the Telerik package source and search for Telerik.UI.for.AspNet.Core.
Step 3 Install the Telerik.UI.for.AspNet.Core package to Solution's project.json

"dependencies": {
…
    "Telerik.UI.for.AspNet.Core": "2016.3.1118",
…

Step 4 Open Startup.cs, using a text editor (IDE) and update ConfigureServices

        public void ConfigureServices(IServiceCollection services)
        {
            // Add framework services.
            services.AddApplicationInsightsTelemetry(Configuration);

            services.AddMvc();

            // Add Kendo UI services to the services container
           services.AddKendo();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();

…

            // Configure Kendo UI
            app.UseKendo(env);
        }

Step 5 Import the Kendo.Mvc.UI namespace in ~/Views/_ViewImports.cshtml.

   @using Kendo.Mvc.UI

Step 6 Copy the following folders from the telerik.ui.for.aspnetmvc archive

wwwroot\Content\Kendo
wwwroot\Scripts\Kendo

Step 7 Register the Kendo UI styles and scripts in ~/Views/Shared/_Layout.cshtml.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebAspCore1</title>
    <link href="@Url.Content("~/Content/kendo/2016.3.1118/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.3.1118/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.3.1118/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.3.1118/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2016.3.1118/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2016.3.1118/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.3.1118/jszip.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.3.1118/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2016.3.1118/kendo.aspnetmvc.min.js")"></script>
…

Step 8 Remove JQuery from ~/Views/Shared/Layout.cshtml.

    <environment names="Development">
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

Step 9 Add Kendo UI Date Picker to ~/Views/Home/About.cshtml

@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>
<p>Use this area to provide additional information.</p>
@(Html.Kendo().DatePicker()
.Name("datepicker")
)

Step 10: Build and Run

click About and correctly formed date picker should appear

answered on 19 Jun 2017, 04:32 PM

Hello all,

Thank you for the feedback.

Indeed creating a .NET Core project can be a bit hard, I have experience the same troubles myself when .NET Core was initially announced and something that works on one machine does not works on another. Even more when aspnet team are making a lot of breaking changes.

Making generic tutorial that is always correct for all machines, visual studios and versions of the platform is not a trivial task. The balance between making an article too long, and making it simple with the key details is the hardest part.

Additionally our documentation is open sourced here:
https://github.com/telerik/kendo-ui-core/tree/master/docs-aspnet-core
You could always make a pull request to help others and earn some points, or simply create an issue and we will take care of it.

At least but not last, we also ship the VS extensions, which makes possible for you to create project with just a few clicks. http://docs.telerik.com/aspnet-core/vs-integration/introduction

Regards,
Vasil
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.