We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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

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. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Madhu Sudhanan P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon