AG-GRID tree data not showing expand rows button

0
votes

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

1
javascriptangularag-gridag-grid-angular
What version of Angular are you using? Also can you confirm whether you have imported ag-grid styles into angular-cli.json or angular.json file under the styles array option? - VVS
@VVS Thank you, I had missed the styles for ag-grid. Its working fine now. - Manjunath M

1 Answers

0
votes

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";