Grid Refresh Dynamically

[suraj chavan]

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]

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]

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]

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  

Sample: https://stackblitz.com/edit/angular-vej91b-pjxlqc?file=app.component.html  

Please get back to us if you have further queries.  

Regards, 

Hariharan 

[suraj chavan]

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

[Hariharan J V]

Hi Suraj, 

  

Thanks for your update. 

  

We will wait to hear from you. 

  

Regards, 

Hariharan