When using grid, the slide drop-down appears blank, and there is no data displayed after waiting for a few seconds

Question

[This answer only contains an image, which was provided by the user.]

Thiyagu Subramani · Accepted Answer

Hi Renard, 

Thanks for your update. 

Based on your shared information we have created a simple sample as per your requirement at our end.  But in our sample your reported issue doesn’t reproduced. By default for enabling the virtualization, the Grid should have more than 1000 records in its data source. So for few hundred rows it is not required and when there are more than 1000 records you can enable virtualization in the Grid for better performance. 
 
We suspect in your shared data.json file you have used 2434 data count and defined this data to Grid DataSource but after row Selection you have filtered this data to some value and bounded to grid. its may return less than 1000 records . So only your reported issue may occurs. 
 
Please refer to the below code and sample link. 
 




 rowSelected(args) { 
    this.groupOptions = { 
      showDropArea: false, 
      showGroupedColumn: false, 
      columns: ["FIELD1"] 
    }; 
    this.grid.dataSource = this.vData.filter( 
      or => or.FIELD2 == args.data.OrderID 
    ); 
    alert((this.grid.dataSource as any).length);  // result count 
    this.grid.refresh(); 
  } 
 
 
Sample link: https://stackblitz.com/edit/angular-wcfcey-s1wnjy?file=app.component.ts 
 
In your shared package.json you have used older and different version package versions. So, please follow the steps provided below to update npm package. 


Delete package.lock.json file from your application.   
Remove the @syncfusion package folder from the node_modules.
Use same version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.   
Then install the NPM packages.   
           




Package.json 
"dependencies": {  
    "@syncfusion/ej2-angular-grids": "*", 
    "@syncfusion/ej2-base": "*", 
    "@syncfusion/ej2-data": "*", 
     .  .  .  .  .  .  .  . 
     .  .  .  .  .  .  .  . 
  } 

Documentation link: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/ 

If still facing the issue, please share below details. 


Share data count after row Selecting a row.
 

If possible, share issue reproducing sample.
 
Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S.

Prasanna Kumar Viswanathan · Answer

Hi Renard, 
 
Thanks for contacting Syncfusion support. 
 
We checked the attached screenshot and found that the right side grid is not fill with the data. In your code example we found that you have not defined the dataSource for the both the grids. To proceed with your query we need the following details, 
 
1. In your code example we found that you have used this.http.getJsonData and also assign the data to the variable this.gridData. Can you please provide more information regarding this.gridData? 
 
2. In the attached screenshot we found that you have checked in the iPad mode in the chrome browser. Did you face the mentioned issue in iPad mode? 
 
3. Share the code example of rendering the data to the Grid 
 
4. Syncfusion Package Version. 
 
Regards, 
Prasanna Kumar N.S.V

Renard · Answer

1.It's also a problem on the iPad.2.data.rar Contains the data source and the effect of this problem config.xml:package.jsonAttachment: data_8238b67e.rar

Renard · Answer

In your reference example link also found this problem, drag to the middle part of the data display, drag to the bottom has been displayed blank

Please help me delete this post, because the previous screenshot involves customer data, thank you

https://stackblitz.com/edit/angular-wcfcey-s1wnjy?file=app.component.ts

Thiyagu Subramani · Answer

Hi Renard, 

Thanks for your update. 

By default, grouping virtualization operates on the basis of blocks that are initially allowed to load and render rows only from the content viewport (pageSettings.pageSize). After scrolling, the next set of page records is made. For this case, if we reaches scroller to the bottom, grid may rendered rows less number of records. 

For example:  If we use total records as 1000 and pageSize as 30, initially 30 rows of grid render rows ad when scrolling down its render next set of 30 rows. Likewise if we reaches bottom (1000%30 = 10) it’s rendered only 10 rows but space allocated for next 30 rows. So we suspect your reported issue may occurs this reason. 

We cannot replicate the recorded problem when using pageSize as 52 (includes aggregate row also) based on total rows. Please refer to the following sample for reference. 

Sample link: https://stackblitz.com/edit/angular-wcfcey-cxz5ms?file=app.component.ts 

To overcome this issue we suggest to use infinite scrolling instead of virtual scrolling. Infinite scrolling is used to load a huge amount of data without degrading the Grid performance. This feature works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller. 

Sample link:  https://stackblitz.com/edit/angular-wcfcey-evmqwh?file=data.ts 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S