использование шаблона/компонента инкапсуляции компонента кендо

Возможно ли включить определения пользовательских столбцов через ng-content или TemplateRef или подобное? Я тестировал с помощью планкера Kendo UI Grid, доступного на сайте (http://www.telerik.com/kendo-angular-ui/components/grid/), а также дочерний компонент Angular2 как данные, но безрезультатно. Я также пробовал выбирать ng-content, но тоже ничего. Любая помощь приветствуется, спасибо!

@Component({
  selector: 'test-component',
  template: 
  `
    <kendo-grid [data]="Data">
    <kendo-grid-column></kendo-grid-column>
      // ??? // <ng-content kendo-grid-column></ng-content> // [object Object]
      // ??? // <kendo-grid-column ng-content></kendo-grid-column> // [object Object]
    </kendo-grid>
  `
})
export class TestComponent {
  @Input() Data: any;
}

@Component({
    selector: 'my-app',
    template: `
        <test-component [Data]="gridData">
          <kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
          <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
          <kendo-grid-column field="UnitPrice" title="Unit Price" width="230"></kendo-grid-column>
          <kendo-grid-column field="Discontinued" width="120">
              <template kendoCellTemplate let-dataItem>
                  <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
              </template>
          </kendo-grid-column>
        </test-component>
    `
})
export class AppComponent { ... }

angular angular2-template kendo-ui-angular2 angular2-ngcontent
person Kent    schedule 03.01.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как ответил @rusev в предыдущем комментарии ... это сработает для меня, спасибо!

GridComponent использует ContentChildren для выбора определенных столбцов, что не работает с включением. Возможный обходной путь: plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview

Это ответ, который можно увидеть в plunkr

import { Component, Input, ContentChildren, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ColumnComponent, GridComponent } from '@progress/kendo-angular-grid';

const resolvedPromise = Promise.resolve(null); //fancy setTimeout

@Component({
  selector: 'test-component',
  template: 
  `
    <kendo-grid [data]="Data">
    </kendo-grid>
  `
})
export class TestComponent {
  @Input() Data: any[];

  @ContentChildren(ColumnComponent) columns;
  @ViewChild(GridComponent) grid;

  constructor(private cdr: ChangeDetectorRef ) {}
  ngAfterContentInit() {
    resolvedPromise.then(() => { 
      this.grid.columns.reset(this.columns.toArray());
    });
  }
}

@Component({
    selector: 'my-app',
    template: `
        <test-component [Data]="gridData">
            <kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
        </test-component>
    `
})
export class AppComponent { ... }
person Kent    schedule 05.01.2017
comment
Пример с плункером больше не работает. В моей локальной реализации я получаю следующую ошибку: _v.context.$implicit.resolveStatus имеет значение null. И кажется, что сброс не учитывает некоторые более сложные реализации столбцов, например. кендоGridCellTemplate. Любая более подробная информация об этом будет принята с благодарностью. - person Piotr Lewandowski; 21.03.2018

arrow_upward
0
arrow_downward

Чтобы выбрать элементы kendo-grid-column с помощью ng-content, используйте:

<ng-content select="kendo-grid-column"></ng-content>

См. эту планку.

person Alex Gyoshev    schedule 04.01.2017
comment
Я думаю, что я пробовал это или что-то подобное в какой-то момент. Кажется, это не работает. Результатом является поведение сетки по умолчанию, когда не найдено ни одного компонента kendo-grid-column. Если его убрать, результат тот же. Если вы продублируете или удалите некоторые столбцы, это не повлияет на результат. Я думаю, что он ищет kendo-grid-column как директиву или как компонент, поэтому я получил [object Object]. - person Kent; 04.01.2017
comment
GridComponent использует ContentChildren для выбора определенных столбцов, что не работает с включением. Возможный обходной путь: plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview - person rusev; 05.01.2017