how to get an array of column configurations in Kendo grid angular - angularjs

Question

suppose i've the following kendo grid
<kendo-grid-column field="full_name" title="Contact Name" [width]="220">
<ng-template kendoGridCellTemplate let-dataItem>
<div
class="customer-photo"
[ngStyle]="{ 'background-image': photoURL(dataItem) }"
></div>
<div class="customer-name">{{ dataItem.full_name }}</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="job_title" title="Job Title" [width]="220">
</kendo-grid-column>
<kendo-grid-column
field="country"
title="Country"
[width]="100"
[class]="{ 'text-center': true }"
[resizable]="false"
>
<ng-template kendoGridCellTemplate let-dataItem>
<img class="flag" [src]="flagURL(dataItem)" width="30" />
</ng-template>
</kendo-grid-column>
what i want to do is to get an array of grid columns with column title & field name
eg: [{field:"full_name",title:"Contact Name"},
{field:"job_title",title:"Job Title"}];
how to do this in Kendo Grid for angular?

Answer 1

You can access the grid using ViewChild and then access its columns field:
import { Component, ViewChild, AfterViewInit } from '#angular/core';
import { GridComponent } from "#progress/kendo-angular-grid";
#Component({
selector: 'my-app',
template: `
<kendo-grid #grid [data]="gridData">
<kendo-grid-column field="Id" title="ID">
</kendo-grid-column>
<kendo-grid-column field="CompanyName" title="Company Name">
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent implements AfterViewInit {
#ViewChild("grid") grid: GridComponent;
public readonly gridData = [{
'Id': 'ALFKI',
'CompanyName': 'Alfreds Futterkiste',
'ContactName': 'Maria Anders',
'ContactTitle': 'Sales Representative',
'City': 'Berlin'
}, {
'Id': 'ANATR',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'ContactName': 'Ana Trujillo',
'ContactTitle': 'Owner',
'City': 'México D.F.'
}, {
'Id': 'ANTON',
'CompanyName': 'Antonio Moreno Taquería',
'ContactName': 'Antonio Moreno',
'ContactTitle': 'Owner',
'City': 'México D.F.'
}];
ngAfterViewInit() {
const columns = this.grid.columns.map((column) => {
return {
field: column.field,
title: column.title
};
});
console.log(columns);
}
}
Note: this.grid.columns gives you an object of type QueryList<ColumnBase>. The ColumnBase class doesn't contain the field field in its definition, however, it does appear on the object. I guess that this.grid.columns actually returns an object of type QueryList<ColumnComponent>. ColumnComponent derives from ColumnBase and does contain the field field.

Answer 2

For me, to get the column.filed, the above code didn't work. But when I use fieldName: column["field"], it worked for me.