4 This sits above the grid and contains the column picker, etc.
7 <div class="eg-grid-row eg-grid-action-row">
9 <div class="eg-grid-primary-label">{{mainLabel}}</div>
11 <div class="btn-group"
12 is-open="gridMenuIsOpen" ng-if="menuLabel" dropdown>
13 <button type="button" class="btn btn-default dropdown-toggle eg-grid-menui-item">
14 {{menuLabel}}<span class="caret"></span>
16 <ul class="dropdown-menu">
17 <li ng-repeat="item in menuItems | filter : { standalone : 'false' }" ng-class="{divider: item.divider}">
18 <a ng-if="!item.divider" href ng-disabled="item.disabled"
19 ng-click="item.handler()">{{item.label}}</a>
22 <button ng-if="!item.hidden()"
23 class="btn btn-default eg-grid-menui-item"
24 ng-disabled="item.disabled()"
25 ng-repeat="item in menuItems | filter : { standalone : 'true' }"
26 ng-click="item.handler()">{{item.label}}</button>
29 <!-- if no menu label is present, present menu-items as a
30 horizontal row of buttons -->
31 <div class="btn-group" ng-if="!menuLabel">
32 <button ng-if="!item.hidden()"
33 class="btn btn-default eg-grid-menu-item"
34 ng-disabled="item.disabled()"
35 ng-repeat="item in menuItems"
36 ng-click="item.handler(item, item.handlerData)">
41 <!-- putting a flex div here forces the remaining content to float right -->
42 <div class="flex-cell"></div>
44 <!-- column picker, pager, etc. -->
45 <div class="btn-group column-picker">
48 <button type="button" class="btn btn-default"
49 ng-class="{disabled : onFirstPage()}"
50 ng-click="offset(0);collect()"
51 title="[% l('Start') %]">
52 <span class="glyphicon glyphicon-fast-backward"></span>
55 <!-- previous page -->
56 <button type="button" class="btn btn-default"
57 ng-class="{disabled : onFirstPage()}"
58 ng-click="decrementPage()"
59 title="[% l('Previous Page') %]">
60 <span class="glyphicon glyphicon-backward"></span>
64 <!-- todo: paging needs a total count value to be fully functional -->
65 <button type="button" class="btn btn-default"
66 ng-class="{disabled : !hasNextPage()}"
67 ng-click="incrementPage()"
68 title="[% l('Next Page') %]">
69 <span class="glyphicon glyphicon-forward"></span>
72 <!-- actions drop-down menu -->
73 <div class="btn-group" ng-if="actionGroups.length > 1 || actionGroups[0].actions.length" dropdown>
74 <button type="button" class="btn btn-default dropdown-toggle">
75 [% l('Actions') %] <span class="caret"></span>
77 <ul class="dropdown-menu pull-right grid-action-dropdown">
78 <li ng-repeat-start="group in actionGroups">
79 <span style="padding-left: 1em;" ng-if="group.label"><strong><u>{{group.label}}</u></strong></span>
81 <li ng-repeat="action in group.actions" ng-class="{divider: action.divider}" ng-hide="actionHide(action)">
82 <a ng-if="!action.divider" href
83 ng-click="actionLauncher(action)">{{action.label}}</a>
89 <div class="btn-group" dropdown is-open="gridRowCountIsOpen">
90 <button type="button" title="[% ('Select Row Count') %]"
91 class="btn btn-default dropdown-toggle">
92 [% l('Rows [_1]', '{{limit()}}') %]
93 <span class="caret"></span>
95 <ul class="dropdown-menu">
96 <li ng-repeat="t in [5,10,25,50,100]">
97 <a href ng-click='offset(0);limit(t);collect()'>
104 <div class="btn-group" dropdown is-open="gridPageSelectIsOpen">
105 <button type="button" title="[% ('Select Page') %]"
106 class="btn btn-default dropdown-toggle">
107 [% l('Page [_1]', '{{page()}}') %]
108 <span class="caret"></span>
110 <ul class="dropdown-menu">
112 <div class="input-group">
113 <input type="text" class="form-control"
114 ng-model="pageFromUI"
115 ng-click="$event.stopPropagation()"/>
116 <span class="input-group-btn">
117 <button class="btn btn-default" type="button"
118 ng-click="goToPage(pageFromUI);pageFromUI='';">
124 <li role="presentation" class="divider"></li>
125 <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
126 <a href ng-click='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
131 <div class="btn-group" dropdown is-open="gridColumnPickerIsOpen">
132 <button type="button"
133 class="btn btn-default dropdown-toggle">
134 <span class="caret"></span>
136 <ul class="dropdown-menu pull-right eg-grid-column-picker">
137 <li><a href ng-click="toggleConfDisplay()">
138 <span class="glyphicon glyphicon-wrench"></span>
139 [% l('Configure Columns') %]
141 <li><a href ng-click="saveConfig()">
142 <span class="glyphicon glyphicon-floppy-save"></span>
143 [% l('Save Columns') %]
146 <li><a href ng-click="showAllColumns()">
147 <span class="glyphicon glyphicon-resize-full"></span>
148 [% l('Show All Columns') %]
150 <li><a href ng-click="hideAllColumns()">
151 <span class="glyphicon glyphicon-resize-small"></span>
152 [% l('Hide All Columns') %]
155 <li><a href ng-click="resetColumns()">
156 <span class="glyphicon glyphicon-refresh"></span>
157 [% l('Reset Columns') %]
159 <li><a ng-click="generateCSVExportURL()"
160 download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
161 <span class="glyphicon glyphicon-download"></span>
162 [% l('Download CSV') %]
164 <li><a href ng-click="printCSV()">
165 <span class="glyphicon glyphicon-print"></span>
168 <li role="presentation" class="divider"></li>
169 <li ng-repeat="col in columns">
170 <a href title="{{col.idlclass}}" ng-click="toggleColumnVisibility(col)">
171 <span ng-if="col.visible"
172 class="label label-success">✓</span>
173 <span ng-if="!col.visible"
174 class="label label-warning">✗</span>
175 <span>{{col.label}}</span>
184 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
186 <!-- import our eg-grid-field defs -->
187 <div ng-transclude></div>
189 <div class="eg-grid-row eg-grid-header-row">
190 <div class="eg-grid-cell eg-grid-cell-stock">
191 <div title="[% l('Row Number Column') %]">[% l('#') %]</div>
193 <div class="eg-grid-cell eg-grid-cell-stock">
195 <input title="[% l('Row Selector Column') %]"
196 focus-me="gridControls.focusRowSelector"
197 type='checkbox' ng-model="selectAll"/>
200 <div class="eg-grid-cell"
201 eg-grid-column-drag-dest
202 column="{{col.name}}"
203 eg-right-click="onContextMenu($event)"
204 ng-repeat="col in columns"
205 style="flex:{{col.flex}}"
206 ng-show="col.visible">
208 <div style="display:flex">
209 <div style="flex:1" class="eg-grid-column-move-handle">
210 <div ng-if="col.sortable">
211 <a column="{{col.name}}" href
212 eg-grid-column-drag-source
213 ng-click="quickSort(col.name)">{{col.label}}</a>
215 <div ng-if="!col.sortable">
216 <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
219 <div eg-grid-column-drag-source
220 drag-type="resize" column="{{col.name}}"
221 class="eg-grid-column-resize-handle"> </div>
226 <!-- Inline grid configuration row -->
227 <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
228 <div class="eg-grid-cell eg-grid-cell-conf-header">
229 <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
230 <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
231 <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
233 <div class="eg-grid-cell"
234 ng-repeat="col in columns"
235 style="flex:{{col.flex}}"
236 ng-show="col.visible">
237 <div class="eg-grid-conf-cell-entry">
238 <a href="" title="[% l('Make column wider') %]"
239 ng-click="modifyColumnFlex(col,1)">
240 <span class="glyphicon glyphicon-fast-forward"></span>
243 <div class="eg-grid-conf-cell-entry">
244 <a href="" title="[% l('Make column narrower') %]"
245 ng-click="modifyColumnFlex(col,-1)">
246 <span class="glyphicon glyphicon-fast-backward"></span>
249 <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
250 <div ng-if="col.multisortable">
251 <input type='number' ng-model="col.sort"
252 title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
258 <div class="eg-grid-content-body">
259 <div ng-show="items.length == 0"
260 class="alert alert-info">[% l('No Items To Display') %]</div>
262 <div class="eg-grid-row"
263 id="eg-grid-row-{{$index + 1}}"
264 ng-repeat="item in items"
265 ng-show="items.length > 0"
266 ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
267 <div class="eg-grid-cell eg-grid-cell-stock"
268 ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]">
269 <a href ng-show="gridControls.activateItem"
270 ng-click="gridControls.activateItem(item)" style="font-weight:bold">
271 {{$index + offset() + 1}}
273 <div ng-hide="gridControls.activateItem">{{$index + offset() + 1}}</div>
275 <div class="eg-grid-cell eg-grid-cell-stock">
276 <!-- ng-click=handleRowClick here has unintended
277 consequences and is unnecessary, avoid it -->
279 <input type='checkbox' title="[% l('Select Row') %]"
280 ng-model="selected[indexValue(item)]"/>
283 <div class="eg-grid-cell eg-grid-cell-content"
284 ng-click="handleRowClick($event, item)"
285 ng-dblclick="gridControls.activateItem(item)"
286 ng-repeat="col in columns"
287 style="text-align:{{col.align}}; padding-left:5px; padding-right:5px; flex:{{col.flex}}"
288 ng-show="col.visible">
290 <!-- if the cell comes with its own template,
291 translate that content into HTML and insert it here -->
292 <span ng-if="col.template"
293 ng-bind-html="translateCellTemplate(col, item)">
296 <!-- otherwise, simply display the item value, which may
297 pass through datatype-specific filtering. -->
298 <span ng-if="!col.template">
299 {{itemFieldValue(item, col) | egGridValueFilter:col}}