Angular js Dynamic Grid Header

Question

Here i want to dynamically update the display name or field of grid headers according to any user input value.

  <html ng-app="myApp">  
    <head lang="en">
     <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>  
   <link rel="stylesheet" type="text/css" href="ng-grid.css" />
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script type="text/javascript" src="jquery-1.8.2.js"></script>
   <script type="text/javascript" src="angular.js"></script>
   <script type="text/javascript" src="ng-grid-1.3.2.js"></script>

 <script type="text/javascript">
   var app = angular.module('myApp', ['ngGrid']);
  app.controller('MyCtrl', function($scope) {
 $scope.myData = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];
   $scope.gridOptions = { 
    data: 'myData',
       columnDefs: [{field: 'name', displayName: 'Name'},
                 {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
    };
  });
      </script>
         </head>
<body ng-controller="MyCtrl">
   <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>

Now my requirement is:-

IN HTML There would be something like

A Dropdown in which there are my All Grid Headers value. ANd corresponding there would be a input box

When user select any particular grid header from dropdown, then corresponding input value get mapped to that header , and my grid get also updated according to modified header.

Guys please help me, i am really get stuck in doing this in angular and this is really very important for me

Haven't use ng-grid, but perhaps modifying the $scope.gridOptions.columnDefs array when thing changes is what you want? You can do $scope.$watch on scope variable linked to the dropdown box and perform this changes in the watch callback? — Jimmy Chandra
– Jimmy Chandra, Commented Apr 25, 2015 at 13:34
In my grid there are two fields 1- name 2- age, Now i want to show a dropdown in html ,which contains the value of all field name.... NOw suppose any user has selected name from the dropdown and he wants to change this value to Firstname.(there would be input box respective to dropdown). Now i want when user input Firstname in input box then i want to update my grid columns to 1- Firstname 2- age — Hardik Munjaal
– Hardik Munjaal, Commented Apr 25, 2015 at 13:57

Jimmy Chandra · Accepted Answer · 2015-04-25 14:02:02Z

See the following example...

In the example, I am watching the changes on the select drop down, as well as watching the changes to the new field name. When the name change, it will rebuild the ng-grid column using self.gridOptions.ngGrid.buildColumns().

(function() {
  'use strict';

  angular.module('myApp', ['ngGrid']);
  
  angular.module('myApp')
    .controller('myCtrl', myCtrl);
  
  myCtrl.$inject = ['$scope', '$log'];
  function myCtrl($scope, $log) {
    var self = this;
    self.myData = [
      {name: "Moroni", age: 50},
      {name: "Tiancum", age: 43},
      {name: "Jacob", age: 27},
      {name: "Nephi", age: 29},
      {name: "Enos", age: 34}
    ];
   
    self.selectedColumn = null;
    self.selectedFieldName = null;
    
    $scope.$watch(function() { return self.selectedColumn; },
      function(newValue, oldValue) {
        $log.info(oldValue, newValue);
        self.selectedFieldName = newValue.displayName;
      }
    );
    
    $scope.$watch(function() { return self.selectedFieldName; },
      function(newValue, oldValue) {
        self.selectedColumn.displayName = newValue;
        self.gridOptions.ngGrid.buildColumns();
      }
    );

    self.columnDefs =  [
        {field: 'name', displayName: 'Name'},
        {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}
      ];
    
    $scope["vm"] = self;
    
    self.gridOptions = { 
      data: 'vm.myData',
      columnDefs: self.columnDefs
    };
  }

}());

.gridStyle {
    border: 1px solid rgb(212,212,212);
    height: 300px
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js"></script>

<div ng-app="myApp" ng-controller="myCtrl as vm">
  <select ng-options="column.field for column in vm.columnDefs" ng-model="vm.selectedColumn"></select>  
  <input type="text" ng-model="vm.selectedFieldName">
  
  <div class="gridStyle" ng-grid="vm.gridOptions"></div>
</div>

Collectives™ on Stack Overflow

Angular js Dynamic Grid Header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related