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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Number format sets incorrectly while dynamically generating data and columns

Thread ID:

Created:

Updated:

Platform:

Replies:

151047 Jan 29,2020 05:34 AM UTC Apr 8,2020 02:23 PM UTC Angular - EJ 2 5
loading
Tags: Grid
Unknown
Asked On January 29, 2020 05:34 AM UTC

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 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 [Syncfusion]
Replied On January 31, 2020 04:46 PM UTC

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(); 
  } 


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

Regards, 
Balaji Sekar. 


Unknown
Replied On February 4, 2020 11:49 AM UTC

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 [Syncfusion]
Replied On February 5, 2020 09:31 AM UTC

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(); 
  } 
 
  ... 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


Unknown
Replied On April 7, 2020 02:20 PM UTC

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 [Syncfusion]
Replied On April 8, 2020 02:23 PM UTC

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(); 
  } 
 
  


Regards, 
Balaji Sekar. 
 


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