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

Question

我有一个带有多列标题的网格,并且有一个组列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是上面网格的实例.如果有人以编程方式锁定/解锁多列标题,请帮忙.谢谢

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