如何以编程方式解锁 Kendo-UI Grid 多列标题答案

【问题标题】：How to unlock Kendo-UI Grid multi-column header programmatically如何以编程方式解锁 Kendo-UI Grid 多列标题
【发布时间】：2017-10-20 09:42:02
【问题描述】：

我有一个带有多列标题的网格，并且有一个组列 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 设置了锁定 = false，但它仍然保持锁定状态。然后我在打印之前只将组列 A 设置为解锁，并且该组仍然保持锁定状态。我正在使用递归方法来解锁它们，但为了展示这个功能的要点，我这样做是为了解锁：

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

thisGrid 是上述网格的实例。如果有人以编程方式锁定/解锁多列标题，请提供帮助。谢谢

【问题讨论】：

这个网格是什么？它在哪里设置？您如何/在哪里尝试应用解锁？是点击按钮吗？
实际上我已经找到了我作为答案发布的解决方案

标签： printing kendo-ui locking kendo-grid multiple-columns

【解决方案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 中没有定义字段属性，但我们需要具有字段属性或列索引来锁定/解锁列，所以我在那里添加了field: "DUMMY_FIELD"，然后使用成功解锁它此代码：thisGrid.unlockColumn("DUMMY_FIELD")

【讨论】：

【解决方案2】：

首先，为了让unlockColumn 方法对A 列组起作用，您需要为其分配一个字段属性。

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

在您的情况下，您有两个主要“列”，A 和 B，并且只有 A 被锁定。因此，当您尝试解锁 A 时，它会保持锁定状态。

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

查看演示 here。

【讨论】：