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

Question

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

Answer 1

When we are unlocking columns we have to make sure that there is atleast one column left in the grid which is still locked. So in my case I removed ROW_HEADER from the group A and put it independently as the first column, now when I try to unlock column group A it get successfully unlocked.
$scope.gridOptions.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" } },
{
title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A", field: "DUMMY_FIELD"
columns: [
{ 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}" },
}]
}]
Another issue is that there is no field property defined in grouped column A but we need to either have field property or column index to lock/unlock a column, so I've added field: "DUMMY_FIELD" there and then unlock it successfuly using this code: thisGrid.unlockColumn("DUMMY_FIELD")

Answer 2

First of all, in order for the unlockColumn method to work on the A column group you need to assign it a field property.
The problem is that the Kendo UI Grid documentation states that after initializing the grid with a locked column, at least one column should remain locked at all times.
In your case, You have two main "columns", A and B, and only A is locked.
Therefore when you try to unlock A, it stays locked.
One workaround is to add another column with a zero width and keep it locked at all times.
See a demo here.