Getting Started in UI for ASP.NET Core General Discussions

Will

5 posts

Member since:
Jul 2014

Posted 19 Dec 2016 Link to this post

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.

Will

5 posts

Member since:
Jul 2014

Posted 19 Dec 2016 Link to this post

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

Will

5 posts

Member since:
Jul 2014

Posted 09 Apr 2017 Link to this post

Sorry, but these instructions no longer seem to work for the latest releases of the product. Telerik have used my suggestions (above) to create documentation - see

http://docs.telerik.com/aspnet-core/getting-started/getting-started

Unfortunately, they don't seem to have bothered to keep it up-to-date with the latest releases of the product. Certainly, I was NOT able to create a new ASP.NET Core MVC WebApp using the Microsoft template (Project Wizard) and then apply the instructions at the above link in order to successful integrate Kendo UI for ASP.NET Core (20017.1.223).

Patrick

33 posts

Member since:
Aug 2011

Posted 14 Jun 2017 Link to this post

Hi M. Will. Welcome to Telerik world. Documentation is the worst side of Telerik. I lost 4 hours to try to integrate UI for ASP.NET Core with no success. For this package, I move to competition right away!

Vasil

Admin

1642 posts

Posted 19 Jun 2017 Link to this post

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.

Martin

1 posts

Member since:
Mar 2019

Posted 26 Mar 2019 in reply to Vasil Link to this post

I went through the guide https://docs.telerik.com/aspnet-core/getting-started/getting-started#getting-started-with-progress and performed this step https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources#manual-installation for adding the client side resources again with a clean project. I can't get the date picker to work correctly.

I am trying to apply these changes to a demo project framework supplied by ASP.NET Zero, getting nowhere with that either.