Menu
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
762
To identify the column that needs to be updated we can use the tilde selector which does a contains search through the thead of the grid. Create a custom function updateColumnTitle . Get the Grid instance, the DatePicker instances and their values and generate the new title.
You can prevent fields (such as IDs or company names) from being edited by using any of the following approaches: Set the editable option of the respective column(s) to false . Omit the field(s) declaration in the FormGroup . Skip the editCell method invocation in the cellClick event handler.
kendo:grid-pageable-messagesThe text messages displayed in pager. Use this option to customize or localize the pager messages.
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")
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With