Kendo UI and ASP.NET Boilerplate - Getting started

2 posts, 0 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 21 Oct Link to this post

    Hi,

    Today, with help of Telerik support, I've included Kendo UI in ASP.NET Boilerplate application. Since I can't find any posting on this, I share our results with you.

    Integrating the Kendo UI CDN scripts in Angualar project:


    1) Add the Kendo UI styles to the "layout.cshtml" page, inside the Web project, "App" folder:
        - file path: testProject\testProject.Web\App\Main\views\layout\layout.cshtml
        - styles added:

    <head>
        ....
        @Scripts.Render("~/Bundles/App/Main/js")
      
    </head>

     

    2) Add the Kendo UI scripts to the "layout.cshtml" page, inside the Web project, "App" folder:
        - file path: testProject\testProject.Web\App\Main\views\layout\layout.cshtml
        - project already contains jQuery and Angular scripts
        - Note: the insert of Kendo UI scripts must be after loading jquery. This differs between Boilerplate project types.
        - Script insert at bottom of file:

    ....
    @Html.IncludeScript(ScriptPaths.JQuery_Timeago_Localization)
     
    <!-- Scripts of Kendo UI -->
     
    <!-- Dynamic scripts of ABP system (They are created on runtime and can not be bundled) -->
    ....

     

    3) Register the Kendo UI directives in the application module:

        - file path: \testProject\testProject.Web\App\Main\app.js
        - modify app module:

    var app = angular.module('app', [
        'ngAnimate',
        'ngSanitize',
        'kendo.directives', //--  <<< Add this directive
        'ui.router',
        'ui.bootstrap',
        'ui.jq',
        'abp'
    ]);

     

    4) Test example Kendo UI widget to a view in the project:
        - file path: \testProject\testProject.Web\App\Main\views\tenants\index.cshtml
        - modify page: 

    <div ng-controller="app.views.tenants.index as vm">
        <h1>@L("Tenants")</h1>
      
        <input kendo-date-time-picker style="width: 100%;" />

     

  2. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 24 Oct Link to this post

    Hello Erik,

    Thank you for sharing this example with the Kendo UI community. 

    I'm sure that this will prove useful for other developers working with these technologies.

    We do appreciate when examples like this are shared with the community.

    Regards,
    Stefan
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. Kendo UI is VS 2017 Ready
Back to Top