Format grid with autogenerationcolumns

Thread ID:	Created:	Updated:	Platform:	Replies:
141181	Nov 28,2018 03:43 PM UTC	Nov 29,2018 12:14 PM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Grid

Manolo Capdevila

Asked On November 28, 2018 03:43 PM UTC

Hi,

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?

Thanks

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On November 29, 2018 12:14 PM UTC

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.

Sample link: https://stackblitz.com/edit/angular-sku1p1-mn18rt?file=normal-edit.component.ts

Please get back to us if you need further assistance.

Regards,

Madhu Sudhanan P

Reply | Reply with quote

Format grid with autogenerationcolumns

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US