Hide last column of kendo Grid while exporting to pdf for few tables

6 posts, 0 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 04 Apr 2016 Link to this post

    How can I hide the last column of my grid having action elements while doing a pdf export.I want to override the css for pdf export so as when the grid is exported the last column is hidden in the pdf. I also have a requirement wherein I want to show the last column in the exported pdf as that grid contains data instead of action elements.Thanks
  2. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 06 Apr 2016 Link to this post

    Hi,

    To achieve the desired functionality you can handle the pdfExport event and hide column. Then when the export finished you need to show the column again. For example:
    pdfExport: function(e) {
        var grid = $("#grid").data("kendoGrid");
        grid.hideColumn(1);
        e.promise
              .done(function() {
                   grid.showColumn(1);
        });
    },

    Additionally on the following link I created a small example which demonstrates the described approach:
    http://dojo.telerik.com/uFaBI/5

    I hope this helps.

    Regards,
    Radoslav
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Regi
    Regi avatar
    6 posts
    Member since:
    Sep 2014

    Posted 23 Apr 2019 in reply to Radoslav Link to this post

    Hi,

    We have something similar situation now. We need to hide some command columns while exporting the grid as PDF. We tried hide/show workaround suggested here. But the problem is that, the columns are getting hidden while generating the PDF. Is there a way to clone the grid, make necessary column manipulations and then export PDF from it?

    Thanks,

    Regi Mani

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 24 Apr 2019 Link to this post

    Hello, Regi,

    To hide a grid column only during the PDF export, you can just use a CSS rule and reduce the width of the target column to 0 as shown in this knowledge base article. Here is a runnable Dojo that shows hiding the last column during export:

    https://dojo.telerik.com/@bubblemaster/EZIlifiZ

    .k-pdf-export colgroup > col:nth-child(4) {
      width:0;
    }

    This is because the Kendo UI Drawing API adds the "k-pdf-export" class on all elements on the page and you can target specific elements easily this way:

    https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#the

    Let me know in case you need more help.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Balaji
    Balaji avatar
    7 posts
    Member since:
    Aug 2020

    Posted 30 Dec 2020 in reply to Alex Hajigeorgieva Link to this post

    Is there a way to remove the column menu (highlighted in yellow) in Exported PDF?

     

     

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 31 Dec 2020 Link to this post

    Hi, Balaji,

    Using the same approach with only CSS rules, you can hide any element on the page (or show it).

    To hide the column menu icon in the PDF, set the display to none:

    https://dojo.telerik.com/IGugONOT

    .k-pdf-export .k-header-column-menu{
        display:none;
    }

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top