I worked with Angular 17. Ag Grid 31.
My requirement is that, I need to define section to display as row. And click the section, the data below the section would disappear.
And the data contains dropdown list, if I defined row click function, then the dropdown list would not appear when I click the cell. How can I fix this issue.
And when I define any function for cell click, the dropdown list would not appear as well.

My html

      <ag-grid-angular style="width: 49.75rem; height: 500px;" [columnDefs]="columnDefs" [getRowHeight]="getRowHeight"
        [rowData]="filteredRowData" [defaultColDef]="defaultColDef" [autoSizeStrategy]="autoSizeStrategy"
        class='ag-theme-quartz' [singleClickEdit]="true"
        (rowClicked)="handleSectionRowClick($event)"></ag-grid-angular>,

My data, the section appears as the merged cells

    public rowData: any[] | null = [
        { section: 'Fluid', jan: 'Fluid' },
        { jan: 534, feb: 612, mar: 243, apr: 231, may: 428, jun: 231, type: 'Fluid', dataType: 'string' },
        { jan: 765, feb: 146, mar: 243, apr: 231, may: 428, jun: 231, type: 'Fluid', dataType: 'string' },
        { jan: 335, feb: 122, mar: 243, apr: 231, may: 428, jun: 231, type: 'Fluid', dataType: 'enum' },
        { jan: 35, feb: 342, mar: 243, apr: 231, may: 428, jun: 231, type: 'Fluid', dataType: 'string' },
        { jan: 568, feb: 531, mar: 243, apr: 231, may: 428, jun: 231, type: 'Fluid', dataType: 'string' },
        { jan: 365, feb: 361, mar: 243, apr: 231, may: 428, jun: 231, type: 'Fluid', dataType: 'string' },
        { section: 'Cement', jan: 'Cement' },
        { jan: 21, feb: 12, mar: 24, apr: 31, may: 28, jun: 31, type: 'Cement', dataType: 'string' },
        { jan: 21, feb: 12, mar: 24, apr: 31, may: 28, jun: 31, type: 'Cement', dataType: 'string' },
        { jan: 21, feb: 12, mar: 24, apr: 31, may: 28, jun: 31, type: 'Cement', dataType: 'string' },
        { jan: 21, feb: 12, mar: 24, apr: 31, may: 28, jun: 31, type: 'Cement', dataType: 'string' },
        { jan: 2, feb: 32, mar: 24, apr: 31, may: 48, jun: 21, type: 'Cement', dataType: 'string' },
        { jan: 21, feb: 12, mar: 24, apr: 31, may: 28, jun: 31, type: 'Cement', dataType: 'string' }
    ];

My column definition

    public columnDefs: ColDef[] = [
        {
            headerName: 'Code Name',
            field: 'jan',
      editable: false,
            colSpan: (params: ColSpanParams) => {
                if (isHeaderRow(params)) {
                    return 6;
                } else {
                    return 1;
                }
            }
        },
        {
            headerName: 'Value Code',
            field: 'feb',
            cellEditor: (params: ICellEditorParams) => {
                if (params.data.dataType === 'enum') {
                    return 'agSelectCellEditor';
                } else {
                    return null; // 使用默认的长文本框
                }
            },
            cellEditorParams: (params: ICellEditorParams) => {
                if (params.data.dataType === 'enum') {
                    return { values: [111, 222] };
                } else {
                    return null; // 使用默认的cellEditorParams
                }
            }
        },
        { headerName: 'UoM', field: 'mar' },
        { headerName: 'Parameter Description', field: 'jun' },
    {
      headerName: "Select Editor",
      field: 'mar' ,
      editable: true,
      cellEditor: "agSelectCellEditor",
      cellEditorParams: {
        values: this.languages,
      } as ISelectCellEditorParams,
    },
    ];

My row click function

    handleSectionRowClick(event:any) {
    if (event.data.section) {
      this.sectionExpanded[event.data.section] = !this.sectionExpanded[event.data.section];
    }
    }

My UI:

enter image description here

I need the dropdown list col to appear and the row click is working