<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body ng-controller="MainCtrl">
<h2>Example 1: Works with popover="string content"</h2>
<div class="well">
<div id="grid1" ui-grid="gridOptionsPopover" class="grid"></div>
</div>
<h2>Example 2: Does not work with popover-template="template name"</h2>
<div class="well">
<div id="grid1" ui-grid="gridOptionsPopoverTemplate" class="grid"></div>
</div>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js"></script>
</body>
</html>
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptionsPopover = {
columnDefs: [
{ name: 'name', width:128},
{ name: 'balance', width:128},
{ name: 'city', width:128},
{ name: 'roles', width:128, field: 'roles', cellTemplate: 'iq_cellTemplate_1.html', cellClass: 'cellPopover'}
]
};
$scope.gridOptionsPopoverTemplate = {
columnDefs: [
{ name: 'name', width:128},
{ name: 'balance', width:128},
{ name: 'city', width:128},
{ name: 'roles', width:128, field: 'roles', cellTemplate: 'iq_cellTemplate_2.html', cellClass: 'cellPopover', headerCellTemplate: 'iq_headerCellTemplate.html'}
]
};
$scope.gridPopoverURL = 'iq_popoverTemplate.html'
$http.get('data.json')
.success(function (data) {
$scope.gridOptionsPopover.data = data;
$scope.gridOptionsPopoverTemplate.data = data;
});
}]);
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
body {
padding: 5px;
}
.grid {
width: 600px;
height: 250px;
}
.iq-popover {
z-index:9;
}
.cellPopover {
overflow: visible;
}
[
{
"name": "Bishop",
"email": "bishopwilkerson@netility.com",
"balance": 95.26,
"city": "Freeburn",
"state": "Texas",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Trevino",
"email": "trevinowilkerson@netility.com",
"balance": 353.84,
"city": "Nicut",
"state": "Pennsylvania",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Kerry",
"email": "kerrywilkerson@netility.com",
"balance": 630.97,
"city": "Frystown",
"state": "Indiana",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Gretchen",
"email": "gretchenwilkerson@netility.com",
"balance": 671.64,
"city": "Rodman",
"state": "District Of Columbia",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Reilly",
"email": "reillywilkerson@netility.com",
"balance": 710.15,
"city": "Summerset",
"state": "Minnesota",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Osborn",
"email": "osbornwilkerson@netility.com",
"balance": 423.11,
"city": "Brewster",
"state": "Montana",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Sheryl",
"email": "sherylwilkerson@netility.com",
"balance": 591.39,
"city": "Saddlebrooke",
"state": "Oklahoma",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Nguyen",
"email": "nguyenwilkerson@netility.com",
"balance": 884.9,
"city": "Delco",
"state": "Tennessee",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Berry",
"email": "berrywilkerson@netility.com",
"balance": 772.21,
"city": "Fontanelle",
"state": "Ohio",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Webb",
"email": "webbwilkerson@netility.com",
"balance": 743.96,
"city": "Catharine",
"state": "Massachusetts",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Vasquez",
"email": "vasquezwilkerson@netility.com",
"balance": 150.21,
"city": "Gallina",
"state": "Utah",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Mildred",
"email": "mildredwilkerson@netility.com",
"balance": 894.48,
"city": "Brutus",
"state": "Nevada",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Kristine",
"email": "kristinewilkerson@netility.com",
"balance": 843.49,
"city": "Bodega",
"state": "Louisiana",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Ilene",
"email": "ilenewilkerson@netility.com",
"balance": 161.47,
"city": "Beason",
"state": "Northern Mariana Islands",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Deana",
"email": "deanawilkerson@netility.com",
"balance": 871.33,
"city": "Loretto",
"state": "Virgin Islands",
"roles": ["role1", "role2", "role3"]
},
{
"name": "James",
"email": "jameswilkerson@netility.com",
"balance": 844.93,
"city": "Tilden",
"state": "Delaware",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Brittany",
"email": "brittanywilkerson@netility.com",
"balance": 626.98,
"city": "Geyserville",
"state": "South Carolina",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Leona",
"email": "leonawilkerson@netility.com",
"balance": 283.11,
"city": "Datil",
"state": "Kentucky",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Pace",
"email": "pacewilkerson@netility.com",
"balance": 649.4,
"city": "Fresno",
"state": "Alaska",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Alexis",
"email": "alexiswilkerson@netility.com",
"balance": 812.77,
"city": "Hannasville",
"state": "Vermont",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Christi",
"email": "christiwilkerson@netility.com",
"balance": 156.4,
"city": "Basye",
"state": "Maryland",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Mejia",
"email": "mejiawilkerson@netility.com",
"balance": 639.48,
"city": "Singer",
"state": "Florida",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Nash",
"email": "nashwilkerson@netility.com",
"balance": 142.35,
"city": "Bergoo",
"state": "New York"
},
{
"name": "Amber",
"email": "amberwilkerson@netility.com",
"balance": 635.42,
"city": "Kaka",
"state": "Wyoming",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Fuentes",
"email": "fuenteswilkerson@netility.com",
"balance": 224.88,
"city": "Finzel",
"state": "New Hampshire",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Dale",
"email": "dalewilkerson@netility.com",
"balance": 468.08,
"city": "Fillmore",
"state": "Marshall Islands",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Yesenia",
"email": "yeseniawilkerson@netility.com",
"balance": 343.73,
"city": "Marshall",
"state": "Nebraska",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Ortiz",
"email": "ortizwilkerson@netility.com",
"balance": 470.11,
"city": "Advance",
"state": "California",
"roles": ["role4", "role5", "role6"]
},
{
"name": "Olsen",
"email": "olsenwilkerson@netility.com",
"balance": 304.92,
"city": "Blairstown",
"state": "Hawaii",
"roles": ["role7", "role8", "role9"]
},
{
"name": "Sybil",
"email": "sybilwilkerson@netility.com",
"balance": 848.55,
"city": "Juarez",
"state": "South Dakota",
"roles": ["role1", "role2", "role3"]
},
{
"name": "Robles",
"email": "robleswilkerson@netility.com",
"balance": 602.39,
"city": "Salunga",
"state": "New Mexico",
"roles": ["role4", "role5", "role6"]
}
]
<div popover="{{grid.getCellValue(row, col)}}"
popover-trigger="mouseenter"
popover-placement="right"
popover-append-to-header="true">{{grid.getCellValue(row, col)[0]}}
</div>
<div popover-template="grid.appScope.gridPopoverURL"
popover-title='Title'
popover-trigger="mouseenter"
popover-placement="right"
popover-append-to-body="true">{{grid.getCellValue(row, col)[0]}}
</div>
<div ng-repeat="role in grid.getCellValue(row, col)">
<p>{{role}}</p>
</div>
<!--
Unminified default headerCellTemplate from UI-Grid source code, modified with popover
The reason to copy from UI-Grid source and unminify is so that other UI-Grid features still work,
should they be needed later.
-->
<div role="columnheader"
ng-class="{ 'sortable': sortable }"
ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}"
popover="{{col.displayName}} Info"
popover-title="{{col.displayName}} Title"
popover-trigger="mouseenter"
popover-placement="bottom"
popover-append-to-body="true">
<div role="button" tabindex="0" class="ui-grid-cell-contents ui-grid-header-cell-primary-focus" col-index="renderIndex" title="TOOLTIP"><span class="ui-grid-header-cell-label" ui-grid-one-bind-id-grid="col.uid + '-header-text'">{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'" ui-grid-visible="col.sort.direction" aria-label="{{getSortDirectionAriaLabel()}}"><i ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }" title="{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + ( col.sort.priority + 1 ) : null}}" aria-hidden="true"></i> <sub ui-grid-visible="isSortPriorityVisible()" class="ui-grid-sort-priority-number">{{col.sort.priority + 1}}</sub></span></div>
<div role="button" tabindex="0" ui-grid-one-bind-id-grid="col.uid + '-menu-button'" class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}" ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel" aria-haspopup="true"><i class="ui-grid-icon-angle-down" aria-hidden="true"> </i></div>
<div ui-grid-filter></div>
</div>