Getting Started

6 posts, 0 answers
  1. Will
    Will avatar
    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.

     

  2. Will
    Will avatar
    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

     

     

  3. Will
    Will avatar
    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).

     

  4. Patrick
    Patrick avatar
    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!
  5. Vasil
    Admin
    Vasil avatar
    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.
  6. Martin
    Martin avatar
    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.

Back to Top