PDF export not working

[Mojtaba]

Hello,

I am using PDF export for my grids as the typical way; i.e., having a button with kendoGridPDFCommand directive applied, and a  kendo-grid-pdf component inside the grid. This was working nicely with no problem. I had not tested Export To PDF for a while and now I see it is not working; when I press the button the grid is stuck in loading state (i.e., showing loading icon). 

The only thing (related to Export PDF) that has changed during this time is that kendo packages have been updated. So, my suspicion is that it has been broken because of some inconsistencies in kendo packages. Here is the list of kendo packages I am using:

01.+-- @progress/kendo-angular-buttons@4.3.3
02.+-- @progress/kendo-angular-dateinputs@3.5.4
03.+-- @progress/kendo-angular-dropdowns@3.4.2
04.+-- @progress/kendo-angular-excel-export@2.3.0
05.+-- @progress/kendo-angular-grid@3.14.0
06.+-- @progress/kendo-angular-inputs@4.2.1
07.+-- @progress/kendo-angular-intl@1.7.0
08.+-- @progress/kendo-angular-l10n@1.4.0
09.+-- @progress/kendo-angular-popup@2.5.0
10.+-- @progress/kendo-data-query@1.5.0
11.+-- @progress/kendo-drawing@1.5.8
12.+-- @progress/kendo-theme-bootstrap@3.3.1
13.+-- @progress/kendo-theme-default@3.5.1

 

Best regards,

Mojtaba

[Dimiter Topalov]

Hello Mojtaba,

Versions and internal dependencies mismatch could indeed cause a problem, as well as a specific RxJS version (6.3.x) that had issues (now fixed in 6.4+). The solutions for the RxJS issues are outlined in the following GitHub thread:

https://github.com/telerik/kendo-angular/issues/1962

To ensure that all latest versions of our packages alongside their correct dependencies are used, please remove the node_modules folder and the package-lock.json file, and run a clean npm install. Sometimes clearing the npm cache also proves useful.

Checking the browser developer tools (F12) console for some JavaScript errors might also hint what is causing the problem.

I hope this helps, but if the issue persists, please send us an isolated runnable project, similar to our online demos where it can be observed, so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Mojtaba]

Hi Dimiter,

Thanks for all the suggestions, none of them worked.

So, I created a small project in StackBlitz that reproduces the problem. During my investigation, I found that if instead of [data]="products" I write [kendoGridBinding]="products" the problem will be solved; I don't know why. Actually, I've used the 'data' property to assign the data of grid all through my app, as this was the typical way of doing that when I was reading Kendo documentations a few months ago. Not sure if anything has changed about that.

Regards,

Mojtaba

[Dimiter Topalov]

Hello Mojtaba,

The demo was not runnable on my end (use the full browser address bar links to share StackBlitz demos, as opposed to the shorthand ones from the righthand side pane), e.g.:

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



The KendoGridBinding autobinding directive is designed to abstract away all data-related operations like paging, sorting, filtering, and grouping:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/

When the developer is not relying on the autobinding directive, he will need to handle the respective Grid events (the cumulative dataStateChange event being the most convenient one to handle all data processing, related to data operations in one place) process the data the Grid is bound to in accordance with the incoming state, and replace the existing collection with the processed result.

More information and examples demonstrating the Grid data binding and data-related operations, are available in the following sections of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/

https://www.telerik.com/kendo-angular-ui/components/grid/paging/

https://www.telerik.com/kendo-angular-ui/components/grid/sorting/

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/

https://www.telerik.com/kendo-angular-ui/components/grid/grouping/

I modified the StackBlitz example above to illustrate the described approach:

https://stackblitz.com/edit/angular-vg1jvx-wesjys?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Mojtaba]

Hi Dimiter,

This is the full URL for StackBlitz.

I am using the 'data' property in conjunction with 'dataStateChanged' event (to process data) for my grids. 

Regards,

Mojtaba

[Dimiter Topalov]

Hi Mojtaba,

The Stackblitz sample is now working, but it is missing the dataStateChange event binding and handler. Once they are added, the PDF is exported as expected (all items end up in the exported document).

Also, the Grid properties related to the data operations (like paging, sorting, filtering and grouping), e.g. skip and pageSize for paging, need to be bound to the respective state object so that the UI is updated accordingly and is always in sync with the current state:

https://stackblitz.com/edit/angular-mev9d4?file=src/app/app.component.ts

Regards,
Dimiter Topalov
Progress Telerik

[Mojtaba]

Hi Dimiter,

What you are basically saying is that `import to PDF works if dataStateChange event was handled`, which sounds like a bug to me; what if I don't want to process the data at all? Shall I add a bug a report in Github? By the way, this problem appeared when I upgraded my Kendo components.

Also, even if handle `dataStateChange` event but not through property binding, but rather by subscribing to the event in `.ts` file, the problem still exists. See the updated version of my code in StackBlitz.

Regards,

Mojtaba

[Dimiter Madjarov]

Hello Mojitaba,


In the current case the Grid is configured as pageable, so it should be aware how to "page" in order to export all pages to the PDF document. This is why the current version of the example is not working, because the grid data is never updated accordingly to stay in sync with the current state (the reason for this is explained in the last answer).

Regarding the other question, if no data processing is required, the PDF export will work if all required data is in place, as in the following example.

Regards,
Dimiter Madjarov
Progress Telerik

[Mojtaba]

Hi Dimiter Madjarov,

Thanks for the reply. I understand your point that "if a grid is paging-enabled and you want export all pages then you need to handle dataStateChange event"; that makes sense.

However, as I you can see in this example, in my application, I would like to handle the grid's stuffs (i.e.,  dataStateChange, data, pageSize, sort etc.) in .ts file rather than property binding for some reason. It seems that PDF export doesn't like this way and got stuck.

Best regards,

Mojtaba

[Daniel]

Hello Mojtaba,

Setting the Grid properties directly will not trigger the Angular change detection and the Grid and thus the PDF export will not be aware of the change. You should set the grid inputs through property bindings as demonstrated in the demos in order for the export to work.

Regards,
Daniel
Progress Telerik

[Mojtaba]

Hello Daniel,

Thanks for the reply, but I cannot use property binding in my scenario. Is there any work around to get PDF export working?

Regards,

Mojtaba

[Daniel]

Hello,

Could you clarify why the properties cannot be bound through the markup?
The grid has an internal onDataChange method that will notify all of its components that the data has changed. If there isn't a way to change the logic then I can suggest to use it - example. Note however that because the method is internal, we cannot guarantee that it will not be changed in future versions of the package.

Regards,
Daniel
Progress Telerik

[Mojtaba]

Hello Daniel,

The reason that I can't use property binding; I'm using Kendo Grids in many components across my application. The way that these grids are being dealt with are quite the same, such as setting pageable, pageSize, sortable, handling dataStateChange and so on. So, I created a directive "KendoTypicalGrid" and apply that on every grid. Then in the directive, I handle the common behaviours of the grids; for example I set page size to 25. As a result, I can change the page size to 35 later without having to go through every grid. Hope that clears the matter now.

by the way, I still cannot understand why exporting to PDF depends on property binding?

Thanks,

Mojtaba

[Daniel]

Hello,

For the described scenario you could also use a custom binding directive. It has public method for notifying the grid that its data has changed.

The PDF export depends on property binding because it needs to be notified that the grid data has been changed. Setting the component property directly will not trigger OnChanges.

Regards,
Daniel
Progress Telerik