All geek questions in one place

How to add a runtime column in a grid using ui-grid

Hello to all my fellow tribesmen, my requirement is to add a column to the grid at runtime or dynamically using ui-grid. I can achieve the same using the button, but I want to override the predefined functionality of the icon, which in the header of the grid used for sorting, and some predefined tasks (), I want to add one more functionality there

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; }); }]); 
 .grid { width: 500px; height: 250px; } 
 <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"> Try clicking the Add button to add the 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>

add column

+5
source share
2 answers

You can use $watch in the add method:

 $scope.add = function() { $scope.columns.push({ field: 'company', enableSorting: false }); $scope.$watch('columns', function(newVal, oldVal){ console.log('added'); }, true); }

and I noticed that you have a mini script before the document document, which should not be there.

+2
source

As I can see from your sample code, you got up to example 113 tutorial on ui-grid.

If you read a little later, you would find this:

Example 303 - Setting a column menu

http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu

As you can see, you can add items to the column menu by defining it in the columns.

 columnDefs: [ { field: 'name', enableColumnMenu: false }, { field: 'company', menuItems: [ { title: 'Outer Scope Alert', icon: 'ui-grid-icon-info-circled', action: function($event) { $scope.doWhateverYouLike(); } } ]
+1
source

Source: https://habr.com/ru/post/1206856/

More articles:


All Articles