javascript - Ag-grid - Masterdetail hide chevron icon when there is no detail data - Stack Overflow

admin管理员组

文章数量:1399987

In master/detail example, the expand/collapse icon is always present when setting [masterDetail]=true. However, my data sometimes does not have detail rows and I would like to hide the chevron in this situation. In my example, callRecords property would be present on the data but it would be null:

getDetailRowData: function(params) {
    params.successCallback(params.data.callRecords);
},

How can I not show the chevron on master grid when the data is null? Note: the example visible here:

In master/detail example, the expand/collapse icon is always present when setting [masterDetail]=true. However, my data sometimes does not have detail rows and I would like to hide the chevron in this situation. In my example, callRecords property would be present on the data but it would be null:

getDetailRowData: function(params) {
    params.successCallback(params.data.callRecords);
},

How can I not show the chevron on master grid when the data is null? Note: the example visible here: https://www.ag-grid./javascript-grid-master-detail-detail-grids/#detail-grid-options

• javascript
• ag-grid
• ag-grid-angular

Share Improve this question Follow edited Jul 20, 2022 at 2:32 KARTHIKEYAN.A 20.2k1010 gold badges137137 silver badges150150 bronze badges asked Jun 10, 2020 at 13:27 DodiDodi 2,26944 gold badges3232 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This exact requirement is covered here in docs.

Basically you implement isRowMaster -

this.isRowMaster = function(dataItem) {
  return dataItem ? dataItem.callRecords.length > 0 : false;
};

From docs -

In specify which rows should expand, provide the grid callback isRowMaster. The callback will be called once for each row. Return true to allow expanding and false to disallow expanding for that row.

By adding Boolean value to isRowMaster in the gridOptions we can able to enable or disable the icon visibility

const gridOptions = {
    defaultColDef: {
        editable: false,
        filter: true,
        floatingFilter: true,
        floatingFilterComponentParams: { suppressFilterButton: false },
        resizable: true,
        sortable: true,
        suppressColumnsToolPanel: false,
        suppressMenu: true,
    },
    isRowMaster: dataItem => {
        return !(dataItem.Status === 'OFFLINE')
    }
}

本文标签： javascriptAggridMasterdetail hide chevron icon when there is no detail dataStack Overflow