This is a migrated thread and some comments may be shown as answers.
Hide last column of kendo Grid while exporting to pdf for few tables
5 Answers 161 Views
This is a migrated thread and some comments may be shown as answers.
developer
Top achievements
Rank 1
developer asked on 04 Apr 2016, 07:03 AM
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

5 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 06 Apr 2016, 07:20 AM
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!
 
0
Regi
Top achievements
Rank 1
answered on 23 Apr 2019, 01:09 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 24 Apr 2019, 10:09 AM
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.
0
Balaji
Top achievements
Rank 1
answered on 30 Dec 2020, 10:10 AM

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

 

 

0
Alex Hajigeorgieva
Telerik team
answered on 31 Dec 2020, 12:09 PM

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/.

Tags
Grid
Asked by
developer
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Regi
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Balaji
Top achievements
Rank 1
Share this question
or