Dynamic Grid creation causing datasource sync issue

Question

Hi,In one form we are generating grids dynamically in some loop. Their datasource and columns are also dynamic which are calculated from database in loop . When grid is configured with more grid or dropdown, the datasource goes out of sync(datasource gets mixed up). After 3-4 times refreshing the page, issue does not exists.It also causes issue while leaving this page. It does not properly navigate to other pages.

Rajapandi Ravi · Accepted Answer

Hi Shivani, 

Greetings from syncfusion support 

We have analyzed your query and we suspect that you like to add columns dynamically. By default in our Grid, when the column declaration is empty while initializing the Grid. All the Fields in the DataSource are bound as grid columns. Then the column Type will be determined from the first record of the DataSource. 

Note: If you are not defined columns and datasource property in Component initialization. You have to set columns or datasource property to the Grid in the Load event to create Grid. 

If you like to add the Columns dynamically, you can achieve this requirement by directly pushing the new column to the Grid’s columns property(which can be accessed using its instance). we suggest you to use our Grid inbuilt methods and call the refreshColumns() method for UI changes. 





 
    AddColumn() { //external button click function 
      var obj = { field: "NewColumn", headerText: 'NewColumn', width: 120 } 
     grid.columns.push(obj as any);   //you can add the columns by using the Grid columns method 
     grid.refreshColumns(); 
    } 
 

Note: The Grid will re-render the columns when we calling the Grid’s refreshColumns method. 

And if you still face the issue, Please share the below details that will be helpful for us to provide better solution. 

1)       Share your complete Grid rendering code. 

2)       If possible please share us issue reproducing sample. It would be helpful to identify your problem case better so that we can check and provide the solution based on that. 

3)       If possible please share the issue scenario in video demonstration. 

Regards,Rajapandi R

shivani goyal · Answer

Hi Rajapandi,Can we have a call to have better understanding of the issue?Regards,Shivani

Rajapandi Ravi · Answer

Hi Shivani, 

Thanks for the update 

Before scheduling meeting, you have to send your problem scenario via video demonstration and code example, then only we validate your requirement with our source. It’s more helpful to us. After that we can schedule a meeting. 

Please share the below details that will be helpful for us to provide better solution. 

1)       Grid code snippet(So that we can check the reported problem based on the Grid settings you enabled and we could see how you perform the dynamic operations) 

2)       If possible please share us issue reproducing sample. It would be helpful to identify your problem case better so that we can check and provide the solution based on that. 

3)       If possible please share the issue scenario in video demonstration. 

Regards, 
Rajapandi R