CODEWITHSUNDEEP
javascriptangularjsaccordionng-grid
SavvyGoat
SavvyGoat

Reputation: 99

Angular JS dynamically create ng-grid within accordion

I'm having a problem creating accordion elements dynamically with a ng-grid inside. I can create the grids dynamically but the dataset is the same across all the grid. I'd like each

My Plunker code can be found here. My code looks like this. Here is my JS file:

var app = angular.module('plunker', ['ngGrid', 'ui.bootstrap.transition', 'ui.bootstrap.collapse', 'ui.bootstrap.accordion']);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';
  $scope.dt = [
    [{
      processName: 'This is process 1',
      name: 'This is task 1',
      createTime: '23-07-2013 10:19:22'
    }, {
      processName: 'This is process 2',
      name: 'This is task 2',
      createTime: '24-07-2013 11:19:22'
    }, {
      processName: 'This is process 3',
      name: 'This is task 3',
      createTime: '25-07-2013 12:19:22'
    }, {
      processName: 'This is process 4',
      name: 'This is task 4',
      createTime: '26-07-2013 13:19:22'
    }],
    [{
      processName: 'This is process 111',
      name: 'This is task 111',
      createTime: '23-07-2013 10:19:22'
    }, {
      processName: 'This is process 222',
      name: 'This is task 222',
      createTime: '24-07-2013 11:19:22'
    }, {
      processName: 'This is process 333',
      name: 'This is task 333',
      createTime: '25-07-2013 12:19:22'
    }, {
      processName: 'This is process 444',
      name: 'This is task 444',
      createTime: '26-07-2013 13:19:22'
    }],
      [{
      processName: 'This is process 1111',
      name: 'This is task 111',
      createTime: '23-07-2013 10:19:22'
    }, {
      processName: 'This is process 2222',
      name: 'This is task 222',
      createTime: '24-07-2013 11:19:22'
    }, {
      processName: 'This is process 3333',
      name: 'This is task 333',
      createTime: '25-07-2013 12:19:22'
    }, {
      processName: 'This is process 4444',
      name: 'This is task 444',
      createTime: '26-07-2013 13:19:22'
    }]
  ];

  var templateWithTooltip = '<div class="ngCellText" data-ng-class="col.colIndex()"><span data-ng-cell-text title={{row.getProperty(col.field)}}>{{row.getProperty(col.field)}}</span></div>';

  $scope.createGrids = function() {
    var index = 0;

    angular.forEach($scope.dt, function(elem) {

      var dirtyConcat = 'dt[' + index + ']';
      $scope.rules=[];

      $timeout(function() {
        $scope.rules.push({
          description: 'Accordion ' + index,
          tasks: {
            data: dirtyConcat,
            enableCellSelection: true,
            enableRowSelection: false,
            enableCellEditOnFocus: true,
            columnDefs: [{
              field: 'processName',
              displayName: 'Process Name'
            }, {
              field: 'name',
              displayName: 'Details',
              editableCellTemplate: '<input type="text" ng-class=""colt" + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-placeholder="-- Select One --" />',
              enableFocusedCellEdit: true
            }]
          }

        });
++index;
       //console.log($scope.rules);

      }, 0);


    });

  };
  $scope.createGrids();

});

And here is the HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" />

    <link data-require="bootstrap-css" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="jquery" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>

    <script data-require="[email protected]" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
    <script src="accordion.js"></script>
    <script src="transition.js"></script>
    <script src="collapse.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js"></script>

  </head>

 <body ng-controller="MainCtrl">
    <p>ng grid inside accordion!</p>
    <accordion>
        <accordion-group heading="{{rule.description}} {{rule.tasks.length}}" ng-repeat="rule in rules">
            <div class="gridStyle" ng-grid="rule.tasks">
        </accordion-group>
    </accordion>
  </body>

</html>

Upvotes: 0

Views: 1278

Answers (1)

Asqan
Asqan

Reputation: 4479

Everythin was correct in your code, except the use of index.

Your createGrids function

 $scope.createGrids = function() {
var index = 0;
var i = 0
angular.forEach($scope.dt, function(elem) {

  var dirtyConcat = 'dt[' + index + ']';

  $scope.rules=[];

  $timeout(function() {
    $scope.rules.push({
      description: 'Accordion ' + i,
      tasks: {
        data: dirtyConcat,
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEditOnFocus: true,
        columnDefs: [{
          field: 'processName',
          displayName: 'Process Name'
        }, {
          field: 'name',
          displayName: 'Details',
          editableCellTemplate: '<input type="text" ng-class=""colt" + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" data-placeholder="-- Select One --" />',
          enableFocusedCellEdit: true
        }]
      }

    });
  i++;

   console.dir($scope.rules);
  }, 0);

  index++;
});

};
$scope.createGrids();

Here is your working Plunker:

http://plnkr.co/edit/8GY5eDbYFyxd0JUeljpO?p=preview

Upvotes: 1

Related Questions