Hi Manolo,
Thanks for contacting Syncfusion support.
Query: I've a grid with autogeneration columns, but when I assign the datasource, I want format some columns. For example: - set width in the first column - set date format in the second column - set percentaje numeric format in the last column. How can I do it?
We have validated your query and you can achieve your requirement by using dataBound event of the grid. For autogenerated columns, you can set width for the particular column by using columns.width property. For date column and numeric column, you can set format by using columns.format property. Please find the below code example and sample for your reference.
[code example]
|
...
@Component({
selector: 'control-content',
template: `
<ejs-grid #grid [dataSource]='data' (dataBound)="dataBound($event)" allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
</ejs-grid>`,
})
export class NormalEditComponent implements OnInit {
public data: Object[];
@ViewChild("grid")
public grid: Grid
public ngOnInit(): void {
this.data = orderDatas;
}
dataBound(args: any) {
for(var i = 0; i < this.grid.columns.length; i++){
(this.grid.columns[0] as any).width = 120; //setting width for column
if((this.grid.columns[i] as any).type === "date"){ //check whether the column is date column or not
(this.grid.columns[i] as any).format = {type: "date", format: "dd/MM/yyyy"}; //set date format for date columns
}
(this.grid.columns[7] as any).format = "P2"; //setting format for numeric columns
}
this.grid.refreshColumns(); //refresh grid columns
}
|
In the given sample, we have set width for first column, set date format for all date columns and set percentage format for freight column.
We have prepared a sample based on your requirement. Please find the sample in below link.
Please get back to us if you need further assistance.
Regards,
Madhu Sudhanan P
