Ag-grid - Master / detail hide chevron icon when there is no detail data

Question

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.com/javascript-grid-master-detail-detail-grids/#detail-grid-options

Chuchuah

Answer 1

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.

Discontinue

Perfect, thank you, for some reason I missed that part of the doc – Chuchuah

@Pratik Bhat kindly also check my SO thread #69273459 – Precedent

That "callRecords" is an interface or what ? when i try to implement .length isn't working. – Kean

@Kean - it is an example, a data field in question – Discontinue

Answer 2

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')
    }
}

Cam