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

Format grid with autogenerationcolumns

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

1 Reply

MS Madhu Sudhanan P Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon