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

Grid Refresh Dynamically

Thread ID:

Created:

Updated:

Platform:

Replies:

144794 May 23,2019 05:42 AM UTC Jun 20,2019 01:39 PM UTC Angular - EJ 2 5
loading
Tags: Grid
suraj chavan
Asked On May 23, 2019 05:42 AM UTC

Hello,

Use Case:

We are using EJS grid control to create dynamic grid in our application and which are getting created perfectly. but, when we update the data from second grid,  system is not refreshing the second grid onward dynamically. User has to refresh the page manually to see the changes on the grid.  

We tried few solutions but, it's not working .  Can you please help us to solve the problem.

Code sample:
Below code used to create grid dynamically.

<ejs-grid #grid></ejs-grid>
@Viewchild('Grid') grid : GridComponent;

this.grid.refresh();


Appreciate your support.

Thank you. 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 27, 2019 09:50 AM UTC

Hi Suraj, 

Thanks for contacting Syncfusion support. 

Before we proceeding this we would like to know the below details to provide the better solution for this issue as early as possible. 

  1. In your update, you mentioned you have created the Grid dynamically. So please confirm whether you have crated the multiple Grids dynamically or you have dynamically changed the same Grid data source.
  2. How you have provide the data source Grid (i.e local data or DataManager or your own service)?
  3. Please share the full Grid code.
  4. Please ensure whether the network tab get proper values (i.e updated values) or not while binding the updated values to Grid. Also, please share the same network tab response to us.
  5. Syncfusion package version.

Regards, 
Thavasianand S. 


suraj chavan
Replied On June 14, 2019 07:04 AM UTC

Thanks for your feedback. 
Please find below answers for your questions
  1. In your update, you mentioned you have created the Grid dynamically. So please confirm whether you have crated the multiple Grids dynamically or you have dynamically changed the same Grid data source- We are  creating multiple Grids dynamically
  2. How you have provide the data source Grid (i.e local data or DataManager or your own service)? -Own Service
  3. Please share the full Grid code-  Please find attachment 
  4. Please ensure whether the network tab get proper values (i.e updated values) or not while binding the updated values to Grid. Also, please share the same network tab response to us- Please find attachment . actually it's removing the after refreshing
  5. Syncfusion package version - 17.1.43

Attachment: Details_e96603c2.zip

Hariharan J V [Syncfusion]
Replied On June 19, 2019 12:51 PM UTC

Hi Suraj,  

Thanks for the update.  

We have prepared a sample using your code example and we are able to reproduce the reported issue (second Grid dataSource is not updated) at our end. This is because for each and every Grid you have used the id as #grid. In the OnUploadSuccess function also you have refreshed the Grid using that instance this.grid.refresh(). So Grid id’s were not unique in your sample. This is cause of the issue.  

So to overcome the reported issue we suggest you to refresh the Grid by taking the instance of each Grid using ViewChildren and QueryList. Refer the below code example 

[app.component.html] 

 <div class="control-section"> 
  <button (click)='handleClick($event)'type='button'>DataUpdate</button> 
  <div *ngFor="let item of array">   
    <ejs-grid #grid [dataSource]='item.firstName'> 
 
    </ejs-grid> 
    </div> 
</div> 
 
   
[app.component.ts] 

export class AppComponent { 
    public data: Object[] = []; 
      @ViewChildren(GridComponent) grids !: QueryList<GridComponent>; 
      // define unique id to each object to define it to grid.  
      public array: [object] = [ 
      { firstName: orderDetails.slice(0,4) }, 
      { firstName: orderDetails.slice(5,10) }, 
      { firstName: customerData.slice(0,4) }       
  ]; 
    ngOnInit(): void { 
         
    } 
     
 
    handleClick(){       
      for(var i=0;i<this.array.length;i++){ 
        this.array[i].firstName.push({ OrderID: 10252, CustomerName: "VINET", Freight: 55.55,CustomerID: "VINET",ContactName: "Sam", Country: "INDIA", Address: "Check" }); // updating the dataSorce 
      } 
    this.grids.forEach(div => div.refresh()); // refresh each grid  
    } 
} 
 

Note: as an example we have updated the dataSource using button click. Similarly you need to update each grid using its unique id.  

For your convenience we have prepared sample which can be referred below  


Please get back to us if you have further queries.  

Regards, 
Hariharan 


suraj chavan
Replied On June 19, 2019 01:08 PM UTC

Thank you for the quick response. We will implement you suggestions and get back to you with results.


Hariharan J V [Syncfusion]
Replied On June 20, 2019 01:39 PM UTC

Hi Suraj, 
  
Thanks for your update. 
  
We will wait to hear from you. 
  
Regards, 
Hariharan 


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