CODEWITHSUNDEEP
angularkendo-uikendo-ui-angular2
Rethic
Rethic

Reputation: 1081

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. Thanks!

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' },
  ...
}

app.module.ts

// 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'

@NgModule({
    imports: [
        BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, ButtonsModule, DropDownsModule ],
    declarations: [ AppComponent, KButtonComponent, KDropDownListComponent ],
    providers: [],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

app.component.ts

            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';

@Component({
    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');
    }
}

Upvotes: 1

Views: 3511

Answers (2)

Rethic
Rethic

Reputation: 1081

Install the default Kendo theme (https://www.npmjs.com/package/@telerik/kendo-theme-default) 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">

Upvotes: 2

user2850987
user2850987

Reputation: 61

Everything looks correct except for your systemjs.config.js configuration. Your package definitions need to match the maps to the libraries you defined. This is my configuration and works, just replace my grid component definition with your component definitions.

systemjs.config.js

// map tells the System loader where to look for things
map: {
    'app': 'dist',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    ...
    '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
    '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
    '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
  },

  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
    'app': {
      main: './app.main.js',
      defaultExtension: 'js'
    },
    ...
    '@progress/kendo-angular-intl': {
      main: './dist/npm/js/main.js',
      defaultExtension: 'js'
    },
    '@progress/kendo-angular-grid': {
      main: './dist/npm/js/main.js',
      defaultExtension: 'js'
    },
    '@telerik/kendo-intl': {
      main: './dist/npm/js/main.js',
      defaultExtension: 'js'
    }
  }
});

Upvotes: 1

Related Questions