Export Tabstrip

7 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
    2729 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. Kendo UI is VS 2017 Ready
  4. 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.
  5. Ron
    Ron avatar
    11 posts
    Member since:
    Mar 2014

    Posted 09 Aug 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

  6. Plamen
    Admin
    Plamen avatar
    2729 posts

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

    Posted 28 Sep 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?

     

  8. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 29 Sep 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.
     
Back to Top
Kendo UI is VS 2017 Ready