Cannot get “Kendo UI for Angular 2” components to work

By : Rethic
Source: Stackoverflow.com
Question!

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');
    }
}
By : Rethic


Answers

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



Tweaking a bit from this wonderful Ed Morton's answer,

awk -v d=3 '{sfx=0; for(i=1;i<=NF;i+=d) {str=fs=""; for(j=i;j<i+d;j++) \ 
      {str = str fs $j; fs=" "}; print str > ("output_file_" ++sfx)} }' file

will do the split-up of files as you requested.

Remember the awk variable d defines the number of columns to split-upon which is 3 in your case.

By : Inian


$ awk '{for (i=1;i<=NF;i+=3) {print $i,$(i+1),$(i+2) > ("output" ((i+2)/3) ".txt")}}' file.txt

#  output1.txt
ID Name Place
19 john NY
20 Jen NY

#  output2.txt
ID Name Place
23 Key NY
22 Jill NY

#  output3.txt
ID Name Place
22 Tom Ny
22 Ki LA

#  output4.txt
ID Name place
24 Jeff NY
34 Jack Roh
By : jas


This video can help you solving your question :)
By: admin