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

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

3 Answers 340 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Faran
Top achievements
Rank 1
Faran asked on 21 May 2017, 11:53 AM

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

3 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 23 May 2017, 08:21 AM
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.
0
Faran
Top achievements
Rank 1
answered on 23 May 2017, 09:50 AM

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

0
Preslav
Telerik team
answered on 25 May 2017, 09:03 AM
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.
Tags
Grid
Asked by
Faran
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Faran
Top achievements
Rank 1
Share this question
or