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" style="margin-top: 4px"
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-if="!item.checkbox && !item.hidden()" 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)">
41 <!-- Always show checkbox items as a
42 horizontal row of buttons -->
43 <div class="btn-group" ng-if="showMenu">
44 <div ng-if="item.checkbox"
45 class="btn btn-default eg-grid-menu-item"
46 ng-repeat="item in menuItems">
47 <label for="{{item.checkbox}}">{{item.label}}</label>
48 <input style="padding-left: 5px"
50 id="{{item.checkbox}}"
51 ng-disabled="item.disabled()"
52 ng-model="item.checked"
53 ng-checked="item.checked"
54 ng-change="item.handler(item)"/>
58 <!-- putting a flex div here forces the remaining content to float right -->
59 <div class="flex-cell"></div>
61 <!-- column picker, pager, etc. -->
62 <div class="btn-group column-picker" ng-show="showPagination || showActions || showPicker">
65 <button type="button" class="btn btn-default"
66 ng-show="showPagination"
67 ng-class="{disabled : onFirstPage()}"
68 ng-click="offset(0);collect()"
69 title="[% l('Start') %]">
70 <span class="glyphicon glyphicon-fast-backward"></span>
73 <!-- previous page -->
74 <button type="button" class="btn btn-default"
75 ng-show="showPagination"
76 ng-class="{disabled : onFirstPage()}"
77 ng-click="decrementPage()"
78 title="[% l('Previous Page') %]">
79 <span class="glyphicon glyphicon-backward"></span>
83 <!-- todo: paging needs a total count value to be fully functional -->
84 <button type="button" class="btn btn-default"
85 ng-show="showPagination"
86 ng-class="{disabled : !hasNextPage()}"
87 ng-disabled="!hasNextPage()"
88 ng-click="incrementPage()"
89 title="[% l('Next Page') %]">
90 <span class="glyphicon glyphicon-forward"></span>
93 <!-- actions drop-down menu -->
94 <div class="btn-group" ng-show="showActions" ng-if="actionGroups.length > 1 || actionGroups[0].actions.length" uib-dropdown>
95 <button type="button" class="btn btn-default" uib-dropdown-toggle
96 ng-disabled="!hasSelected()">
97 [% l('Actions') %] <span class="caret"></span>
99 <ul class="pull-right grid-action-dropdown scrollable-menu" uib-dropdown-menu>
100 <li ng-repeat-start="group in actionGroups">
101 <span style="padding-left: 1em;" ng-if="group.label"><strong><u>{{group.label}}</u></strong></span>
103 <li ng-repeat="action in group.actions" ng-class="{divider: action.divider, disabled: actionDisable(action)}" ng-hide="actionHide(action)">
104 <a ng-if="!action.divider" href
105 ng-click="!actionDisable(action) && actionLauncher(action)">{{action.label}}</a>
107 <span ng-repeat-end/>
111 <div class="btn-group" uib-dropdown is-open="gridRowCountIsOpen" ng-show="showPagination">
112 <button type="button" title="[% l('Select Row Count') %]"
113 class="btn btn-default" uib-dropdown-toggle>
114 [% l('Rows [_1]', '{{limit()}}') %]
115 <span class="caret"></span>
117 <ul uib-dropdown-menu>
118 <li ng-repeat="t in [5,10,25,50,100]">
119 <a href ng-click='offset(0);limit(t);collect()'>
123 <li ng-if="allowAll" ng-repeat="t in [500,1000]">
124 <a href ng-click='offset(0);limit(t);collect()'>
128 <li ng-if="allowAll" >
129 <a href ng-click='confirmAllowAllAndCollect();'>[% l('All') %]</a>
134 <div class="btn-group" uib-dropdown is-open="gridPageSelectIsOpen" ng-show="showPagination">
135 <button type="button" title="[% l('Select Page') %]"
136 class="btn btn-default" uib-dropdown-toggle>
137 [% l('Page [_1]', '{{page()}}') %]
138 <span class="caret"></span>
140 <ul uib-dropdown-menu>
142 <div class="input-group">
143 <input type="text" class="form-control"
144 ng-model="pageFromUI"
145 ng-click="$event.stopPropagation()"/>
146 <span class="input-group-btn">
147 <button class="btn btn-default" type="button"
148 ng-click="goToPage(pageFromUI);pageFromUI='';">
154 <li role="presentation" class="divider"></li>
155 <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
156 <a href ng-click='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
161 <div class="btn-group" uib-dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
162 <button type="button"
163 class="btn btn-default" uib-dropdown-toggle>
164 <span class="caret"></span>
166 <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>
168 <a href ng-click="showColumnDialog()">
169 <span class="glyphicon glyphicon-wrench"></span>
170 [% l('Manage Columns') %]
173 <li><a href ng-click="toggleConfDisplay()">
174 <span class="glyphicon glyphicon-resize-horizontal"></span>
175 [% l('Manage Column Widths') %]
177 <li><a href ng-click="saveConfig()">
178 <span class="glyphicon glyphicon-floppy-save"></span>
179 [% l('Save Columns') %]
182 <li><a href ng-click="showAllColumns()">
183 <span class="glyphicon glyphicon-resize-full"></span>
184 [% l('Show All Columns') %]
186 <li><a href ng-click="hideAllColumns()">
187 <span class="glyphicon glyphicon-resize-small"></span>
188 [% l('Hide All Columns') %]
191 <li><a href ng-click="resetColumns()">
192 <span class="glyphicon glyphicon-refresh"></span>
193 [% l('Reset Columns') %]
195 <li><a ng-click="generateCSVExportURL($event)"
196 download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
197 <span class="glyphicon glyphicon-download"></span>
198 [% l('Download Full CSV') %]
200 <li><a href ng-click="printHTML()">
201 <span class="glyphicon glyphicon-print"></span>
202 [% l('Print Full Grid') %]
204 <li role="presentation" class="divider"></li>
205 <li ng-repeat="col in columns">
206 <a href title="{{col.idlclass}}" ng-click="toggleColumnVisibility(col)">
207 <span ng-if="col.visible"
208 class="label label-success">✓</span>
209 <span ng-if="!col.visible"
210 class="label label-warning">✗</span>
211 <span>{{col.label}}</span>
220 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
222 <!-- import our eg-grid-field defs -->
223 <div style="display: none;" ng-transclude></div>
225 <div class="eg-grid-row eg-grid-header-row">
226 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex">
227 <div title="[% l('Row Number Column') %]">[% l('#') %]</div>
229 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
231 <input aria-label="[% l('All rows') %]"
232 focus-me="gridControls.focusRowSelector"
233 type='checkbox' ng-model="selectAll"/>
236 <div class="eg-grid-cell eg-grid-cell-stock-status" ng-show="statusColumn.isEnabled">
237 <div title="[% l('Status Icon Column') %]">[% l('Status') %]</div>
239 <div class="eg-grid-cell"
240 eg-grid-column-drag-dest
241 ng-class="{'eg-grid-column-last-mod' : isLastModifiedColumn(col)}"
242 column="{{col.name}}"
243 eg-right-click="onContextMenu($event)"
244 ng-repeat="col in columns"
245 style="flex:{{col.flex}}"
246 ng-show="col.visible">
248 <div style="display:flex">
249 <div style="flex:1" class="eg-grid-column-move-handle">
250 <div ng-if="col.sortable">
251 <a column="{{col.name}}" href
252 eg-grid-column-drag-source
253 ng-click="quickSort(col.name)">{{col.label}}</a>
255 <div ng-if="!col.sortable">
256 <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
259 <div eg-grid-column-drag-source
260 drag-type="resize" column="{{col.name}}"
261 class="eg-grid-column-resize-handle"> </div>
266 <!-- Inline grid configuration row -->
267 <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
268 <div class="eg-grid-cell"
269 ng-class="statusColumn.isEnabled ? 'eg-grid-cell-conf-header-status' : 'eg-grid-cell-conf-header'">
270 <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
271 <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
273 <div class="eg-grid-cell"
274 ng-repeat="col in columns"
275 style="flex:{{col.flex}}"
276 ng-show="col.visible">
277 <div class="eg-grid-conf-cell-entry">
278 <a href="" title="[% l('Make column wider') %]"
279 ng-click="modifyColumnFlex(col,1)">
280 <span class="glyphicon glyphicon-resize-full"></span>
283 <div class="eg-grid-conf-cell-entry">
284 <a href="" title="[% l('Make column narrower') %]"
285 ng-click="modifyColumnFlex(col,-1)">
286 <span class="glyphicon glyphicon-resize-small"></span>
292 <div class="eg-grid-content-body">
293 <div ng-show="items.length == 0"
294 class="alert alert-info">[% l('No Items To Display') %]</div>
296 <div class="eg-grid-row"
297 id="eg-grid-row-{{$index + 1}}"
298 ng-repeat="item in items"
299 ng-show="items.length > 0"
300 ng-class="[{'eg-grid-row-selected' : selected[indexValue(item)]}, rowClass.apply(item)]">
301 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex"
302 ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]">
303 <a href ng-show="gridControls.activateItem"
304 ng-click="gridControls.activateItem(item)" style="font-weight:bold">
305 {{$index + offset() + 1}}
307 <div ng-hide="gridControls.activateItem">{{$index + offset() + 1}}</div>
309 <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
310 <!-- ng-click=handleRowClick here has unintended
311 consequences and is unnecessary, avoid it -->
313 <input type='checkbox' aria-label="[% l('Row [_1]','{{$index + offset() + 1}}') %]"
314 ng-change="updateSelected()"
315 ng-model="selected[indexValue(item)]"/>
318 <div class="eg-grid-cell eg-grid-cell-stock-status" ng-show="statusColumn.isEnabled">
319 <span ng-bind-html="statusColumn.template(item)"></span>
321 <div class="eg-grid-cell eg-grid-cell-content"
322 ng-click="handleRowClick($event, item)"
323 ng-dblclick="gridControls.activateItem(item)"
324 ng-repeat="col in columns"
325 ng-class="col.cssSelector"
326 style="text-align:{{col.align}}; flex:{{col.flex}}"
329 <!-- if the cell comes with its own template,
330 translate that content into HTML and insert it here -->
331 <span ng-if="col.template && !col.compiled"
332 style="padding-left:5px; padding-right:10px;">
333 <span tooltip-class="eg-grid-tooltip"
334 tooltip-class="eg-grid-tooltip"
335 tooltip-placement="top-left"
336 uib-tooltip-html="getHtmlTooltip(col, item)">
337 <span ng-bind-html="translateCellTemplate(col, item)"></span>
341 <span ng-if="col.template && col.compiled" style="padding-left:5px; padding-right:10px;"
342 compile="col.template">
345 <!-- otherwise, simply display the item value, which may
346 pass through datatype-specific filtering. -->
347 <span ng-if="!col.template"
348 uib-tooltip="{{itemFieldValue(item, col) | egGridValueFilter:col:item}}"
349 tooltip-placement="top-left"
350 tooltip-class="eg-grid-tooltip"
351 style="padding-left:5px; padding-right:10px;">
352 {{itemFieldValue(item, col) | egGridValueFilter:col:item}}