Number format sets incorrectly while dynamically generating data and columns

[Unknown]

Hello,

I am trying to dynamically generate data (including column names, first column row and other data) dynamically.

How it is working:

1. Getting data from WebAPI

2. From data getting column names

3. From data getting first column data

4. Generating other data by column names and first column data (generating data like matrix)

5. Pushing data to grid

My columns (except first column which is always static) is type of number and must be with 3 decimal places.

When I load data first time - formats are set correctly. After that I set dataSource to empty and again load the same (or other) data. After that my formats are incorrect. If I changed data without setting dataSource to empty - data formats are correct but if I remove dataSource - on first load it sets without formats. Maybe I am setting it incorrectly?

You can see this issue in my example: https://stackblitz.com/edit/angular-nvb7sg-iquga8?file=app.component.ts

You cat get this by this scenario:

1. Click button - "ADD DATA SOURCE" (data will be generate with type: number and format: n3 (3 decimal places)

2. Click button - "RESET DATA SOURCE" (data source will be set to empty and we will see only static column)

3. Click button - "ADD DATA SOURCE" (data will be generates without correct format)

By the way I am using ej2-angular-grid version 17.1.48.

[Balaji Sekar]

Hi AC, 

Thanks for your patience, 

We have validated your query provided the information and we are able to reproduced the reported issue. We suggest you to use the refreshColumns method while reloaded the Grid dataSource. Please refer the below code example and sample for more information. 

addButtonClick() { 

    // On button click dynamically generate ant set grid data 

    this.processListData(data.slice(0,10)); 

    var grid = (document.getElementsByClassName('e-grid')[0]as any).ej2_instances[0]; 

    grid.refreshColumns(); 

  } 

Sample link: https://stackblitz.com/edit/angular-nvb7sg-v2lmkc?file=app.component.ts 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#refreshcolumns 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar. 

[Unknown]

Hello,

I was using refreshColumns method in my example also. Is there a possibility to get correct formats without using setTimeout on refreshColumns method? Because of network speed and my data getting from WebAPI I am not able to know in what time exactly with setTimeout I can refresh columns to get correct formats (without setting time in setTimeout I am still getting data with incorrect formats).

[Balaji Sekar]

Hi AC, 

 

Thanks for your update. 

 

Query: Because of network speed and my data getting from WebAPI I am not able to know in what time exactly with setTimeout I can refresh columns to get correct formats 

 

We have validated your query and you can call the refreshColumns method after the dataSource is modified. Here, we have used an internal event(datasource-modified) to find the dataSource change and call the refresh method to achieve your requirement. Find the below code snippets and sample for your reference. 

 

[code snippets] 

  ... 

 

  addButtonClick() { 

    // On button click dynamically generate ant set grid data 

    this.processListData(data.slice(0,10)); 

    var grid = (document.getElementsByClassName('e-grid')[0]as any); 

    this.refresh(); 

  } 

 

  refresh(){ 

    var grid = (document.getElementsByClassName('e-grid')[0]as any).ej2_instances[0]; 

    grid.on('datasource-modified', (args) => { 

      setTimeout(this.refreshCol, 50); 

    })    //here, we have binded internal event and called refresh action. It will call the refresh column after dataSource modified 

  } 

 

  refreshCol() { 

    var grid = (document.getElementsByClassName('e-grid')[0]as any).ej2_instances[0]; 

    grid.refreshColumns(); 

  } 

 

  ... 

 

 

Sample: https://stackblitz.com/edit/angular-nvb7sg-1d27jh?file=app.component.ts  

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[Unknown]

Hello one more time,

maybe there are somewhere list with events I can call with grid.on(event)? Because, as I said before, I need to be this refresh without setTimeout, because every time I have different length of data and I am not able to know when it is okay to refresh. In this case some times it is also refreshes to early but in some cases I can see how it loads data and after that again refreshes it to get correct formats.

[Balaji Sekar]

Hi AC, 

 

Based on your query, we have achieved your requirement using the beforeDataBound event of the Grid. In below code example, we have set as true of global variable(this.isRefresh) in the “addButtonClick” event and it will trigger beforeDataBound event of Grid when bind the Grid dataSource by programmatically. We suggest you , if this.isRefresh is true then you can call the refreshColumns method of the Grid in the beforeDataBound event since we can avoid to use setTimeOut in your requirement. 

 

Please refer the below code example and sample for more information. 

 

[app.component.ts] 

 

 addButtonClick(e) { 

    // On button click dynamically generate ant set grid data 

    this.isRefresh=true; 

    this.processListData(data.slice(0,10));  // bind the grid dataSource by programatically  

  } 

  

beforeDataBound(args){   

  if(this.isRefresh){ 

    this.isRefresh=false; 

    this.myGrid.refreshColumns(); 

  } 

} 

 

  

Sample link: https://stackblitz.com/edit/angular-nvb7sg-ubzqid?file=app.component.ts 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#beforedatabound 

Regards, 

Balaji Sekar.