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

Getting Started

5 Answers 470 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Will
Top achievements
Rank 1
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

Sort by
0
Will
Top achievements
Rank 1
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

 

 

0
Will
Top achievements
Rank 1
answered on 09 Apr 2017, 10:29 AM

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).

 

0
Patrick
Top achievements
Rank 2
answered on 14 Jun 2017, 03:23 PM
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!
0
Vasil
Telerik team
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.
0
Martin
Top achievements
Rank 1
answered on 27 Mar 2019, 04:57 AM

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.

Tags
General Discussions
Asked by
Will
Top achievements
Rank 1
Answers by
Will
Top achievements
Rank 1
Patrick
Top achievements
Rank 2
Vasil
Telerik team
Martin
Top achievements
Rank 1
Share this question
or