如何以编程方式解锁 Kendo-UI 网格 multi-column header

Question

我有一个带有 multi-column header 的网格，并且有一个锁定的组列 A。这是代码：

$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}" },
                           }]
            }]

我想在打印网格之前以编程方式解锁组列 A，以便它显示为一个网格而不是两个。我在打印前为 COLUMN1、COLUMN2 和组列 A 设置了 locked=false，但它仍然保持锁定状态。然后我在打印前只将组列 A 设置为解锁状态，并且该组仍保持锁定状态。我正在使用递归方法来解锁它们，但为了展示此功能的要点，我这样做是为了解锁：

thisGrid.unlockColumn("A");thisGrid.unlockColumn("ROW_HEADER");thisGrid.unlockColumn("COLUMN1");thisGrid.unlockColumn("COLUMN2");

其中 thisGrid 是上述网格的实例。如果有人以编程方式 locked/unlocked multi-column header 请帮忙。谢谢

Answer 1

当我们解锁列时，我们必须确保网格中至少还有一列仍处于锁定状态。所以在我的例子中，我从 A 组中删除了 ROW_HEADER 并将其作为第一列独立放置，现在当我尝试解锁列组 A 时，它已成功解锁。

$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}" },
                       }]
        }]

另一个问题是分组列 A 中没有定义字段属性但我们需要有字段属性或列索引到 lock/unlock 列，所以我'已在此处添加 field: "DUMMY_FIELD"，然后使用以下代码成功解锁：thisGrid.unlockColumn("DUMMY_FIELD")

Answer 2

首先，为了使 unlockColumn 方法在 A 列组上起作用，您需要为其分配一个字段属性.

问题是 Kendo UI 网格文档指出，在使用锁定列初始化网格后，至少有一个列应始终保持锁定状态。

在你的情况下，你有两个主 "columns"，A 和 B，只有 A 被锁定。因此，当您尝试解锁 A 时，它会保持锁定状态。

一种解决方法是添加另一个宽度为零的列并始终保持锁定状态。

查看演示 here。

如何以编程方式解锁 Kendo-UI 网格 multi-column header

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

printing

locking

multiple-columns

kendo-ui

kendo-grid