angularjs - How to add a column at runtime in a grid using ui-grid -
hello fellow programmers, requirement add together column in grid @ runtime or dynamically using ui-grid. able accomplish same using button, want override predefined functionality of icon in on header of grid used sorting , predefined tasks(), want add together 1 more functionality there
class="snippet-code-js lang-js prettyprint-override">var app = angular.module('app', ['nganimate', 'ui.grid']); app.controller('mainctrl', ['$scope', '$http', 'uigridconstants', function ($scope, $http, uigridconstants) { $scope.columns = [{ field: 'name' }, { field: 'gender' }]; $scope.gridoptions = { enablesorting: true, columndefs: $scope.columns, onregisterapi: function(gridapi) { $scope.gridapi = gridapi; } }; $scope.add = function() { $scope.columns.push({ field: 'company', enablesorting: false }); } $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') .success(function(data) { $scope.gridoptions.data = data; }); }]); class="snippet-code-css lang-css prettyprint-override">.grid { width: 500px; height: 250px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script> <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"> <link rel="stylesheet" href="main.css" type="text/css"> </head> <body> <div ng-controller="mainctrl"> seek clicking add together button add together company column. <br> <br> <button id="button_add" class="btn" ng-click="add()">add</button> <div id="grid1" ui-grid="gridoptions" class="grid"></div> </div> <script src="app.js"></script> </body> </html>
of adding column there
you can utilize $watch in add together method:
$scope.add = function() { $scope.columns.push({ field: 'company', enablesorting: false }); $scope.$watch('columns', function(newval, oldval){ console.log('added'); }, true); } and noticed have minified script before doctype of document should not have there.
angularjs angular-ui-grid
No comments:
Post a Comment