Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Kendo UI and ASP.NET Boilerplate - Getting started

3 Answers 642 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 2
Erik asked on 21 Oct 2016, 12:01 PM

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%;" />

 

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 Oct 2016, 12:30 PM
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.
 
0
sanad
Top achievements
Rank 2
answered on 19 Sep 2020, 09:40 AM
Is there any chance you could share the source code for the Layout.cshtml. trying to implement the same in .net-core boilerplate MPA (not anguler). without any luck, still getting kendo not defined. 
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 22 Sep 2020, 06:32 PM

Hello Sanad,

The quickest way you can get the Layout.cshtml page is to create a new project using the Progress Telerik UI for ASP.NET Core Project Wizard.  The Layout page will found in the Views/Shared folder.

If there is something specific or I misunderstood the request about how to get the Layout.cshtml page, please let me know.

Regards,
Patrick
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
General Discussions
Asked by
Erik
Top achievements
Rank 2
Answers by
Stefan
Telerik team
sanad
Top achievements
Rank 2
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or