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>
Related
I have used angularjs ui-grid in my project.
Below is my code
<link href="#Url.Content("~/Content/js-image-slider.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/js-image-slider.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/ui-grid.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/gemscustomstyle.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/js-image-slider.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.blockUI.js")"></script>
<script src="#Url.Content("~/Scripts/AngularGrid/angularjs.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/AngularGrid/angular-ng-route.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/AngularGrid/ui-grid.min.js")" type="text/javascript"></script>
<div ng-app = "myapp" ng-controller="CitywiseReportController">
<div id="grid1" ui-grid="gridoptions" ui-grid-grouping ui-grid-resize-columns class="myGrid" style="width: 98%"></div>
</div>
<script type="text/javascript">
var app = angular.module('myapp', ['ui.grid']);
app.controller('CitywiseReportController', function ($scope, CitywiseReportService) {
$scope.configureHeadCountGrid = function () {
$scope.gridoptions = {
data:'cityReportData',
enableGridMenu: true,
enableFiltering: true,
enableColumnResizing: true
}
//The grid options
$scope.gridoptions.columnDefs = [
{ name: 'Duty Travel ID', field: 'DutyTravelId', width: '90' },
{ name: 'Staff ID', field: 'StaffNumber', width: '90' },
{ name: 'Staff Name', field:'StaffName', width: '120' },
{ name: 'DT Cost Center', field: 'CostCenter', width: '120' },
{ name: 'DT Travel Category', field: 'TravelCategory', width: '120' },
{ name: 'City Code', field: 'CityCode', width: '60' },
{ name: 'City Name', field: 'CityName', width: '100' },
{ name: 'Departure Date', field: 'DepartureDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' },
{ name: 'Arrival Date', field: 'ArrivalDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' }
];
}
getStudents();
function getStudents() {
CitywiseReportService.getStudents()
.success(function (studs) {
$scope.cityReportData = studs;
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
});
}
$scope.configureHeadCountGrid();
});
app.factory('CitywiseReportService', ['$http', function ($http) {
var CitywiseReportService = {};
CitywiseReportService.getStudents = function () {
return $http.get('/DutyTravel/GetCityWiseDTReport');
};
return CitywiseReportService;
} ]);
</script>
but when grid displays grid filter icon image showing as chinese font.
and in chrome console it is showing
http://localhost:58206/Content/ui-grid.woff
http://localhost:58206/Content/ui-grid.ttf
Need help
You need to add mimeType settings inside your web.config
<system.webServer>
<staticContent>
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
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 ui-grid for testing purpose. I added a checkbox on each row and a select on header.
HTML
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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="http://ui-grid.info/release/ui-grid.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>
JS
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{
name: 'Items',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{value: '0', label: 'Unselect'},
{value: '1', label: 'Selected'}
]
},
cellTemplate: '<input type="checkbox" name="select_item"/>'
},
{
name: 'Name',
field: 'name'
},
{
name: 'Age',
field: 'age'
}
]
};
$scope.gridOptions.data = [
{ name: 'User 1', age: 20},
{ name: 'User 2', age: 30},
{ name: 'User 3', age: 40}
];
}]);
And this is the result
So how can I filter items by checked/uncheck checkbox? I only want to see all checked or unchecked items using filter.
I added the attribute selected to your data in order to be able to filter using the checkbox. You can delete it if you want to send data to the server.
modifications:
template:
`cellTemplate: '<input type="checkbox" name="select_item" value="true" ng-model="row.entity.selected"/>`'
data:
$scope.gridOptions.data = [
{ name: 'User 1', age: 20,selected:false},
{ name: 'User 2', age: 30,selected:false},
{ name: 'User 3', age: 40,selected:false}
];
here is a plunnker: pluncker
But,I recommand to use the selector of the ui-grid: tutorial of ui-grid selector
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.
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();
}
}
]