2 <div class="eg-grid-toolbar mb-2">
4 <div class="btn-toolbar">
7 <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length">
8 <button *ngFor="let btn of gridContext.toolbarButtons"
9 [disabled]="btn.disabled"
10 class="btn btn-outline-dark mr-1" (click)="performButtonAction(btn)">
16 <div class="form-check form-check-inline"
17 *ngIf="gridContext.toolbarCheckboxes.length">
18 <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes">
19 <label class="form-check-label">
20 <input class="form-check-input" type="checkbox"
21 (click)="cb.onChange($event.target.checked)"/>
28 <!-- push everything else to the right -->
29 <div class="flex-1"></div>
31 <div ngbDropdown class="mr-1" placement="bottom-right">
32 <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
33 class="btn btn-outline-dark no-dropdown-caret">
34 <span title="Actions For Selected Rows" i18n-title
35 class="material-icons mat-icon-in-button">playlist_add_check</span>
37 <div class="dropdown-menu" ngbDropdownMenu>
38 <button class="dropdown-item" (click)="performAction(action)"
39 *ngFor="let action of gridContext.toolbarActions"
40 [disabled]="shouldDisableAction(action)">
41 <ng-container *ngIf="action.isGroup">
42 <span class="ml-2 font-weight-bold font-italic">{{action.label}}</span>
44 <ng-container *ngIf="action.group && !action.isGroup">
45 <!-- grouped entries are indented -->
46 <span class="ml-4">{{action.label}}</span>
48 <ng-container *ngIf="!action.group && !action.isGroup">
49 <span class="ml-2">{{action.label}}</span>
55 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
56 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
57 <span title="First Page" i18n-title
58 class="material-icons mat-icon-in-button">first_page</span>
60 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
61 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
62 <span title="Previous Page" i18n-title
63 class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
65 <button [disabled]="gridContext.pager.isLastPage()" type="button"
66 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
67 <span title="Next Page" i18n-title
68 class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
72 Hiding jump-to-last since there's no analog in the angularjs grid and
73 it has limited value since the size of the data set is often unknown.
74 <button [disabled]="!gridContext.pager.resultCount || gridContext.pager.isLastPage()"
75 type="button" class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toLast()">
76 <span title="First Page" i18n-title
77 class="material-icons mat-icon-in-button">last_page</span>
81 <div ngbDropdown class="mr-1" placement="bottom-right">
82 <button ngbDropdownToggle class="btn btn-outline-dark text-button">
83 <span title="Select Row Count" i18n-title i18n>
84 Rows {{gridContext.pager.limit}}
87 <div class="dropdown-menu" ngbDropdownMenu>
88 <a class="dropdown-item"
89 *ngFor="let count of [5, 10, 25, 50, 100]"
90 (click)="gridContext.pager.setLimit(count)">
91 <span class="ml-2">{{count}}</span>
97 class="btn btn-outline-dark mr-1"
98 (click)="gridContext.overflowCells=!gridContext.overflowCells">
99 <span *ngIf="!gridContext.overflowCells"
100 title="Expand Cells Vertically" i18n-title
101 class="material-icons mat-icon-in-button">expand_more</span>
102 <span *ngIf="gridContext.overflowCells"
103 title="Collaps Cells Vertically" i18n-title
104 class="material-icons mat-icon-in-button">expand_less</span>
107 <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
108 </eg-grid-column-config>
109 <div ngbDropdown placement="bottom-right">
110 <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
111 <span title="Show Grid Options" i18n-title
112 class="material-icons mat-icon-in-button">settings</span>
114 <div class="dropdown-menu" ngbDropdownMenu>
115 <a class="dropdown-item label-with-material-icon"
116 (click)="columnConfDialog.open({size:'lg'})">
117 <span class="material-icons">build</span>
118 <span class="ml-2" i18n>Manage Columns</span>
120 <a class="dropdown-item label-with-material-icon"
121 (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
122 <span class="material-icons">compare_arrows</span>
123 <span class="ml-2" i18n>Manage Column Widths</span>
125 <a class="dropdown-item label-with-material-icon"
126 (click)="saveGridConfig()">
127 <span class="material-icons">save</span>
128 <span class="ml-2" i18n>Save Grid Settings</span>
130 <a class="dropdown-item label-with-material-icon"
131 (click)="gridContext.columnSet.reset()">
132 <span class="material-icons">restore</span>
133 <span class="ml-2" i18n>Reset Columns</span>
135 <a class="dropdown-item label-with-material-icon"
136 (click)="generateCsvExportUrl($event)"
137 [download]="csvExportFileName"
138 [href]="csvExportUrl">
139 <span class="material-icons">cloud_download</span>
140 <span class="ml-2" i18n>Download Full CSV</span>
142 <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
143 <span class="material-icons">print</span>
144 <span class="ml-2" i18n>Print Full Grid</span>
147 <div class="dropdown-divider"></div>
149 <a class="dropdown-item label-with-material-icon"
150 (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
151 <span *ngIf="col.visible" class="badge badge-success">✓</span>
152 <span *ngIf="!col.visible" class="badge badge-warning">✗</span>
153 <span class="ml-2">{{col.label}}</span>