Paging Not Working with Angular Grid (Urgent help required to meet deadline)

[Ojasvi Pandya]

Hi,

I am new to Angular and have been trying to create an angular grid which is populated using data from my backend service.

The grid is getting populated and everything works well, but my paging service is not working.

I have imported PageService and injected it into my providers section. I am using the PageSettingsModel to declare a pageSize of 5. I have also set allowPaging to true.

But, in the end, I get the all the rows in a single page, and the page section below shows 1 of 22 pages (108 items) with page numbers displayed. (unable to attach a screenshot)  

This is my grid code:

<ejs-grid [dataSource]="data | async" [allowPaging]="true" [pageSettings]="pageSettings">

    <e-columns>

        <e-column field="date" headerText="Date" ></e-column>

        <e-column class="head" field="companyName" headerText='Company' style="font-style:bold"></e-column>

        <e-column field="sector" headerText="Sector"></e-column>

        <e-column field="ticker" headerText="Ticker"></e-column>

        <e-column field="price" headerText="Stock Price"></e-column>

        <e-column field="volume" headerText="Volume"></e-column>

    </e-columns>

  </ejs-grid>

And this is my pageSettings:

 public pageSettings: PageSettingsModel = {pageSize: 5};

Please help, I have a deadline!

[Sujith Kumar Rajkumar]

Hi Ojasvi, 

 

Greetings from Syncfusion support. 

 

Since async pipe is used to bind Observables to the Grid, the initial request is executed by specifying the number of records to be fetched like in below code snippet, 

 

export class AppComponent { 

          . 

          . 

 

    public ngOnInit(): void { 

        this.pageSettings = { pageSize: 5 }; 

        let state = { skip: 0, take: 5 }; 

    // Async pipe service is executed with the specified ‘skip’ and ‘take’ values 

        this.service.execute(state); 

    } 

} 

 

So if the page size is set as ‘5’, the take value for initial service execution must also be set as ‘5’ to return the initial 5 records and display it in the Grid. 

 

We have prepared a sample based on this for your reference which you can find below, 

 

Sample: https://stackblitz.com/edit/angular-kqu7vy-qg3vwz?file=app.component.ts 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/?no-cache=1#handling-grid-actions 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Ojasvi Pandya]

Hi Sujith, 

Thank you so much for your response.  I had set my pageSize as 5 and my take as 100, that was causing the issue. After your response, I changed it and was able to get 5 records in a page.

But now, when I click on the next page to view the next records, my browser just keeps loading and does not show me the new values. It is just stuck loading. 

Kindly help.

[Sujith Kumar Rajkumar]

Hi Ojasvi, 

 

We are glad to hear that the provided solution helped resolve your problem. 

 

As for your other problem – “But now, when I click on the next page to view the next records, my browser just keeps loading and does not show me the new values”. This occurs if the async pipe service is not executed for the Grid actions. This operation is performed in the Grid’s dataStateChange event as demonstrated in the below code snippet, 

 

// Grid’s dataStateChange event function 

public dataStateChange(state: DataStateChangeEventArgs): void { 

        // Async pipe service is executed with the current state 

        this.service.execute(state); 

} 

 

So can you ensure if this operation is performed in your application and if problem still persists after this please share us the following information to validate further, 

 

• Grid code file.
• Are any console errors thrown in your application? If so please share it.
• Syncfusion package version used.
• If possible provide us a simple sample to replicate the problem or try reproducing it in the sample provided in the previous update.

 

Note: You can also compare your application to the sample we provided in our last update if you have doubts on the execution flow. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Ojasvi Pandya]

Hi Sujith,

I looked over the sample that you provided, and I do not wish to use JQuery in my project as I am not familiar with it. I would be very grateful if you could help me out with some JavaScript/TypeScript. 

I have attached a zip file containing my code. Please go through the ReadMe file first.

No console errors are thrown.

I am using the following version: @syncfusion/[email protected]

Please let me know if any further information is required.

Also is it possible to have a real time discussion? I am on a deadline and I would much appreciate the urgent help.

Attachment: Query_209a26dd.zip

[Sujith Kumar Rajkumar]

Hi Ojasvi, 

 

We have not used JQuery in the provided sample. We suspect you are referring to the ‘$’ used in the Order Service. They are template literals which allows embedded expressions. More details on this can be found in the below link, 

 

Template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 

 

From the code snippet provided we could see that you have not initialized the dataStateChange event in the Grid but only referenced it in the application. You need to initialize it in the Grid component as it is a Grid event so that it will be called on performing Grid actions and define that event handler in the Grid component file to execute the service there. Sorry if we were not clear on that. This is demonstrated in the below code snippet, 

 

grid-base.component.html 

<ejs-grid [dataSource]='data | async' allowPaging='true' [pageSettings]='pageSettings' allowSorting='true' allowGrouping='true' (dataStateChange)='dataStateChange($event)'> 

</ejs-grid> 

 

grid-base.component.ts 

public dataStateChange(state: DataStateChangeEventArgs): void { 

        this.service.execute(state); 

} 

 

Please check the previously provided sample for your reference. 

 

If you require any further assistance and would like to do a direct discussion then please let us know your availability and based on that we will schedule a web meeting and send you the invite. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Ojasvi Pandya]

Hi Sujith,

Thank you for the reply.

Yes, I would like to do a direct web discussion. I'd like to schedule it at the earliest, today(Saturday) if possible; or Sunday at the latest.

Please confirm your availabilty.

[Ojasvi Pandya]

Hi Sujith,

As you had suggested I did insert the dataStateChange method in my gridComponent - but it is still not working. 

The localhost page does not load anymore - there is just simply no change when I try to change a page on the grid.

Please help at the earliest.

[Sujith Kumar Rajkumar]

Hi Ojasvi, 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link, 

https://www.syncfusion.com/account/login 

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Ojasvi Pandya]

Hi Sujith,

I am unsure as to how to proceed with the incident - I am put under hold.

My problem now is that the pages are being formed but when I click on a page number the page does not change - that is the records are not changed.

I did associate the dataChangeEvent but I am still having problems. They are mostly due to my service file - the pageQuery that is provided in the sample did not work for me.

I am on a very tight deadline and I only have another day to sort this out.

Prompt help will be much appreciated.

[Sujith Kumar Rajkumar]

Hi Ojasvi, 

 

We request you to follow the incident that has been created under your account for further updates. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R