Добавить пользовательские заголовки в Kendo UI Grid - PullRequest
Новая
       5

Добавить пользовательские заголовки в Kendo UI Grid

0 голосов
/ 28 августа 2018

Я использую Kendo UI для Angular для рендеринга таблицы. Таблица работает нормально, и все показывает. У меня вопрос: возможно ли добавить новую строку заголовка перед начальной строкой, где можно добавить пользовательские значения.

Текущее поведение: enter image description here

Ожидаемое поведение: enter image description here

Код, который я сейчас использую для отображения таблицы Kendo UI Grid, показан ниже.

my.component 

export class MyComponent implements OnInit, OnDestroy {

...

tableColumns = [
    { field: 'field1', title: 'title1', width: 80},
    { field: 'field2', title: 'title2', width: 180 },
    { field: 'field3', title: 'title3', width: 100 },
    { field: 'field4', title: 'title4', width: 80 },
    { field: 'field5', title: 'title5', width: 400 },
    { field: 'field6', title: 'title6', width: 80 },
    { field: 'field7', title: 'title7', width: 60 },
    { field: 'field8', title: 'title8', width: 90 },
    { field: 'field9', title: 'title9', width: 100 }
  ];

view: Observable<GridDataResult>;
  state: State = {
    skip: 0,
    take: 10,
    sort: [{dir: "desc", field: "field1"}]
  };

public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.view = this.myService.getAll('my-endpoint', this.state);
}

...

мой-component.ts 

<kendo-grid
 [data]="view | async"
 [pageable]="true"
 [pageSize]="state.take"
 [skip]="state.skip"
 [sort]="state.sort"
 [sortable]="true"
 [loading]="worklistService.isLoading"
 (dataStateChange)="dataStateChange($event)">


 <kendo-grid-column
    *ngFor="let tableColumn of tableColumns"
    [field]="tableColumn.field"
    [title]="tableColumn.title"
    [width]="tableColumn.width">
    </kendo-grid-column>
 </kendo-grid>
...