Как я могу автоматически изменять размеры столбцов после загрузки данных в кендо-сетку - PullRequest
Новая
       35

Как я могу автоматически изменять размеры столбцов после загрузки данных в кендо-сетку

0 голосов
/ 11 мая 2018

Я вижу из документации кендо для угловой кендо-сетки, что существует метод autofitcolumn .

В примере показано, как применить это с помощью кнопки на интерфейсе. Что я хочу сделать, так это посмотреть, есть ли способ автоматической подгонки столбцов при загрузке данных в кендо-сетку.

Я попытался добавить вызов метода после того, как мои данные были возвращены в мой компонент, например: 

        this.busy = this.service.query(URL, this.state)
        .takeUntil(this.ngUnsubscribe)
        .subscribe(resp => {
            // console.log('resp', resp);
            this.view = resp;
            this.k-grid.autoFitColumns() //auto-fit
        }, err => {
            console.error(`error: ${err}`);
            this.authService.handleError(err);
        });

Но вызов autofit выполняется до того, как данные действительно загружаются в k-grid, поэтому изменение размера не происходит.

В k-сетке также нет события загрузки данных или чего-либо подобного (что я нашел), к которому я мог бы подключиться.

В идеальном мире была бы установка, чтобы сделать это для меня, или событие загрузки данных, к которому я мог подключиться.

Как получить авторазмер столбцов после загрузки данных?

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Вы можете получить ссылку на Грид через ViewChild и вызвать метод autoFitColumns () при визуализации Грид (например, в методе ngAfterViewInit ): 

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

@Component({
   selector: 'my-app',
   template: `
     <kendo-grid
         #grid
         [data]="gridData"
         [resizable]="true"
         style="height: 300px">
         <kendo-grid-column-group title="Product Info">
             <kendo-grid-column
                 #firstColumn
                 field="ProductID"
                 [width]="50"
                 [minResizableWidth]="30"
                 title="ID">
             </kendo-grid-column>

             <kendo-grid-column
                 field="ProductName"
                 title="Product Name"
                 >
             </kendo-grid-column>
         </kendo-grid-column-group>

         <kendo-grid-column
             #lastColumn
             field="UnitPrice"
             title="Unit Price"
             [width]="180"
             filter="numeric"
             format="{0:c}">
         </kendo-grid-column>
     </kendo-grid>
   `
})
export class AppComponent {
   @ViewChild('grid') private grid;
   public gridData: any[] = products;

   ngAfterViewInit() {
     this.grid.autoFitColumns();
   }

}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];
0 голосов
/ 14 мая 2018

Вот что я использую: 

function AutoFitColumns(grid) {
    for (var i = 0; i < grid.columns.length; i++) {
        if (!grid.columns[i].headerAttributes.class && grid.columns[i].headerAttributes.class !== "fixed-width") {
            grid.autoFitColumn(i);
        }
    }
}
...