Dynamic column mapping using ag-grid

Question

I am new to angularjs technology. I am using ag-grid and want to display the column dynamically

---

my json data:

[{Date:'12-12-2015',Name:'ammu',mark:20},{Date:'12-12-2015',Name:'appu',mark:24},{Date:'12-12-2015',Name:'anu',mark:27},{Date:'13-12-2016',Name:'ammu',mark:23},{Date:'13-12-2015',Name:'anu',mark:20}] 

---

My Expected Result Expected Result

Existing code is given below.

 $scope.gridOptions = { columnDefs: [], enableFilter: true, rowData: [], rowSelection: 'multiple', rowDeselection: true }; $scope.customColumns = []; Getdetails(); function Getdetails() { masterdataFactory.Getdetails() .success(function (Student) { f (Student.length != 0) { for(var i=0;i<Student.length;i++) { $scope.customColumns.push( { headerName: Student[i].Name, field: "Mark", headerClass: 'grid-halign-left' } ); }; $scope.gridOptions.columnDefs = $scope.customColumns; $scope.gridOptions.rowData = Student; $scope.gridOptions.api.setColumnDefs(); } }) .error(function (error) { $scope.status = 'Unable to load data: ' + error.message; }); } 

Existing output is shown below. Existing output.

How to achieve my expected result from an existing exit

Answer 1

First place the json data

 [{Date:'12-12-2015',ammu:20,appu:24,anu:27},{Date:'13-12-2016' ammu:23,anu:20}] 

for this purpose i use the following code

  function generateChartData() { var chartData = [], categories = {}; debugger; for ( var i = 0; i <Student.length; i++ ) { var newdate = Student[ i ].Date; var Name=Student[ i ].Name; var Mark=Student[ i ].Mark; // add new data point if ( categories[ newdate ] === undefined ) { categories[ newdate ] = { DATE: newdate }; chartData.push( categories[ newdate ] ); } // add value to existing data point categories[ newdate ][ Name] = Mark; } return chartData; } 

grid parameter is shown below:

  $scope.gridOptions = { columnDefs: coldef(), enableFilter: true, rowData: [], rowSelection: 'multiple', rowDeselection: true, enableColResize: true, } }; $scope.gridOptions.columnDefs = $scope.customColumns; $scope.gridOptions.rowData =generateChartData(); $scope.gridOptions.rowData = generateChartData(); } 

the column definition is dynamic, which is given below

  function coldef() { for(var i=0;i<headers.length;i++) { debugger; $scope.customColumns.push( { headerName: headers[i], field:headers[i], headerClass: 'grid-halign-left', width:180, filter: 'set', }); } } 

there is an array in this header. this array contains different student names

  var headers=new Array(); headers[0]="DATE"; var Names= Student.map(function (item) { return item.Name}); Names= Names.filter(function (v, i) { return Names.indexOf(v) == i; }); for(var i=1;i<=Names.length;i++) { headers[i]=Names[i-1]; } 

Answer 2

It seems that you are using an asynchronous call to receive your data, so when the call succeeds, the grid is already initialized.

After the grid has been initialized, you need to use the grid API (gridOptions.api ...) instead of girdOptions.columnsDef (see http://www.ag-grid.com/angular-grid-api/index.php )

Answer 3

There are some errors in the code:

1st : the "API" field is not available at startup. This can mean two things:

• the grid is not loaded YET (end the call in $timeout or the finished event verification documentation at http://www.ag-grid.com ).
• You forget the ag-grid directive in your DOM element so that the grid does not initialize at all.

2nd : do not use $scope.gridOptions.api.setColumnDefs(); but $scope.gridOptions.api.setColumnDefs(myNewColumnsDefs);

3rd : if the grid is already initialized, do not use rowData use api.setRowData(myDatas) , it may be better to use it after calling setColumnDefs , but I do not think it will ruin everything.

Answer 4

 // the api will not be available unless it is compiled with the **$timeout** or **setTimeout** because this javascript library does not fall in angular digest cycle $timeout(function() { $scope.gridOptions.api.setColumnDefs(masterColumnDefs); }, 0); 

This will help you access the ag-grid API.

Hope this helps!

Answer 5

I think that your input (Student) may be the culprits, since the brackets seem to be oddly paired (your data has been copied, but formatted for readability):

 [ {Date:'12-12-2015',Name:'ammu',mark:20}, Date:'12-12-2015',Name:'appu',mark:24}, Date:'12-12-2015',Name:'anu',mark:27}, Date:'13-12-2016',Name:'ammu',mark:23}, {Date:'13-12-2015',Name:'anu',mark:20} ] 

The second, third and fourth lines have no beginning { .

Answer 6

  $scope.gridOptions ={ enableSorting: true, enableFilter: true, suppressMovableColumns:true, enableColResize: true, columnDefs : [], rowHeight : 27, tooltipField : true, suppressLoadingOverlay : true, overlayLoadingTemplate: '<span class="ag-overlay-loading-center" style=background:lightgoldenrodyellow>Please wait while your rows are loading</span>', //getRowStyle : getRowStyleScheduled }; $scope.gridRefresh = function() { $scope.columnsHeaders =[]; for (var i = 0, len = $scope.columnsHeaders.length; i < len; i++) { $scope.columnsHeaders[i].headerName = $scope.columnsHeaders[i].name; $scope.columnsHeaders[i].field = $scope.columnsHeaders[i].field; $scope.columnsHeaders[i].cellRenderer = function(params) { if(params.value != null) { return '<span title="'+params.value+'">'+params.value+'</span>'; }else { return null; } } $scope.gridOptions.columnDefs.push($scope.columnsHeaders[i]); } $scope.gridOptions.api.setColumnDefs($scope.gridOptions.columnDefs); $scope.gridOptions.api.setRowData($scope.Rows); $scope.gridOptions.columnApi.autoSizeColumns($scope.gridOptions.columnDefs); } 

Answer 7

I searched the same in corner 6. But this page came out on Google. I give an answer in corner 6 in case someone wants to get the column definitions from the rest APIs,

I use the size of the columns to fit, as the columns are dynamic to fit the available grid width

 ngOnInit() { this.gridOptions = { onGridSizeChanged: () => { this.gridApi.sizeColumnsToFit(); }, onNewColumnsLoaded: () => { if (this.gridApi) { this.gridApi.sizeColumnsToFit(); } }, defaultColDef: { width: 150, minWidth: 100, maxWidth: 400 } }; this.getcolumnData(); 

}

 getcolumnData() { this.pageType = this.route.snapshot.paramMap.get('type'); this.http.get('${this.baseURL}/getStaticMetaData').subscribe(res => { let columnDef = []; res.forEach(column => { columnDef = [...columnDef, {headerName: column.columnName, field: column.columnId}]; }); this.gridApi.setColumnDefs(columnDef); }); 

}

 onGridReady(params) { this.gridApi = params.api; this.http.get('${this.baseURL}/getStaticData').subscribe(data => { if (data.length < 20) { this.isSmallGrid = true; } this.gridApi.setRowData(data); }, err => { // handle error }); 

}

 <ag-grid-angular style="width: 100%;" [ngStyle]="{'height.px': isSmallGrid ? '325' : '725'}" class="ag-theme-balham" [gridOptions]="gridOptions" (gridReady)="onGridReady($event)" enableColResize enableSorting enableFilter > </ag-grid-angular>