Ag grid Master Detail model in Angular 15 -Trying to extend the master grid filter for the...

I have written a custom logic for filtering the detail grid using the master filter only. Filter is working I could see in the console logs and there are no errors but after filtering the detail grid no data is displayed in the table.

Here is my code -

onFilterChanged(event: any): void {
if (!this.gridApi) {
console.error("Grid API is not initialized");
return;
}

const filterModel = this.gridApi.getFilterModel();

if (!this.rowData || this.rowData.length === 0) {
console.log("Row data is empty, skipping filtering.");
return;
}

this.filteredRowData = this.rowData
.map((masterRow) => {
console.log("Processing master row:", masterRow);

let matchesMaster = true;
let filteredDetailRows = [];

for (const [field, model] of Object.entries(filterModel)) {
if (!model || !model.filter) {
console.log("Skipping invalid or empty filter for field:", field);
continue;
}

const filterValue =
model.filter !== null && model.filter !== undefined
? model.filter.toString().toLowerCase()
: "";
console.log("Filter value for field:", field, "is:", filterValue);

// Check master row fields
if (field in masterRow) {
const masterFieldValue = masterRow[field]?.toString().toLowerCase();
matchesMaster =
matchesMaster && masterFieldValue?.includes(filterValue);
}

// Check detail rows and filter them
if (field in (masterRow.inputTsList[0] || {})) {
filteredDetailRows = masterRow.inputTsList.filter((detailRow) => {
const detailFieldValue = detailRow[field]
?.toString()
.toLowerCase();
return detailFieldValue?.includes(filterValue);
});
}
}

const hasMatchingDetails = filteredDetailRows.length > 0;
console.log(
"Master row matches:",
matchesMaster,
"| Detail rows match:",
hasMatchingDetails
);

if (matchesMaster || hasMatchingDetails) {
return {
...masterRow,
inputTsList: hasMatchingDetails
? filteredDetailRows
: masterRow.inputTsList,
};
}
return null;
})
.filter((row) => row !== null); // Remove null rows where neither master nor detail matches

// Update the grid with the filtered data
this.filteredRowData.forEach((row, index) => {
const rowId = String(row.tsId);
console.log(`Row ${index} ID:`, rowId);
});

this.gridApi.setRowData(this.filteredRowData as outputTs[]);
console.log(
"Row data currently in the grid:",
this.gridApi.getDisplayedRowAtIndex(0)
);
console.log("Displayed Row Count:", this.gridApi.getDisplayedRowCount());
console.log("Grid API row :", this.gridApi.getDisplayedRowAtIndex(0));

this.gridApi.forEachNode((node) => {
if (
node.data &&
node.data.inputTsList &&
node.data.inputTsList.length > 0
) {
node.setExpanded(true);
} else {
node.setExpanded(false);
}
});


}

console log : Row data currently in the grid: undefined Displayed Row Count: 0

Continue reading...