Question

我从kendo文档中看到有角度剑道网格，有一个autofitcolumn method。

该示例显示了如何通过界面上的按钮应用此功能。我想要做的是看看有没有办法在数据加载到kendo-grid时自动调整列。

我尝试在我的组件中返回数据之后添加对方法的调用，如下所示：

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

但自动调用调用在数据实际加载到k-grid之前运行，因此不会调整大小。

k-grid也没有一个数据加载的事件或者我可以加入的类似事件（我已经发现）。

在一个完美的世界中，会有一个设置可以传递给我，或者我可以挂钩的数据加载事件。

如何在加载数据后自动调整列？

Answer 1

这就是我使用的：

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

Answer 2

您可以通过ViewChild获取对Grid的引用，并在呈现Grid时调用 autoFitColumns（）方法（例如 - 在 ngAfterViewInit 方法中）：< / p>

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

Answer 3

一旦从后端接收到数据并且应将其嵌套在超时函数中，则调用autoFitColumns（）方法。

将网格控件放入组件中

 @ViewChild('grid') grid: any;

从后端接收数据后，按如下所示调用autoFitColumns。

 setTimeout(() => {
                    this.grid.autoFitColumns();
                });


constructor(private service: CategoriesService) {
    this.view = service;
    this.service.query(this.state);
    this.view.subscribe(res =>{
      if(res){
        this.data = res;
        setTimeout(()=>{
          this.grid.autoFitColumns();
        })
      }
    })

}

如何在kendo-grid中加载数据后自动调整列

3 个答案: