This is a migrated thread and some comments may be shown as answers.

Kendo Grid Column unlocking (CSS or jQuery)

1 Answer 195 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 24 May 2017, 08:38 PM

I am having trouble exporting my Kendo Grid to PDF because I have two locked columns. Locked columns are a known limitation for Export to PDF and I understand that.

 

I am trying to unlock the two "frozen" columns before I export to PDF, but unlocking is not working. I have tried jQuery and CSS approaches.

 

I would prefer to use CSS. Any tips would be appreciated. Thank you.

 

Here is what I have tried in my grid object:

$("#grid").kendoGrid({
    // ... snip ... //
    // ... snip ... //
    pdf: {
        allPages: true,
        avoidLinks: true,
        fileName: "Demand Report.pdf",
        paperSize: "A4",
        margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
        landscape: true,
        repeatHeaders: true,
        scale: 0.2
    },
    pdfExport: function () {
 
        //Unlock the "locked" columns via jquery (this only unlocks the Field1? Field 2 will remain locked, why?)
        var grid = $("#grid").data("kendoGrid");
        grid.unlockColumn("Field1");
        grid.unlockColumn("Field2");
 
        //Unlock the "locked" columns via css (any combination of these makes the grid go crazy ?)
        $(".k-grid-content-locked").removeClass("k-grid-content-locked");
        $(".k-grid-lockedcolumns").removeClass("k-grid-lockedcolumns");
        $(".k-grid-header-locked").removeClass("k-grid-header-locked");
 
        console.log("columns should be unlocked ?");      
 
    },
    // ... snip ... //
    columns: [
        {
            field: "Field1",
            locked: true
        }, {
            field: "Field2",
            locked: true
        }, {
            field: "Field3",
            headerTemplate: currentEmploymentColumnHeading + "<span name='Field3' class='k-icon k-i-close remove' style='float: right;'></span>",
            width: 125,
            attributes: { style: "text-align:right;" },
            template: "#= (Field3 !== null) ? Number(Field3).toLocaleString() : 'N/A' #"
        }
    // ... snip ... //
    // ... snip ... //
 
 
 
//PDF Export Button - click event
$("#btnPdfExport").kendoButton({
    click: function () {
        $("#grid").getKendoGrid().saveAsPDF();
    }
});

 

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 26 May 2017, 11:25 AM
Hello Richard,

I am afraid that this functionality is not supported.

Based on the Locked Columns documentation (http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#locked-columns):

"The HTML output and script behavior of the Grid are very different when frozen columns are used. That is why the widget cannot switch between frozen and unfrozen mode after initialization."

Based on the unlockColumn of the Grid API Reference (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-unlockColumn):

"In order to use this method, the grid must be initialized with at least one locked column, and there should be locked columns left after the target column is unlocked."


Regards,
Preslav
Progress Telerik
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.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or