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

Export Tabstrip

8 Answers 208 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 06 Jul 2015, 06:50 PM

I am trying to export a view in my SPA using the kendo drawing api.  One of the elements on this view is a tabstrip and I would like to export all of the different tab contents, not just the active one.

I found this post about printing the tabstrip and was thinking I would have to do something like that in my code.  This is the export to PDF button click event handler code.  This seems to mostly work, only I don't know how to put the tabstrip back the way it was before I made all of the content blocks visible.

e.preventDefault();
$("#pageContainer .k-tabstrip .k-content").css("display", "block");  // Show all the tabstrip content blocks
$("#span.tabHeader").css('display', 'block'); // Show the tab header span
 
kendo.drawing.drawDOM($("#pageContainer")).then(function (group) {
  return kendo.drawing.exportPDF(group, {
    paperSize: 'auto',
    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
  });
})
.done(function (data) {
  kendo.saveAs({
    dataURI: data,
    fileName: kendo.format('Item - {0}.pdf', viewModel.selectedItem.item)
  });
});
 
// Not really sure how to put the tabstrip back together
$("#pageContainer .k-tabstrip .k-content").css("display", "none");
 
$("#span.tabHeader").css('display', 'none');  // Hide the tab header spans

8 Answers, 1 is accepted

Sort by
0
Accepted
Plamen
Telerik team
answered on 07 Jul 2015, 05:47 AM
Hello Robin,

Here is a sample dojo page where a functionality similar to the one that you are trying to achieve worked correctly at my side.

Hope this will help you solve the issue.

Regards,
Plamen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Robin
Top achievements
Rank 1
answered on 07 Jul 2015, 11:16 AM
It does indeed.  Thank you so much.
0
Summit Insights
Top achievements
Rank 1
answered on 09 Aug 2016, 11:19 PM

Hi,

is this last demo updated?

I am having the same issue as Robin and can't put the report back together.

Also, is there a way to print each tab in a separate page?

 

thanks

0
Plamen
Telerik team
answered on 11 Aug 2016, 06:33 AM
Hello,

I have updated the dojo so it is exported in separate tabs. 

Regards,
Plamen
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Summit Insights
Top achievements
Rank 1
answered on 29 Sep 2016, 03:19 AM

Thanks for the updated example. However it doesn't work properly in IE (11).

The first tab exports ok but the other ones it is just a blue-ish box with no data.

Any chances you can assist?

 

0
Plamen
Telerik team
answered on 29 Sep 2016, 05:38 AM
Hello,

I have tested it at my side and it worked correctly in IE11. Here is  a video of my test. Please review it and let me know what else should be done in order to replicate the issue.

Regards,
Plamen
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Sibele
Top achievements
Rank 1
answered on 03 Feb 2017, 03:51 AM

Hi Plamen,

I recently updated to the 2017 version and I'm having issues when exporting the kendoCharts, they are not being rendered.

Here is my code. Please note that if you change to an earlier version (e.g. 2016.2.714) it works.

Could you please assist?

Cheers

0
Plamen
Telerik team
answered on 03 Feb 2017, 11:19 AM
Hi,

It seems like the chart needs a bit more time to render so that it can be exported correctly. Here is the dojo that worked at my side.

Regards,
Plamen
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Drawing API
Asked by
Robin
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Robin
Top achievements
Rank 1
Summit Insights
Top achievements
Rank 1
Sibele
Top achievements
Rank 1
Share this question
or