Export Tabstrip

9 posts, 1 answers
  1. Robin
    Robin avatar
    46 posts
    Member since:
    Jul 2012

    Posted 06 Jul 2015 Link to this post

    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

  2. Answer
    Plamen
    Admin
    Plamen avatar
    2781 posts

    Posted 07 Jul 2015 Link to this post

    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!
     
  3. Robin
    Robin avatar
    46 posts
    Member since:
    Jul 2012

    Posted 07 Jul 2015 in reply to Plamen Link to this post

    It does indeed.  Thank you so much.
  4. Ron
    Ron avatar
    11 posts
    Member since:
    Mar 2014

    Posted 09 Aug 2016 Link to this post

    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

  5. Plamen
    Admin
    Plamen avatar
    2781 posts

    Posted 11 Aug 2016 Link to this post

    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.
     
  6. Ron
    Ron avatar
    11 posts
    Member since:
    Mar 2014

    Posted 28 Sep 2016 in reply to Plamen Link to this post

    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?

     

  7. Plamen
    Admin
    Plamen avatar
    2781 posts

    Posted 29 Sep 2016 Link to this post

    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.
     
  8. Sibele
    Sibele avatar
    1 posts
    Member since:
    Dec 2016

    Posted 02 Feb in reply to Plamen Link to this post

    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

  9. Plamen
    Admin
    Plamen avatar
    2781 posts

    Posted 03 Feb Link to this post

    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.
Back to Top