[英]Programmatically hide columns in GridComponent with Kendo UI for Angular
我正在尝试使用Kendo UI for Angular以编程方式将GridComponent中的列设置为隐藏,但是找不到组件html元素上的[hidden]属性以外的任何函数或属性。
它与您要查找的列菜单中的可见/隐藏列相同。
这可能吗?
我已经编辑了该隐藏列的示例,列菜单正在工作,列也正在隐藏
示例网址: https : //stackblitz.com/edit/angular-s2rip3?file= app/ app.component.ts
您可以访问此处以查看更新示例https://gvfum8.run.stackblitz.io和该示例的代码
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData" style="height:400px" [columnMenu]="true">
<ng-template ngFor [ngForOf]="columns" let-column>
<kendo-grid-column
field="{{column}}"
[hidden]="hiddenColumns.indexOf(column) > -1"
>
<ng-template kendoGridHeaderTemplate let-dataItem>
{{dataItem.field}}
</ng-template>
</kendo-grid-column>
</ng-template>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = sampleCustomers;
public columns: string[] = [
'CompanyName', 'ContactName', 'ContactTitle'
];
public hiddenColumns: string[] = [];
public restoreColumns(): void {
this.hiddenColumns = [];
}
constructor(){
this.hiddenColumns.push("CompanyName");
}
}
一共有三列,第一列被隐藏并显示两列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.