Kendo Grid Column unlocking (CSS or jQuery)

2 posts, 0 answers
  1. Richard
    Richard avatar
    13 posts
    Member since:
    Mar 2017

    Posted 24 May 2017 Link to this post

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

     

  2. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 26 May 2017 Link to this post

    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.
Back to Top