This is a migrated thread and some comments may be shown as answers.

PDF Export

12 Answers 194 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Christof
Top achievements
Rank 1
Christof asked on 01 Jun 2015, 06:27 AM

I built a testcase Gantt diagram with a PDF export and proxy for older browsers with everything working great.

Now I integrated this same code into our real-world project and the PDF export is no longer working. I disabled the proxy stuff and am testing in an up to date Chrome browser, these are my only PDF settings:

pdf: {
  landscape: true,
  margin: {
    left: 10,
    right: 10,
    top: 10,
    bottom: 10
  }
},

I have the following resources included and they are loading properly:

  • kendo.common.min.css
  • kendo.default.min.css
  • kendo.web.min.js
  • kendo.pdf.min.js

The diagram shows about 20 tasks over a span of about 2 years in month view.​

I see no errors in the console, just that it's loading the DejaVu font successfully.

When clicking PDF export a "PDF" file is exported and downloaded, however if I open the PDF in a text editor it's just the HTML source code of the page.

Since the kendo JS files are all minified I cannot really provide any more information, it's a bit of a black box. 

 

Also, when clicking PDF export, the Gantt diagram is suddenly expanded to full page width (there's a sidebar on the left side of the page). Why is this?

 

One last question: I have some tasks that do not yet have a date but I would like to show them in the diagram anyway. If I do this, the diagram is no longer correct, the "older" dated tasks are no longer shown in the timeline. Instead the timeline is set to the current date and the only task shown in the timeline is one which has a end date later than today. Is it possible to display tasks without assigning a date?

 

Please let me know if I can provide any more information.Thank you.

12 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 03 Jun 2015, 08:08 AM

Hello Christof,

I can't spot anything wrong at first sight besides the missing reference to pako_deflate.min.js. In any case I can't think of a scenario where you'll get HTML instead of the generated PDF.

I've prepared a snippet to test the scenario and it seems to fine. Note that you'll be getting a document a little under 4 meters wide. The limit for PDF 1.4 is 5 meters.

There's a bit of flicker that is fixed in the latest internal builds.

One suggestion that I have is to try loading kendo.all.min.js. This will rule out any dependency issues.

I don't think it's possible to show tasks without a date right now. Please, file a request for this feature on our UserVoice portal if you have minute. This will help us gauge the overall interest and prioritize.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Christof
Top achievements
Rank 1
answered on 04 Jun 2015, 10:11 AM

I investigated further into this issue this morning and found the culprit. I noticed I was getting a GET request to ./[object%20Object] in my apache access logs every time I tried a PDF export (this request didn't show up in the console network tab for some reason). I then copied the rendered code of the page and saved it as a standalone html-only testcase, then started removing code until the PDF export worked.

It started working as soon as I swapped jQuery 1.7.2 with the one packaged with kendo ui. The strange thing is, when I use jQuery 1.7.2 in another testcase I have, it works. So there must be something on the page that causes this behavior. The thing is, the page is pretty simple and only includes jQuery and the kendo scripts. I haven't yet found out what is causing the issue with 1.7.2.

When using a more recent jQuery version, the task and timeline containers in my gantt chart are set to height: 0; by some javascript (when inspecting the styles the rule does not come from a css file but was applied dynamically). The problem was that I had to set all containers from the gantt container up to <html> to height: 100% or the tasks would not be shown. This may be an issue you could look into.

I am no longer seeing the flicker now with updated jQuery (I also adjusted some styles).

I will create an issue in your UserVoice portal for the other thing.

Thanks,
Christof

0
T. Tsonev
Telerik team
answered on 08 Jun 2015, 07:48 AM

Hello Christof,

The jQuery version shouldn't matter too much. The 1.7 line is a bit old at this time and we recommend 1.9 or 2.x if you don't target IE8.

My suspicion is that you might have several jQuery files loaded simultaneously. Have you ruled this out?

I didn't have issues resizing the Gantt to 100% height. Am I missing something?

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Christof
Top achievements
Rank 1
answered on 09 Jun 2015, 01:10 PM

Hi

I did not investigate the jQuery issue further as it's working with the newer version.

I am also hot having any issues with resizing the chart to 100%, my point is that you have to set all parent containers to 100% height or the chart won't be shown at all. While this is the way CSS works, you could prevent this pitfall by doing it in Javascript.

Another thing that regards the same issue: my page is max-width: 100%, however the gantt chart is a lot wider (>4000px). This is no problem as it scrolls nicely within the timeline container. However the rendered pdf is a bit askew starting from the point where the page is 100% width. I tracked this down by going through every parent container from the grid all the way up to the page container and unsetting any width or max-width values. Then the pdf rendered correctly. I now handle this automatically on click of the print button:

$('#gantt-chart .k-timeline .k-grid-header-wrap').parentsUntil('body')
  .css('width', 'auto')
  .css('max-width', 'none');

The pdf is now printed correctly. It would be nice if the kendo pdf component handled this automatically.

Thank you
Christof

0
T. Tsonev
Telerik team
answered on 11 Jun 2015, 08:31 AM
Hi,

Perhaps setting listWidth to a fixed value in pixels will do it?

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Christof
Top achievements
Rank 1
answered on 11 Jun 2015, 02:38 PM

Hi

That does not fix the problem for me. What works for me is the snippet I posted above.

Do you have any ideas on how to print large gantt charts (range >= 1 year)? Even on A3 it doesn't look to good printed.
It would be nice if we could supply a date range to the pdf configuration. That way a user could only print the section of the chart that is relevant to him. Also it would make it easy to print the whole chart automatically segmented into, say, periods of 6 months.

0
T. Tsonev
Telerik team
answered on 15 Jun 2015, 12:25 PM
Hello,

We don't have a set of options to apply only during PDF export. The approach we recommend for now is to create a dedicated print page. More complex export operations can be scripted.

For large Gantt charts we recommend to set paper size to "auto" and use the poster printing mode in Adobe Reader.

I hope this helps.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Christof
Top achievements
Rank 1
answered on 16 Jun 2015, 07:05 AM

Hi

Thanks for your reply.
I don't think I can convince our client to tile-print their charts with an external program.

I have no problem scripting the export operations, the problem is that the options for this are rather limited due to the way the gantt chart works. My idea thus far was to offer a range of weeks per page, then calculate the number of weeks that means according to the total span of time displayed on the chart. Then iterate over those week segments and prepare the chart accordingly, do a saveAsPDF() and continue. The segmenting of the dates isn't a problem, but reducing of the information on the chart is. I have tried two variants:

  1. Hide month columns not within the current printing range. This however causes the layout to break.
  2. Generate a dataSource for each range and set that dataSource before printing the page with setDataSource(). But then obviously only the tasks in that dataSource are displayed.
  3. Same as 2, but just set the date of the tasks outside of the print range to the start date of the chart, then hide those tasks in the timeline in the onDataBound event. However, when setting these dates I always get an error in the setDataSource() function "cannot read property removechild of null" .

Any help achieving this would be greatly appreciated. I think the possibility to set tasks without dates would already go a long way.​

Thanks.

0
Christof
Top achievements
Rank 1
answered on 16 Jun 2015, 07:09 AM

(There is no edit function): the error I mention in point 3 occurs somewhere in the minified kendo ui javascript so I can't debug it any further.

0
T. Tsonev
Telerik team
answered on 18 Jun 2015, 08:11 AM
Hello,

I see what you mean. Splitting the Gantt in weeks is not exactly easy neither through the data source nor by manipulating the rendered HTML.
The principal problem here is that the Gantt calculates its visible range based on the task dates.

We also have automatic page breaking implemented for vertical content. I'll ask if there's a chance to adapt this to the Gantt.
Last time I checked we were not very optimistic it can be done.

Perhaps you can share a snippet for the last error. Maybe we can get around it by setting up a filter instead of removing the tasks in the data bound handler.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Christof
Top achievements
Rank 1
answered on 22 Jun 2015, 06:23 AM

Hello

Thank you for linking to the filter, I hadn't yet seen that.

We ended up proposing a different solution to the client based on that. We implemented a date-range slider to filter the chart and added a toggle for month/year view. This was really easy with the filter component!

Thanks again.

0
T. Tsonev
Telerik team
answered on 24 Jun 2015, 06:50 AM
Hello,

I'm glad to hear you've managed to get this working in a way that makes your client happy.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Gantt
Asked by
Christof
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Christof
Top achievements
Rank 1
Share this question
or