How to display column dynamically using ag-grid

Question

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

---

my json data is:

[{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 Output is Expected Output

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 given below Existing Output

How can reach my Expected Output From the existing output

Answer 1

First arrange 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'm using following code

             function generateChartData() {
             var chartData = [],
               categories = {};
             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 option is given 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();
}

column definition is dynamic which is given below

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

in this header is an array . this array contain 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 async call to get your data so when the call suceeds the grid is already initialized.

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