This is my code
<!DOCTYPE html>
<html class="no-js" ng-app="test"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title></title>
<meta content="width=device-width" name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script>
<style>
body {
padding: 60px;
min-height: 600px;
}
.grid {
width: 900px;
height: 400px;
}
.placeholder {
height: 50%;
width: 50%;
border: 3px solid black;
background: #ccc;
}
</style>
</head>
<body ng-controller="Main">
<h2>Grid</h2>
<button ng-click="export()">Export to Csv</button>
<button ng-click="exportPdf()">Export to Pdf</button>
<div class="custom-csv-link-location">
<br />
<span class="ui-grid-exporter-csv-link"> </span>
</div>
<br />
<div>
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-resize-columns ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div>
</div>
<button ng-click="print()">Print</button>
<!-- <div class="placeholder"> -->
<!-- </div> -->
<br>
<br>
<script>
var app = angular.module('test', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns']);
app.controller('Main', function ($scope, $http, $filter, uiGridConstants) {
$scope.filteredData = [];
$scope.gridOptions = {};
$scope.gridOptions = {
paginationPageSizes: [10, 15, 20],
paginationPageSize: 10,
columnDefs: [
{ name: 'id', enableColumnMenu: false },
{ name: 'name', pinnedLeft: true, enableColumnMenu: false },
{ name: 'age', pinnedRight: true, enableColumnMenu: false },
{ name: 'company', enableColumnMenu: false },
{ name: 'email', enableColumnMenu: false },
{ name: 'phone', enableColumnMenu: false },
//{ name: 'about', width: 200, enableColumnMenu: false }
],
exporterPdfDefaultStyle: { fontSize: 9 },
exporterPdfTableStyle: { margin: [10, 10, 10] },
exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'A3',
//exporterPdfMaxGridWidth: 1000,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
$scope.export = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport('all', 'all', myElement);
};
$scope.exportPdf = function () {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.pdfExport('all', 'all', myElement);
};
});
</script>
</body>
</html>
In the above code i have 500 rows data to display with paging , but when user click print button printing total grid data by using angularjs. so please could somebody help me to resolve this,because i am new to this technology
Hint 1:
If you refer in how to print with ui-grid, the ui-grid website indicates help at Exporting Data, where you can export your data from the grid menu.
Hint 2
If you want to manage exporting to Pdf in a custom menu item, you have to define something like this:
$scope.gridOptions = {
gridMenuCustomItems = [
{
title: 'Exporting as PDF',
action: function ($event) {
var exportColumnHeaders = uiGridExporterService.getColumnHeaders(this.grid, uiGridExporterConstants.ALL);
var exportData = uiGridExporterService.getData(this.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
var docDefinition = uiGridExporterService.prepareAsPdf(this.grid, exportColumnHeaders, exportData);
if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
uiGridExporterService.downloadPDF(this.grid.options.exporterPdfFilename, docDefinition);
} else {
pdfMake.createPdf(docDefinition).download();
}
},
order: 2
}
}
Note: You have to include reference to this at your angular controller: uiGridExporterService, uiGridExporterConstants
Hint 3
If you have any trouble printing more than 500 rows, there is a bug in the pdfmake.js library that is used by the ui-grid component. For this, you have a workaround at github. You have extra info at this github issue.
Related
I want to make the data inside one of the cell in ui-grid as clickable.
Here is my code:-
InventoryList.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.gridStyle {
border: 5px solid #d4d4d4;
height: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/AngularControllers/InventoryListController.js"></script>
</head>
<body ng-app="appHome">
<div ng-controller="ctrlInvList">
<div class="gridStyle" ui-grid="gridInvList">
</div>
</div>
</body>
</html>
InventoryListController.js
var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {
$scope.gridInvList = {
data: 'invlistdata',
enableFiltering: true,
paginationPageSize: 10,
columnDefs: [
{
field: 'SiteInventoryNumber', displayName: 'Inventory Number',
},
{ field: 'InventoryTypeName', displayName: 'Inventory Type' },
{ field: 'MakeModel', displayName: 'Make Model' },
{ field: 'CityName', displayName: 'City Name' },
{ field: 'Specification', displayName: 'Specification' },
]
}
}]);
If I go by this code then the grid looks like below:-
But when I want to make "Inventory Number" Column as Clickable then I introduce following code as searched from internet. Please look at the cellTemplate portion
InventoryListController.js
var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {
$scope.gridInvList = {
data: 'invlistdata',
enableFiltering: true,
paginationPageSize: 10,
columnDefs: [
{
field: 'SiteInventoryNumber', displayName: 'Inventory Number',
cellTemplate: '<div ng-click="grid.appScope.foo()" ></div>'
},
{ field: 'InventoryTypeName', displayName: 'Inventory Type' },
{ field: 'MakeModel', displayName: 'Make Model' },
{ field: 'CityName', displayName: 'City Name' },
{ field: 'Specification', displayName: 'Specification' },
]
}
$scope.foo = function ()
{
alert("Hello");
}
}]);
This output the following result:-
Can you please let me know as what needs to be rectified in order to get the correct results?
Add ui-grid-cell-contents class to your cell template and your function will trigger. It's probably required by one of the ui-grid directives.
Use {{COL_FIELD}} to display the cell contents.
The default cell template looks like this:
<div class="ui-grid-cell-contents">{{COL_FIELD}}</div>
var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
myApp.controller("ctrlInvList", ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.gridInvList = {
data: [
{
SiteInventoryNumber: "INV100001231",
InventoryTypeName: "test"
}
],
enableFiltering: true,
paginationPageSize: 10,
columnDefs: [{
field: 'SiteInventoryNumber',
displayName: 'Inventory Number',
cellTemplate: '<div ng-click="grid.appScope.foo()" class="ui-grid-cell-contents">{{COL_FIELD}}</div>'
},
{
field: 'InventoryTypeName',
displayName: 'Inventory Type'
},
{
field: 'MakeModel',
displayName: 'Make Model'
},
{
field: 'CityName',
displayName: 'City Name'
},
{
field: 'Specification',
displayName: 'Specification'
},
]
}
$scope.foo = function() {
alert("Hello");
}
}]);
.gridStyle {
border: 5px solid #d4d4d4;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="appHome">
<div ng-controller="ctrlInvList">
<div class="gridStyle" ui-grid="gridInvList"></div>
</div>
</div>
I am using ui-grid in angular, I want to have a "click me" button that when clicked, alerts or logs the contents of the specific row data or index that is associated. How do I get to that? Right now I can trigger an alert box, but not get the actual contents of the row (or even for example, a specific key).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Show No Records Found in UI Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.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">
<script type="text/javascript">
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http) {
$scope.gridOptions = {
data: 'sampledata',
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company' },
{ field: 'click', cellTemplate: '<button class="btn primary" ng-click="grid.appScope.sampledetails()">Click Me</button>' }
]
};
$scope.sampledata = { "data": [] };
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.sampledata = data;
});
$scope.sampledetails = function () {
alert('Hi Click is working');
return false;
};
});
</script>
<style type="text/css">
.grid {
width: 500px;
height: 400px;
}
.nodatatxt {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>
<form id="form1">
<div ng-app="sampleapp" ng-controller="appcontroller">
<br /><br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="sampledata.data.length==0">No Records Found</div>
</div>
</div>
</form>
</body>
</html>
At first, your code is unreadable. Use embedded code snippets, jsfiddle, codepen or plunkr
Secondly, if you will take a look at template of your ui-grid, you will see that it just uses ng-repeat. Something like this:
ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"
So you can override cell template:
var actionCellTemplate = '<div class="ui-grid-cell-contents"' +
'ng-model="row.entity.username"' +
'ng-click="clickMe(row)">....</div>'
$scope.gridOptions = {
columnDefs: [
....
{
name: 'action',
cellTemplate: actionCellTemplate
}
]
};
This is my code
var app = angular.module('app', ['ui.grid']);
app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) {
var myDummyData = [{name: "Moroni",address:"one", age: 50},
{name: "Tiancum",address:"vij", age: 43},
{name: "Jacob",address:"dfr", age: 27},
{name: "Nephi",address:"mnc", age: 29},
{name: "Enos",address:"trr", age: 34}];
$scope.filterOptions = {
filterText: ''
};
$scope.gridOpts = {
data: myDummyData,
// enableFiltering: true,
columnDefs: [
{name: 'Name', field: 'name', enableFiltering: true},
{name: 'Address', field: 'address', enableFiltering: true}
]
};
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData, $scope.searchText, undefined);
};
}]);
/* Styles go here */
.cart-item.ng-enter {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
background-color: yellow;
}
.cart-item.ng-enter-active {
background-color: white;
}
.myGrid {
width: 1200px;
height: 800px;
}
<!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/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 data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/>
<script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"></script>
</head>
<body ng-controller="TableCrtl">
<div>
<br>
<br>
<input type="text" class="form-control" ng-change="refreshData()" placeholder="Produkt Name" ng-model="searchText">
<br>
<div range-slider min="0" max="100" model-min="15" model-max="35"></div>
<br>
<div id="grid1" ui-grid="gridOpts" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>
This is my plunker :- http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview
In the above code i have 3 columns data , but i want to display two columns in ui-grid. when i search text entire data filterd,but i want to filter display data like (name and address only) in ui-grid.i tried the following code
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('filter')(myDummyData.name, $scope.searchText, undefined);
};
May be this is what you are looking for.
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var today = new Date();
$scope.gridOptions = {
enableFiltering: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
},
columnDefs: [
{ field: 'name' },
{ field: 'address' }
]
};
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[ 'name', 'address'].forEach(function( field ){
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}])
});
The code is copied from this link. The
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
}
and "$scope.singleFilter" is the main thing you need to look.
Instead of using the default filter, define a custom filter which filters based on the name and address only. Here is the basic logic.
Filter:
app.filter('customfilter', function () {
//Your logic to filter based on name and address
});
Controller:
Inject filter in the controller and use it.
$scope.refreshData = function() {
$scope.gridOpts.data = $filter('customfilter')(arguments for filter);
};
I am using ag-grid plugin in a project. I get json data using $http service. But the grid shows blank in web page. But when json data is applied directly, grid works. I think this is probably due to delay in getting the data from $http. But as per angular concept, the grid should be updated when data comes. Is there any solution to show the html page only when data comes from the server.
Below is my javascript file 'fileBrowser.js':
var fileBrowserModule = angular.module('fileBrowser', ['agGrid']);
fileBrowserModule.controller('fileBrowserController', function($scope, $http) {
$scope.rowData=[
];
$http.get("http://localhost:8080/KKR/flow/sin/allSins.json")
.success(function(data) {
$scope.rowData=JSON.parse("["+JSON.stringify(data)+"]");
console.log($scope.rowData);
});
/*
$scope.rowData=[
{"group":true,"data":{"name":"joe"},
"children":[
{"group":true,"data":{"name":"pat"},
"children":[{"group":true,
"data":{"name":"maya"},
"children":[{"group":false,
"data":{"name":"brook"},
"children":[]},{"group":true,
"data":{"name":"kery"},
"children":[{"group":false,
"data":{"name":"santosh"},
"children":[]}]}]}]},
{"group":false,
"data":{"name":"aravind"},"children":[]}]}
]
*/
var columnDefs = [
{headerName: "Name", field: "name", width: 250,
cellRenderer: {
renderer: 'group',
innerRenderer: innerCellRenderer
}},
{headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle},
{headerName: "Type", field: "type", width: 150},
{headerName: "Date Modified", field: "dateModified", width: 150}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: $scope.rowData,
rowSelection: 'multiple',
rowsAlreadyGrouped: true,
enableColResize: true,
enableSorting: true,
rowHeight: 20,
icons: {
groupExpanded: '<i class="fa fa-minus-square-o"/>',
groupContracted: '<i class="fa fa-plus-square-o"/>'
},
onRowClicked: rowClicked
};
$scope.selectedFile = 'Select a file below...';
function rowClicked(params) {
var node = params.node;
var path = node.data.name;
while (node.parent) {
node = node.parent;
path = node.data.name + '\\' + path;
}
$scope.selectedFile = path;
}
function sizeCellStyle() {
return {'text-align': 'right'};
}
function innerCellRenderer(params) {
var image;
if (params.node.group) {
image = params.node.level === 0 ? 'disk' : 'folder';
} else {
image = 'file';
}
var imageFullUrl = '/example-file-browser/' + image + '.png';
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name;
}
});
Below is my html file:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/angular/fileBrowser.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-->
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="scripts/angular/ag-grid.js?ignore=notused10"></script>
<link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10">
<link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10">
<script src="scripts/angular/fileBrowser.js"></script>
</head>
<body ng-app="fileBrowser">
<div ng-controller="fileBrowserController"
style="border: 1px solid darkgrey;
width: 600px;
background-color: lightgrey;
border-radius: 5px;
padding: 3px;">
<div style="border: 1px solid darkgrey; margin-bottom: 2px; background-color: white;"> {{selectedFile}}</div>
<div style="width: 100%; height: 400px;"
ag-grid="gridOptions"
class="ag-file-browser">
</div>
</div>
</body>
</html>
Use the ag-Grid API for setting the row data.
Look at this example "Further Example Starting Point" to see.
Code is
$scope.gridOptions.api.setRows(res.data);
I have modified previous answer. Instead of setRows we can use setRowData. This works for me:
$scope.gridOptions.api.setRowData(res.data);
Hello all fellow programmers,
my requirement is to add a column in a grid at runtime or dynamically using ui-grid. I am able to achieve the same using a button, but what I want is to override the predefined functionality of the icon which in on the header of grid used for sorting and some predefined tasks(), I want 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>
of adding a column there
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 minified script before the doctype of document which should not have to be there.
As I can see from your code example, you got until example 113 of the ui-grid Tutorial.
If you have read a little bit further you would have found this:
Example 303 - Customizing column menu
http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu
As you can see there, you can add items to the columns menu by defining it in the columnDefs.
columnDefs: [
{ field: 'name', enableColumnMenu: false },
{
field: 'company',
menuItems: [
{
title: 'Outer Scope Alert',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
$scope.doWhateverYouLike();
}
}
]