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 && showMenu" uib-dropdown>
13 <button type="button" class="btn btn-default eg-grid-menu-item" uib-dropdown-toggle>
14 {{menuLabel}}<span class="caret"></span>
16 <ul class="scrollable-menu" uib-dropdown-menu>
17 <li ng-repeat="item in menuItems | filter : { standalone : 'false' }" ng-class="{divider: item.divider}">
18 <a ng-if="!item.divider" href a-disabled="item.disabled()"
19 ng-click="item.handler()">{{item.label}}</a>
22 <button ng-if="!item.checkbox && !item.hidden()"
23 class="btn btn-default eg-grid-menu-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 && showMenu">
32 <button ng-if="!item.checkbox && !item.hidden()"
33 class="btn btn-default eg-grid-menu-item"
34 ng-repeat="item in menuItems"
35 ng-disabled="item.disabled()"
36 ng-click="item.handler(item, item.handlerData)">
39 <div ng-if="item.checkbox"
40 class="btn btn-default eg-grid-menu-item"
41 ng-repeat="item in menuItems">
42 <label for="{{item.checkbox}}">{{item.label}}</label>
43 <input style="padding-left: 5px"
45 id="{{item.checkbox}}"
46 ng-disabled="item.disabled()"
47 ng-model="item.checked"
48 ng-checked="item.checked"
49 ng-change="item.handler(item)"/>
53 <!-- putting a flex div here forces the remaining content to float right -->
54 <div class="flex-cell"></div>
56 <!-- column picker, pager, etc. -->
57 <div class="btn-group column-picker" ng-show="showPagination || showActions || showPicker">
60 <button type="button" class="btn btn-default"
61 ng-show="showPagination"
62 ng-class="{disabled : onFirstPage()}"
63 ng-click="offset(0);collect()"
64 title="[% l('Start') %]">
65 <span class="glyphicon glyphicon-fast-backward"></span>
68 <!-- previous page -->
69 <button type="button" class="btn btn-default"
70 ng-show="showPagination"
71 ng-class="{disabled : onFirstPage()}"
72 ng-click="decrementPage()"
73 title="[% l('Previous Page') %]">
74 <span class="glyphicon glyphicon-backward"></span>
78 <!-- todo: paging needs a total count value to be fully functional -->
79 <button type="button" class="btn btn-default"
80 ng-show="showPagination"
81 ng-class="{disabled : !hasNextPage()}"
82 ng-click="incrementPage()"
83 title="[% l('Next Page') %]">
84 <span class="glyphicon glyphicon-forward"></span>
87 <!-- actions drop-down menu -->
88 <div class="btn-group" ng-show="showActions" ng-if="actionGroups.length > 1 || actionGroups[0].actions.length" uib-dropdown>
89 <button type="button" class="btn btn-default" uib-dropdown-toggle
90 ng-disabled="!hasSelected()">
91 [% l('Actions') %] <span class="caret"></span>
93 <ul class="pull-right grid-action-dropdown scrollable-menu" uib-dropdown-menu>
94 <li ng-repeat-start="group in actionGroups">
95 <span style="padding-left: 1em;" ng-if="group.label"><strong><u>{{group.label}}</u></strong></span>
97 <li ng-repeat="action in group.actions" ng-class="{divider: action.divider, disabled: actionDisable(action)}" ng-hide="actionHide(action)">
98 <a ng-if="!action.divider" href
99 ng-click="!actionDisable(action) && actionLauncher(action)">{{action.label}}</a>
101 <span ng-repeat-end/>
105 <div class="btn-group" uib-dropdown is-open="gridRowCountIsOpen" ng-show="showPagination">
106 <button type="button" title="[% l('Select Row Count') %]"
107 class="btn btn-default" uib-dropdown-toggle>
108 [% l('Rows [_1]', '{{limit()}}') %]
109 <span class="caret"></span>
111 <ul uib-dropdown-menu>
112 <li ng-repeat="t in [5,10,25,50,100]">
113 <a href ng-click='offset(0);limit(t);collect()'>
117 <li ng-if="allowAll" >
118 <a href ng-click='offset(0);limit(10000);collect()'>[% l('All') %]</a>
123 <div class="btn-group" uib-dropdown is-open="gridPageSelectIsOpen" ng-show="showPagination">
124 <button type="button" title="[% l('Select Page') %]"
125 class="btn btn-default" uib-dropdown-toggle>
126 [% l('Page [_1]', '{{page()}}') %]
127 <span class="caret"></span>
129 <ul uib-dropdown-menu>
131 <div class="input-group">
132 <input type="text" class="form-control"
133 ng-model="pageFromUI"
134 ng-click="$event.stopPropagation()"/>
135 <span class="input-group-btn">
136 <button class="btn btn-default" type="button"
137 ng-click="goToPage(pageFromUI);pageFromUI='';">
143 <li role="presentation" class="divider"></li>
144 <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
145 <a href ng-click='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
150 <div class="btn-group" uib-dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
151 <button type="button"
152 class="btn btn-default" uib-dropdown-toggle>
153 <span class="caret"></span>
155 <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>
156 <li><a href ng-click="toggleConfDisplay()">
157 <span class="glyphicon glyphicon-wrench"></span>
158 [% l('Configure Columns') %]
160 <li><a href ng-click="saveConfig()">
161 <span class="glyphicon glyphicon-floppy-save"></span>
162 [% l('Save Columns') %]
165 <li><a href ng-click="showAllColumns()">
166 <span class="glyphicon glyphicon-resize-full"></span>
167 [% l('Show All Columns') %]
169 <li><a href ng-click="hideAllColumns()">
170 <span class="glyphicon glyphicon-resize-small"></span>
171 [% l('Hide All Columns') %]
174 <li><a href ng-click="resetColumns()">
175 <span class="glyphicon glyphicon-refresh"></span>
176 [% l('Reset Columns') %]
178 <li><a ng-click="generateCSVExportURL()"
179 download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
180 <span class="glyphicon glyphicon-download"></span>
181 [% l('Download CSV') %]
183 <li><a href ng-click="printCSV()">
184 <span class="glyphicon glyphicon-print"></span>
187 <li role="presentation" class="divider"></li>
188 <li ng-repeat="col in columns">
189 <a href title="{{col.idlclass}}" ng-click="toggleColumnVisibility(col)">
190 <span ng-if="col.visible"
191 class="label label-success">✓</span>
192 <span ng-if="!col.visible"
193 class="label label-warning">✗</span>
194 <span>{{col.label}}</span>
203 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
205 <!-- import our eg-grid-field defs -->
206 <div ng-transclude></div>
208 <div class="eg-grid-row eg-grid-header-row">
209 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex">
210 <div title="[% l('Row Number Column') %]">[% l('#') %]</div>
212 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
214 <input title="[% l('Row Selector Column') %]"
215 focus-me="gridControls.focusRowSelector"
216 type='checkbox' ng-model="selectAll"/>
219 <div class="eg-grid-cell"
220 eg-grid-column-drag-dest
221 ng-class="{'eg-grid-column-last-mod' : lastModColumn==col.name}"
222 column="{{col.name}}"
223 eg-right-click="onContextMenu($event)"
224 ng-repeat="col in columns"
225 style="flex:{{col.flex}}"
226 ng-show="col.visible">
228 <div style="display:flex">
229 <div style="flex:1" class="eg-grid-column-move-handle">
230 <div ng-if="col.sortable">
231 <a column="{{col.name}}" href
232 eg-grid-column-drag-source
233 ng-click="quickSort(col.name)">{{col.label}}</a>
235 <div ng-if="!col.sortable">
236 <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
239 <div eg-grid-column-drag-source
240 drag-type="resize" column="{{col.name}}"
241 class="eg-grid-column-resize-handle"> </div>
246 <!-- Inline grid configuration row -->
247 <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
248 <div class="eg-grid-cell eg-grid-cell-conf-header">
249 <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
250 <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
251 <div class="eg-grid-conf-cell-entry">[% l('Left') %]</div>
252 <div class="eg-grid-conf-cell-entry">[% l('Right') %]</div>
253 <div class="eg-grid-conf-cell-entry">[% l('Far Left') %]</div>
254 <div class="eg-grid-conf-cell-entry">[% l('Far Right') %]</div>
255 <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
257 <div class="eg-grid-cell"
258 ng-repeat="col in columns"
259 style="flex:{{col.flex}}"
260 ng-show="col.visible">
261 <div class="eg-grid-conf-cell-entry">
262 <a href="" title="[% l('Make column wider') %]"
263 ng-click="modifyColumnFlex(col,1)">
264 <span class="glyphicon glyphicon-resize-full"></span>
267 <div class="eg-grid-conf-cell-entry">
268 <a href="" title="[% l('Make column narrower') %]"
269 ng-click="modifyColumnFlex(col,-1)">
270 <span class="glyphicon glyphicon-resize-small"></span>
273 <div class="eg-grid-conf-cell-entry">
274 <a href="" title="[% l('Move column left') %]"
275 ng-click="modifyColumnPos(col, -1)">
276 <span class="glyphicon glyphicon-backward"></span>
279 <div class="eg-grid-conf-cell-entry">
280 <a href="" title="[% l('Move column right') %]"
281 ng-click="modifyColumnPos(col, 1)">
282 <span class="glyphicon glyphicon-forward"></span>
285 <div class="eg-grid-conf-cell-entry">
286 <a href="" title="[% l('Move column far left') %]"
287 ng-click="modifyColumnPos(col, -10000)">
288 <span class="glyphicon glyphicon-fast-backward"></span>
291 <div class="eg-grid-conf-cell-entry">
292 <a href="" title="[% l('Move column far right') %]"
293 ng-click="modifyColumnPos(col, 10000)">
294 <span class="glyphicon glyphicon-fast-forward"></span>
297 <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
298 <div ng-if="col.multisortable">
299 <input type='number' ng-model="col.sort"
300 title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
306 <div class="eg-grid-content-body">
307 <div ng-show="items.length == 0"
308 class="alert alert-info">[% l('No Items To Display') %]</div>
310 <div class="eg-grid-row"
311 id="eg-grid-row-{{$index + 1}}"
312 ng-repeat="item in items"
313 ng-show="items.length > 0"
314 ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
315 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex"
316 ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]">
317 <a href ng-show="gridControls.activateItem"
318 ng-click="gridControls.activateItem(item)" style="font-weight:bold">
319 {{$index + offset() + 1}}
321 <div ng-hide="gridControls.activateItem">{{$index + offset() + 1}}</div>
323 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
324 <!-- ng-click=handleRowClick here has unintended
325 consequences and is unnecessary, avoid it -->
327 <input type='checkbox' title="[% l('Select Row') %]"
328 ng-change="updateSelected()"
329 ng-model="selected[indexValue(item)]"/>
332 <div class="eg-grid-cell eg-grid-cell-content"
333 ng-click="handleRowClick($event, item)"
334 ng-dblclick="gridControls.activateItem(item)"
335 ng-repeat="col in columns"
336 style="text-align:{{col.align}}; flex:{{col.flex}}"
337 ng-show="col.visible">
339 <!-- if the cell comes with its own template,
340 translate that content into HTML and insert it here -->
341 <span ng-if="col.template" style="padding-left:5px; padding-right:10px;"
342 ng-bind-html="translateCellTemplate(col, item)">
345 <!-- otherwise, simply display the item value, which may
346 pass through datatype-specific filtering. -->
347 <span ng-if="!col.template" style="padding-left:5px; padding-right:10px;">
348 {{itemFieldValue(item, col) | egGridValueFilter:col:item}}