Instantiating ag-grid without loading empty grid initially

Question

Defined a an ag-grid, data will appear only if grid have some content.

//HTML file

<form [formGroup]="myForm" (ngSubmit)="search()" >
 <button type="submit" class="btn btn-default">Search</button>
   </form>

<div class="col-md-12" *ngIf="rowData.length > 0">
    <ag-grid-angular #agGrid style="width: 100%; height: 330px;" class="ag-fresh"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"    
        [rowData]="rowData"
        [datasource] = "dataSource"
        enableColResize
        enableSorting
        enableFilter
        rowSelection="single"
    ></ag-grid-angular>
</div>

In component I had defined the grip options in the constructor and initialized data source in the search method, which will call on submitting the form.

constructor(private masterDataService:MasterDataService,private http: Http) {
        this.myForm = new FormGroup({

    });


    this.gridOptions = <GridOptions>{
        context:{},
        rowModelType: 'pagination',
        enableServerSideFilter: true,
        paginationPageSize: 10,
        rowData: this.rowData,
        columnDefs: this.columnDefs,
        onReady: () => {
            this.gridOptions.api.sizeColumnsToFit();
        }


    };

}

search(){
     let self = this;
     let dataSource = {
       paginationPageSize: 10,
       getRows: (params: any) => {
              let headers: Headers = new Headers();
              headers.set("Content-Type", "application/json");
                console.log("here dataSource")
                this.formatReqData(params.startRow, params.endRow);
                 this.http.post(AppUtils.INCIDENT_SEARCH, this.myForm.value, {headers: headers}).subscribe(res=>{
                    self.gridOptions.api.setRowData(res.json().result.incidentHdr);
                    self.rowData = res.json().result.incidentHdr;
                    var rowsselfPage = self.rowData;
                    var lastRow = -1;
                    params.successCallback(rowsselfPage, res.json().result.totalRecords);
                 });
        }
      } 

      //this.gridOptions.datasource = dataSource;
      this.gridOptions.api.setDatasource(dataSource);
     }

Exception :

caused by: Cannot read property 'setDatasource' of undefined

This exception will solve, if I remove "*ngIf="rowData.length > 0" from html after removal.

<div class="col-md-12">
    <ag-grid-angular #agGrid style="width: 100%; height: 330px;" class="ag-fresh"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"    
        [rowData]="rowData"
        [datasource] = "dataSource"
        enableColResize
        enableSorting
        enableFilter
        rowSelection="single"
    ></ag-grid-angular>
</div>

But here problem is that grid will load initially before the search, that is not required. How can I achieve this without loading the empty grid initially.

rorvis rorvis · Accepted Answer · 2017-03-16T22:33:24

I have some pages on which I do not want to see the grid until it is populated. I use a boolean called showGrid, set to false.

So, replace in your code:

*ngIf="rowData.length > 0"

with

*ngIf="showGrid"

When you are ready to view the grid, set showGrid to true in the code.

Instantiating ag-grid without loading empty grid initially

Exception :

1 Answers