Rethic Rethic - 1 year ago 123
AngularJS Question

Cannot get "Kendo UI for Angular 2" components to work

I'm attempting to build a demo application that utilizes the "Kendo UI for Angular 2" controls, but I can only seem to get the Button control to work. All of the other controls either display wrong or do not display at all. I could really use some help so I can figure out if the product is worth the cost for a new long-term project we are starting up.

In the example below, I'm using Angular 2 to display their button and a dropdown list. Only the button works. Please help me get this sample working. I've spent way too long trying to figure this out.

package.json (truncated for brevity)

"dependencies": {
"@progress/kendo-angular-buttons": "^0.10.2",
"@progress/kendo-angular-dropdowns": "^0.10.2",

systemjs.config.js (truncated for brevity)

map: {
app: 'app',
'rxjs': 'npm:rxjs',
'@progress': 'npm:@progress',
'@telerik': 'npm:@telerik',
packages: {
"@progress/kendo-angular-dropdowns": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
"@progress/kendo-angular-buttons": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
'@telerik/kendo-dropdowns-common': { main: './dist/npm/js/main.js', defaultExtension: 'js' },


// Application
import { AppComponent } from './app.component';

// Misc Modules
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';

// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

// Test Pages
import { KButtonComponent } from './components/k.button.component'
import { KDropDownListComponent } from './components/k.dropdownlist.component'

imports: [
BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, ButtonsModule, DropDownsModule ],
declarations: [ AppComponent, KButtonComponent, KDropDownListComponent ],
providers: [],
bootstrap: [ AppComponent ]

export class AppModule { }


import { Component } from '@angular/core';

// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { Component } from '@angular/core';

selector: 'my-app',
template: `
<button kendoButton (click)="onButtonClick()" [primary]=true>Button!</button> This works!
<kendo-dropdownlist [data]="listItems"></kendo-dropdownlist> This doesn't even display.
styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css', '../node_modules/@progress/kendo-angular-dropdowns/dist/npm/css/main.css' ]

export class AppComponent {
listItems: Array<string> = ['This', 'is', 'really', 'upsetting'];

onButtonClick() {
alert('The only working Kendo component');

Answer Source

Install the default Kendo theme ( using the command npm install --save @telerik/kendo-theme-default.

Specify the CSS file in your index.html and all the controls will display as intended.

<link rel="stylesheet" href="./node_modules/@telerik/kendo-theme-default/dist/all.css">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download