Блог

На основе http://www.telerik.com/kendo-angular-ui/getting-started Я начал с webpack QS и получил кнопку, чтобы показать нормально. Затем я запустил http://www.telerik.com/kendo-angular-ui/components/grid / учебное пособие. Весь пример сетки показан как просто текст без сетки вокруг них. Примеры, похоже, работали в plunker с SystemJS. Означает ли это, что @progress /kendo-angular-grid не будет работать с webpack?

Или, может быть, подсказка, чтобы сказать мне, что я делаю не так? Спасибо

Просто запустил все с помощью ванильного SystemJS, и я получаю те же результаты. Кажется, код, используемый в plunker, использует «@progress»: ‘http://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress ‘, ‘@telerik’: ‘http://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik ‘, Но мой код не может получить к нему доступ. Поэтому я использую whats в node_modules/ после: npm install —save @progress/kendo-angular-grid, но результатом является не сетка, а просто:

ProductName(0) Цена единицы измерения(1) Чай 18

Пожалуйста, следуйте решению:

ng добавить @progress /kendo-angular-grid

в моем проекте, построенном на основе angular cli, не удалось установить элементы управления kendo ui. Я попытался создать проект с помощью angular quick start project, я мог бы установить сетку / диалоговое окно пользовательского интерфейса kendo, но, похоже, ничего не работает. просто показал текст с базовым макетом. Справка….

Вы должны использовать путь @progress вместо пути @telerik . @telerik предназначен только для демонстрационных целей. Если сетка отображается правильно (ошибок нет, и для вашей сетки сгенерированы соответствующие теги пользовательского интерфейса kendo), я думаю, вы неправильно импортируете стили. Для каждой сетки (и зависимости) вам нужно будет включить файл css.

итак, в моем файле vendor.ts, который является записью webpack, я добавил:

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

Я могу подтвердить, что сетка корректно работает с Webpack.

Он работает с web pack. В вашем модуле вы должны указать компонент kendo следующим образом :

 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) {}  
}
  

а затем в вашем home.component.html :

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

gridData — это любой массив [], который вы можете определить в home.component.ts

Но перед этим вы должны выполнить следующие действия :

 >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
  

У меня была такая же проблема. Я следил за руководством по Kendo и получил кнопку, работающую без каких-либо проблем, но все остальные виджеты пользовательского интерфейса отображались некорректно. Я использую подход angular-cli и сделал следующее, чтобы исправить эту проблему:

Как описано в руководстве по началу работы с Kendo, установлены стили css npm install -S @telerik/kendo-theme-default

Но вместо того, чтобы ссылаться на .css из компонента, я помещаю его в файл angular-cli.json:

     {
      "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"
          ],
          ...
  

У меня те же проблемы, но я все еще не нашел решения? Я добавил css в свой файл angular-cli.json. Не только шаблоны верхнего и нижнего колонтитулов не работают, но и когда я пытаюсь добавить GroupHeaderTemplate, я получаю следующую ошибку консоли: «Отклонение необработанного обещания: ошибки синтаксического анализа шаблона: невозможно привязать к ‘group’, поскольку это неизвестное свойство ‘kendo-grid’. 1. Если «kendo-grid» является компонентом Angular и имеет «групповой» ввод, затем убедитесь, что он является частью этого модуля. «

И да, я добавил импорт GridModule..

Сетка пользовательского интерфейса Kendo отлично работает для меня в случае SystemJS (не пробовал с webpack)

Вот как выглядит мой компонент-

 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
    }];
}
  

В AppModule импортируйте GridModule следующим образом-

 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 { }
  

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

И в index.html-

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

Вывод выглядит примерно так-

Моя среда-

Версия Angular2: окончательная 2.0.0

@progress / kendo-angular-grid: 0.3.3

Посмотрите, поможет ли это.