根据ag-grid中的条件隐藏或删除rowGroup的收缩图标[+]

时间:2018-06-22 06:45:50

标签: ag-grid-react

我们正在使用ag-grid-enterprise 13.1.0。

我们有父行和子行(单击父行上的加号“ +”会得到扩展)。

We当子行没有数据时,它们将显示为空行。在这种情况下,我想隐藏/删除+图标,以使用户不会展开以查看空的子行。

能否让我们知道这是否可行或任何其他合适的解决方案。

1 个答案:

答案 0 :(得分:0)

我已经使用rowClassRules属性实现了这一点。下面是一段代码:

rowClassRules = {
        "manualExpand": function(params) {
          if(params.node.field === 'outageName' && params.node.expanded === false) {
            var expandFlag = checkForEmptySevone(params.node)
            return expandFlag;
          }
        },

        "expandAll": function(params) {
          if (params.node.field === 'outageName' && params.node.expanded === true) {
            var expandAllFlag = checkForEmptySevone(params.node)
            return expandAllFlag;
          }
        }
      },

      checkForEmptySevone = (node) => {
        var rowData = node.childrenAfterGroup[0].data;
        if(rowData.get('SEVONE_ID') === ' ' || rowData.get('SEVONE_ID') === '' || 
          rowData.get('SEVONE_ID') === undefined || rowData.get('SEVONE_ID') === null) {
          return true
        } else {
          return false
        }
      }

**Below is the css:**
.manualExpand  .ag-icon-expanded {
    display: none !important;
}

.manualExpand  .ag-group-value {
    padding-left: 16px !important;
}

.manualExpand  .ag-icon-contracted {
    display: none !important;
}

.expandAll  .ag-icon-expanded {
    display: none !important;
}

.expandAll  .ag-group-value {
    padding-left: 16px !important;
}

.expandAll  .ag-icon-contracted {
    display: none !important;
}

.expandAll + div {
    background-color: black;
    display: none ! important;
}