Kendo Grid Column unlocking (CSS or jQuery)

[Richard]

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();
    }
});

 

[Preslav]

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