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

[developer]

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

[Radoslav]

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

 

 

[Regi]

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

[Alex Hajigeorgieva]

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

[Balaji]

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

 

 

[Alex Hajigeorgieva]

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