How to unlock Kendo-UI Grid multi-column header programmatically

4 posts, 0 answers
  1. Faran
    Faran avatar
    3 posts
    Member since:
    Apr 2010

    Posted 21 May 2017 Link to this post

    I have a grid with multi-column headers and there is a group column A which is locked. Here is the code:

    $scope.gridOptions.columns = [
                    {
                        title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A",
                        columns: [{ field: "ROW_HEADER", filterable: false, width: "20px", title: "   .", sortable: false, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHeadYellow", "style": "border-right: 0px !important;" }, attributes: { "class": "contert-alpha  rowHeaderCell" } },
                                  { field: "COLUMN1", title: "COLUMN1", width: "80px", hidden: true, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: "#: COLUMN1)#" },
                                  { field: "COLUMN2", title: "COLUMN2", width: "150px", locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: #:COLUMN2#}
                                  ]
                    },
                    {
                        title: "B", headerAttributes: { "class": "section-border" }, groupId: "B",
                        columns: [{ field: "COLUMN3", title: "COLUMN3", width: "110px", headerAttributes: { "class": "sub-col continuity" }, attributes: { "class": "contert-alpha center-middle" }, template: "#: COLUMN3 #" },
                                  { field: "COLUMN4", title: "COLUMN4", width: "120px", headerAttributes: { "class": "sub-col no-left-border" }, attributes: { "class": "contert-number " }, format: "{0: MM/dd/yyyy}" },
                                   }]
                    }]

     I want to unlock the group column A programmatically before printing the grid so that it appears as one grid instead of two. I have set locked=false for COLUMN1, COLUMN2 and group column A before printing but it still stays locked. Then I've set only group column A as unlocked before printing and the group still stays locked. I am using recursive method to unlock them but I but in order to show the gist of this functionality I am doing this to unlock:

    thisGrid.unlockColumn("A");
    thisGrid.unlockColumn("ROW_HEADER");
    thisGrid.unlockColumn("COLUMN1");
    thisGrid.unlockColumn("COLUMN2");
    Where thisGrid is instance of above grid. If anyone has programmatically locked/unlocked multi-column header please help. Thanks
  2. Preslav
    Admin
    Preslav avatar
    571 posts

    Posted 23 May 2017 Link to this post

    Hi Faran,

    At this stage, the only possible solution is invoking the unlockColumn method for every column that needs to be unlocked.

    Additionally, have in mind that in order to use this method there should be locked columns left after the target column is unlocked.

    Finally, more information about the locked columns is available in this section of the documentation:
    Regards,
    Preslav
    Telerik by Progress
    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.
  3. Faran
    Faran avatar
    3 posts
    Member since:
    Apr 2010

    Posted 23 May 2017 in reply to Preslav Link to this post

    Preslav,

    Thanks for your response. I have gone through the link you shared, I am pasting this excerpt from that link "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."

    Does it mean we can't freeze/unfreeze columns on the fly? I have other grids where we don't have nested columns and some of the columns are locked, before printing the grid I can successfully unlock them all but when I do the same thing in multi-column header I can't. In case of multi-columns headers in our application  an interesting thing is that all the locked columns are in first locked group A and I am trying to unlock it but as you said "Additionally, have in mind that in order to use this method there should be locked columns left after the target column is unlocked." which means group/column A is the first and only locked column in our grid. So if I take out one child column (ROW_HEADER) from Column A and then try to unlock column A, it should work based on your statement. Please confirm. Thanks

  4. Preslav
    Admin
    Preslav avatar
    571 posts

    Posted 25 May 2017 Link to this post

    Hi Faran,

    You are correct, if you take out the "ROW_HEADER" column and leave it as locked, you should be able to unlock the "A" column.

    Further, I am not sure how can you successfully unlock all columns as this functionality is not supported.

    Finally, another possible solution for printing the grid as one is using the PDF export and printing the exported file: http://demos.telerik.com/kendo-ui/grid/pdf-export

    Regards,
    Preslav
    Telerik by Progress
    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