pageSize : All shows 'No records to display'

Question

Hi,I have a problem with pageSize All, It shows 'No records to display' even though its has records. But it works perfectly other than that. Please find below stackblitz url for the same issue.https://stackblitz.com/edit/angular-4vm4xp

Rajapandiyan Settu · Answer

Hi Prince, 

Thanks for contacting Syncfusion support. 

Based on the query we would like to let you know that the pageSize property of the Grid’s pageSettings supports only number values(that need to be set as the Grid page size) and so the dropdown’s ‘All’ value cannot be specified here. And for setting the ‘All’ value, it needs to be selected from the pager dropdown which is the default behavior. 

However your requirement of setting the pager dropdown to ‘All’(and modifying the page size accordingly) on Grid render can be achieved by setting the pager dropdown’s(can be accessed from the Grid’s pager module) text value to ‘All’ in the Grid’s created event. 

This is demonstrated in the below code snippet, 





 
// Grid’s created event handler 
onCreated() { 
    this.grid.pagerModule.pagerObj.pagerdropdownModule.dropDownListObject.text = 'All' 
} 

We have modified the shared sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-4vm4xp-qnrgdb?file=app.component.ts 

Let us know if you have any concerns. 

Regards, 
Rajapandiyan S

Prince Kumar · Answer

Hi

Rajapandiyan ,Thanks for looking into this.In my case I need to fetch data from backend API, which has some latency meaning takes sometime to respond.In this scenario Grid just shows loader and '

No records to display

' message. I have tried to reproduce the issue in stackblitz, you can find below.

Ta2v3m (forked) - StackBlitz

Thanks & Regards,Prince

Rajapandiyan Settu · Answer

Hi Prince, 

Thanks for your update. 

In your requirement, you are loading the data once the response received from your API service. In that case, we suggest you to change the pageSize dropdown text to All after binding the data to Grid. Find the modified code example and sample for your reference. 






  load(args) { 
    const ajax = new Ajax('https://ej2services.syncfusion.com/production/web-services/api/Orders', 'GET'); 
    ajax.send(); 
    ajax.onSuccess = (data: string) => { 
      var gridData = JSON.parse(data); // get the response from server 
      this.grid.dataSource = gridData; // bind the data to the Grid 
      setTimeout(() => { 
        // change the pageSize dropdown text to All after some time interval 
        (this.grid.pagerModule.pagerObj.pagerdropdownModule as any).dropDownListObject.text = 'All';  
      }, 100); 
    }; 
  } 


Sample: https://stackblitz.com/edit/angular-4vm4xp-osjz6q?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 
Rajapandiyan S

Prince Kumar · Answer

Hi

Rajapandiyan ,Thanks for reply.I have one more query. Could you please let me know how can I refresh grid after assigning new records?I need to dynamically reassign records when

pageSize All

and refresh the grid without regenerating the grid itself.Thanks & Regards,Prince

Rajapandiyan Settu · Answer

Hi Prince, 

Thanks for your update. 

By using refresh() method of Grid, you can programmatically refresh the Grid. 

Refresh: https://ej2.syncfusion.com/angular/documentation/api/grid/#refresh 

By default, the Grid will be automatically refreshed when changing its properties. So, by changing the pageSize dropdown text to All, the Grid will be refreshed automatically and fetches the whole data. This is the behavior of EJ2 Grid. 

Before proceeding with your query we need more information on your requirement. So, kindly share the below details to provide a better solution. 


When you want to bind new data to the Grid and Why you want to change the pageSize to All?
Are you want to manually bind new data when pageSeize changes to All? 
What is your requirement? Explain in detail with video demo.

Regards, 
Rajapandiyan S

Prince Kumar · Answer

Hi Rajapandiyan,Thanks for reply.As per my requirement, I have a drop down, based on dropdown selection, I need to populate the grid.I should be able to repopulate the grid if dropdown selection changes.I have created stackblitz demo as per my requirement. Ta2v3m (forked) (stackblitz.com)It works well when page size is selected 10/20, but when I select page size 'All' and change the dropdown selection. Grid doesn't load with new records.Please help me out on the same.Thanks,Prince

Rajapandiyan Settu · Answer

Hi Prince,  
  
Thanks for your update. 
 
We have created a new ticket under your account for the reported query. We suggest you follow up with that ticket for further updates. 

Regards,  
Rajapandiyan S