Search code examples
javascriptangularag-gridag-grid-angular

AG-GRID tree data not showing expand rows button

I am trying to implement angular AG-GRID tree data using ag-grid-angular and ag-grid-enterprise v25. I am able to rended the ag-grid tree data but the expand/collapse button is not visible. and If I double click on a parent row I can expand/collapse. why the expand/collapse button is not visible? Do I have to add any CSS file? or have to change anything?

HTML:

<ag-grid-angular #agGrid style="width:  500px; height: 500px;" id="myGrid" class="ag-theme-alpine" [rowData]="rowData"
  [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [autoGroupColumnDef]="autoGroupColumnDef" [treeData]="true"
  [animateRows]="true" [groupDefaultExpanded]="groupDefaultExpanded" [getDataPath]="getDataPath"
  (gridReady)="onGridReady($event)" [modules]="modules"></ag-grid-angular>

Here is the view:

enter image description here

Solution

  • Ag Grid styles should be imported in styles.scss, can you confirm your doing this.

    Something like the following:

    @import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";