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 eg-grid-menuiitem"
12 is-open="gridMenuIsOpen" ng-if="menuLabel" dropdown>
13 <button type="button" class="btn btn-default dropdown-toggle">
14 {{menuLabel}}<span class="caret"></span>
16 <ul class="dropdown-menu">
17 <li ng-repeat="item in menuItems" ng-class="{divider: item.divider}">
18 <a ng-if="!item.divider" href ng-disabled="item.disabled"
19 ng-click="item.handler()">{{item.label}}</a>
24 <!-- if no menu label is present, present menu-items as a
25 horizontal row of buttons -->
26 <div class="btn-group" ng-if="!menuLabel">
27 <button ng-if="!item.hidden()"
28 class="btn btn-default eg-grid-menu-item"
29 ng-disabled="item.disabled()"
30 ng-repeat="item in menuItems"
31 ng-click="item.handler(item, item.handlerData)">
36 <!-- putting a flex div here forces the remaining content to float right -->
37 <div class="flex-cell"></div>
39 <!-- column picker, pager, etc. -->
40 <div class="btn-group column-picker">
43 <button type="button" class="btn btn-default"
44 ng-class="{disabled : onFirstPage()}"
45 ng-click="offset(0);collect()"
46 title="[% l('Start') %]">
47 <span class="glyphicon glyphicon-fast-backward"></span>
50 <!-- previous page -->
51 <button type="button" class="btn btn-default"
52 ng-class="{disabled : onFirstPage()}"
53 ng-click="decrementPage()"
54 title="[% l('Previous Page') %]">
55 <span class="glyphicon glyphicon-backward"></span>
59 <!-- todo: paging needs a total count value to be fully functional -->
60 <button type="button" class="btn btn-default"
61 ng-class="{disabled : !hasNextPage()}"
62 ng-click="incrementPage()"
63 title="[% l('Next Page') %]">
64 <span class="glyphicon glyphicon-forward"></span>
67 <!-- actions drop-down menu -->
68 <div class="btn-group" ng-if="actions.length" dropdown>
69 <button type="button" class="btn btn-default dropdown-toggle"
70 ng-class="{disabled : false}">
71 [% l('Actions') %] <span class="caret"></span>
73 <ul class="dropdown-menu pull-right">
74 <li ng-repeat="action in actions" ng-class="{divider: action.divider}">
75 <a ng-if="!action.divider" href dropdown-toggle
76 ng-click="actionLauncher(action)">{{action.label}}</a>
81 <div class="btn-group" dropdown is-open="gridRowCountIsOpen">
82 <button type="button" title="[% ('Select Row Count') %]"
83 class="btn btn-default dropdown-toggle">
84 [% l('Rows [_1]', '{{limit()}}') %]
85 <span class="caret"></span>
87 <ul class="dropdown-menu">
88 <li ng-repeat="t in [5,10,25,50,100]">
89 <a href ng-click='offset(0);limit(t);collect()'>
96 <div class="btn-group" dropdown is-open="gridPageSelectIsOpen">
97 <button type="button" title="[% ('Select Page') %]"
98 class="btn btn-default dropdown-toggle">
99 [% l('Page [_1]', '{{page()}}') %]
100 <span class="caret"></span>
102 <ul class="dropdown-menu">
104 <div class="input-group">
105 <input type="text" class="form-control"
106 ng-model="pageFromUI"
107 ng-click="$event.stopPropagation()"/>
108 <span class="input-group-btn">
109 <button class="btn btn-default" type="button"
110 ng-click="goToPage(pageFromUI);pageFromUI='';">
116 <li role="presentation" class="divider"></li>
117 <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
118 <a href ng-click='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
123 <div class="btn-group" dropdown is-open="gridColumnPickerIsOpen">
124 <button type="button"
125 class="btn btn-default dropdown-toggle">
126 <span class="caret"></span>
128 <ul class="dropdown-menu pull-right eg-grid-column-picker">
129 <li><a href ng-click="toggleConfDisplay()">
130 <span class="glyphicon glyphicon-wrench"></span>
131 [% l('Configure Columns') %]
133 <li><a href ng-click="saveConfig()">
134 <span class="glyphicon glyphicon-floppy-save"></span>
135 [% l('Save Columns') %]
137 <li><a href ng-click="showAllColumns()">
138 <span class="glyphicon glyphicon-resize-full"></span>
139 [% l('Show All Columns') %]
141 <li><a href ng-click="hideAllColumns()">
142 <span class="glyphicon glyphicon-resize-small"></span>
143 [% l('Hide All Columns') %]
145 <li><a href ng-click="resetColumns()">
146 <span class="glyphicon glyphicon-refresh"></span>
147 [% l('Reset Columns') %]
149 <li><a ng-click="generateCSVExportURL()"
150 download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
151 <span class="glyphicon glyphicon-download"></span>
152 [% l('Download CSV') %]
154 <li><a href ng-click="printCSV()">
155 <span class="glyphicon glyphicon-print"></span>
158 <li role="presentation" class="divider"></li>
159 <li ng-repeat="col in columns">
160 <a href ng-click="toggleColumnVisibility(col)">
161 <span ng-if="col.visible"
162 class="label label-success">✓</span>
163 <span ng-if="!col.visible"
164 class="label label-warning">✗</span>
165 <span>{{col.label}}</span>
174 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
176 <!-- import our eg-grid-field defs -->
177 <div ng-transclude></div>
179 <div class="eg-grid-row eg-grid-header-row">
180 <div class="eg-grid-cell eg-grid-cell-stock">
181 <div title="[% l('Row Number Column') %]">[% l('#') %]</div>
183 <div class="eg-grid-cell eg-grid-cell-stock">
185 <input title="[% l('Row Selector Column') %]"
186 focus-me="gridControls.focusRowSelector"
187 type='checkbox' ng-model="selectAll"/>
190 <div class="eg-grid-cell"
191 eg-grid-column-drag-dest
192 column="{{col.name}}"
193 eg-right-click="onContextMenu($event)"
194 ng-repeat="col in columns"
195 style="flex:{{col.flex}}"
196 ng-show="col.visible">
198 <div style="display:flex">
199 <div style="flex:1" class="eg-grid-column-move-handle">
200 <div ng-if="col.sortable">
201 <a column="{{col.name}}" href
202 eg-grid-column-drag-source
203 ng-click="quickSort(col.name)">{{col.label}}</a>
205 <div ng-if="!col.sortable">
206 <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
209 <div eg-grid-column-drag-source
210 drag-type="resize" column="{{col.name}}"
211 class="eg-grid-column-resize-handle"> </div>
216 <!-- Inline grid configuration row -->
217 <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
218 <div class="eg-grid-cell eg-grid-cell-conf-header">
219 <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
220 <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
221 <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
223 <div class="eg-grid-cell"
224 ng-repeat="col in columns"
225 style="flex:{{col.flex}}"
226 ng-show="col.visible">
227 <div class="eg-grid-conf-cell-entry">
228 <a href="" title="[% l('Make column wider') %]"
229 ng-click="modifyColumnFlex(col,1)">
230 <span class="glyphicon glyphicon-fast-forward"></span>
233 <div class="eg-grid-conf-cell-entry">
234 <a href="" title="[% l('Make column narrower') %]"
235 ng-click="modifyColumnFlex(col,-1)">
236 <span class="glyphicon glyphicon-fast-backward"></span>
239 <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
240 <div ng-if="col.multisortable">
241 <input type='number' ng-model="col.sort"
242 title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
248 <div class="eg-grid-content-body">
249 <div ng-show="items.length == 0"
250 class="alert alert-info">[% l('No Items To Display') %]</div>
252 <div class="eg-grid-row"
253 id="eg-grid-row-{{$index + 1}}"
254 ng-repeat="item in items"
255 ng-show="items.length > 0"
256 ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
257 <div class="eg-grid-cell eg-grid-cell-stock"
258 ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]">
259 <a href ng-show="gridControls.activateItem"
260 ng-click="gridControls.activateItem(item)" style="font-weight:bold">
261 {{$index + offset() + 1}}
263 <div ng-hide="gridControls.activateItem">{{$index + offset() + 1}}</div>
265 <div class="eg-grid-cell eg-grid-cell-stock">
266 <!-- ng-click=handleRowClick here has unintended
267 consequences and is unnecessary, avoid it -->
269 <input type='checkbox' title="[% l('Select Row') %]"
270 ng-model="selected[indexValue(item)]"/>
273 <div class="eg-grid-cell eg-grid-cell-content"
274 ng-click="handleRowClick($event, item)"
275 ng-dblclick="gridControls.activateItem(item)"
276 ng-repeat="col in columns"
277 style="flex:{{col.flex}}"
278 ng-show="col.visible">
280 <!-- if the cell comes with its own template,
281 translate that content into HTML and insert it here -->
282 <span ng-if="col.template"
283 ng-bind-html="translateCellTemplate(col, item)">
286 <!-- otherwise, simply display the item value, which may
287 pass through datatype-specific filtering. -->
288 <span ng-if="!col.template">
289 {{itemFieldValue(item, col) | egGridValueFilter:col}}