Angular 2 @progress/kendo-angular-grid will not work with webpack?

Question

Based on http://www.telerik.com/kendo-angular-ui/getting-started I started with the webpack QS and got the button to show fine. Then I started the the http://www.telerik.com/kendo-angular-ui/components/grid/ tutorial. All the grid example showed as just text without the grid around them. The examples seemed to work in plunker with systemJS. Does this mean that @progress/kendo-angular-grid will not work with webpack?

Or maybe a hint to tell me what I am doing wrong? Thank you

Just started everything with vanilla SystemJS and I end up with the same results. Seems the code used in plunker uses '@progress': 'http://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress', '@telerik': 'http://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik', But my code can't access it. So I use whats in node_modules/ after the: npm install --save @progress/kendo-angular-grid But the result is not a grid, just:

ProductName(0) UnitPrice(1) Chai 18

Answer 1

my angular cli scaffolded project failed to install kendo ui controls. I tried to create project using the angular quick start project, I could install kendo ui grid/dialog, but nothing seem to be working. just showed text with basic layout. help....

Answer 2

You should use the @progress path instead of the @telerik path. @telerik is for demo purposes only. If the grid is rendered correctly (there are no errors and the appropriate kendo ui tags are generated for your grid), I think you are not importing styles correctly. For each grid (and dependency), you will need to include the css file.

so in my vendor.ts file that is a webpack entry, I have added:

import '../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css';

I can confirm the grid is working correctly with Webpack.

Answer 3

It works with web pack. In your module you must specify kendo component like this :

import { NgModule, ApplicationRef } from '@angular/core';
..........
import { GridModule } from '@progress/kendo-angular-grid'; 

@NgModule({
  bootstrap: [ App ],
  declarations: [ App,About,Home,XLarge],
  imports: [  BrowserModule, FormsModule, HttpModule, GridModule, RouterModule.forRoot(ROUTES, { useHash: true }) ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
        ENV_PROVIDERS,
        APP_PROVIDERS
      ]
})
export class AppModule {
      constructor(public appRef: ApplicationRef, public appState: AppState) {}  
}

and then in your home.component.html :

<kendo-grid 
    [data]="gridData"
    [scrollable]="'virtual'"
    [rowHeight]="36"
    [height]="300"> 
</kendo-grid>

gridData is any[] array that you can define in the home.component.ts

But before this you should follow these steps :

>npm login --registry=https://registry.npm.telerik.com/ --scope=@progress
>Username : *******
>Password  : *****
>Email       : your email


>npm install --save @progress/kendo-angular-grid

you can also install other component like this

>npm install --save @progress/kendo-angular-buttons
>npm install --save @progress/kendo-angular-dropdowns
>npm install --save @progress/kendo-angular-charts

>npm install
>npm start

Answer 4

I was having the same problem. I was following the Kendo tutorial and got the button working without any problems but all of the other UI widgets were not being displayed correctly. I am using the angular-cli approach and did the following to fix this issue:

As described in the Kendo getting started tutorial, installed the styles css npm install -S @telerik/kendo-theme-default

But, rather than referencing the .css from the Component, I put it in the angular-cli.json file:

    {
      "project": {
        "version": "1.0.0-beta.17",
        "name": "kairos-cli"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": "assets",
          "index": "index.html",
          "main": "main.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.json",
          "prefix": "app",
          "mobile": false,
          "styles": [
            "styles.css",
            "../node_modules/@telerik/kendo-theme-default/dist/all.css"
          ],
          ...

Answer 5

I've got the same issues, but still haven't found a solution? I added the css in my angular-cli.json file. Not only do the header and footer templates not work, but also when I try to add a GroupHeaderTemplate, I'm getting the following console error: "Unhandled Promise rejection: Template parse errors: Can't bind to 'group' since it isn't a known property of 'kendo-grid'. 1. If 'kendo-grid' is an Angular component and it has 'group' input, then verify that it is part of this module."

And yes, I did add the GridModule import..

Answer 6

Please follow the solution:

ng add @progress/kendo-angular-grid

Answer 7

Kendo UI grid works fine for me in case systemJS (not tried with webpack)

This is how my component looks like-

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

@Component({
    selector: 'my-app',
    template: `
    <h5>My First Kendo UI grid with Angular 2 App</h5>

        <h5>kendo-grid</h5>

        <kendo-grid [data]="gridData">
            <kendo-grid-column field="ProductName">
                <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
                  {{column.field}}({{columnIndex}})
                </template>
            </kendo-grid-column>
             <kendo-grid-column field="UnitPrice">
                <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
                  {{column.field}}({{columnIndex}})
                </template>
            </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {

        private gridData: any[] = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": true
    }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false
    }, {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "UnitPrice": 10.0000,
        "Discontinued": false
    }, {
        "ProductID": 4,
        "ProductName": "Chef Anton's Cajun Seasoning",
        "UnitPrice": 22.0000,
        "Discontinued": false
    }, {
        "ProductID": 5,
        "ProductName": "Chef Anton's Gumbo Mix",
        "UnitPrice": 21.3500,
        "Discontinued": false
    }, {
        "ProductID": 6,
        "ProductName": "Grandma's Boysenberry Spread",
        "UnitPrice": 25.0000,
        "Discontinued": false
    }];
}

In AppModule, importing GridModule like this-

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@progress/kendo-angular-grid';

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

@NgModule({
  imports: [ BrowserModule, GridModule],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

In systemjs.config.js-

map: {
  // our app is within the app folder
  app: 'app',

  '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
  '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
  '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',

  .......

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

And in index.html-

<link rel="stylesheet" href="../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css">

Output looks likes this-

My Environment is-

Angular2 version: Final 2.0.0

@progress/kendo-angular-grid: 0.3.3

See if this helps.