2 <div class="eg-grid-toolbar mb-2">
4 <div class="btn-toolbar">
7 <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length || gridContext.isFilterable">
8 <!-- special case for remove filters button -->
9 <button *ngIf="gridContext.isFilterable"
10 class="btn btn-outline-dark mr-1" (click)="gridContext.removeFilters()"
11 [disabled]="!gridContext.filtersSet()" i18n>
14 <button *ngFor="let btn of gridContext.toolbarButtons"
15 [disabled]="btn.disabled"
16 class="btn btn-outline-dark mr-1" (click)="performButtonAction(btn)">
22 <div class="form-check form-check-inline"
23 *ngIf="gridContext.toolbarCheckboxes.length">
24 <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes">
25 <label class="form-check-label">
26 <input class="form-check-input" type="checkbox"
27 [(ngModel)]="cb.isChecked"
28 (click)="cb.onChange($event.target.checked)"/>
35 <!-- push everything else to the right -->
36 <div class="flex-1"></div>
38 <div class="font-sm font-italic d-flex flex-column-reverse mr-2">
39 {{gridContext.rowSelector.selected().length}} selected
41 <div ngbDropdown class="mr-1" placement="bottom-right">
42 <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
43 class="btn btn-outline-dark no-dropdown-caret">
44 <span title="Actions For Selected Rows" i18n-title
45 class="material-icons mat-icon-in-button">playlist_add_check</span>
47 <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
48 <button class="dropdown-item" (click)="performAction(action)"
49 *ngFor="let action of gridContext.toolbarActions"
50 [disabled]="shouldDisableAction(action)">
51 <ng-container *ngIf="action.isGroup">
52 <span class="ml-2 font-weight-bold font-italic">{{action.label}}</span>
54 <ng-container *ngIf="action.group && !action.isGroup">
55 <!-- grouped entries are indented -->
56 <span class="ml-4">{{action.label}}</span>
58 <ng-container *ngIf="!action.group && !action.isGroup">
59 <span class="ml-2">{{action.label}}</span>
65 <ng-container *ngIf="!gridContext.disablePaging">
67 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
68 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
69 <span title="First Page" i18n-title
70 class="material-icons mat-icon-in-button">first_page</span>
72 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
73 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
74 <span title="Previous Page" i18n-title
75 class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
77 <button [disabled]="gridContext.pager.isLastPage()" type="button"
78 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
79 <span title="Next Page" i18n-title
80 class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
82 <div ngbDropdown class="mr-1" placement="bottom-right">
83 <button ngbDropdownToggle class="btn btn-outline-dark text-button">
84 <span title="Select Row Count" i18n-title i18n>
85 Rows {{gridContext.pager.limit}}
88 <div class="dropdown-menu" ngbDropdownMenu>
89 <a class="dropdown-item"
90 *ngFor="let count of [5, 10, 25, 50, 100]"
91 (click)="gridContext.pager.setLimit(count)">
92 <span class="ml-2">{{count}}</span>
97 </ng-container><!-- if disablePaging-->
100 <button type="button"
101 class="btn btn-outline-dark mr-1"
102 (click)="gridContext.overflowCells=!gridContext.overflowCells">
103 <span *ngIf="!gridContext.overflowCells"
104 title="Expand Cells Vertically" i18n-title
105 class="material-icons mat-icon-in-button">expand_more</span>
106 <span *ngIf="gridContext.overflowCells"
107 title="Collaps Cells Vertically" i18n-title
108 class="material-icons mat-icon-in-button">expand_less</span>
111 <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
112 </eg-grid-column-config>
113 <div ngbDropdown placement="bottom-right">
114 <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
115 <span title="Show Grid Options" i18n-title
116 class="material-icons mat-icon-in-button">settings</span>
118 <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
119 <a class="dropdown-item label-with-material-icon"
120 (click)="columnConfDialog.open({size:'lg'})">
121 <span class="material-icons">build</span>
122 <span class="ml-2" i18n>Manage Columns</span>
124 <a class="dropdown-item label-with-material-icon"
125 (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
126 <span class="material-icons">compare_arrows</span>
127 <span class="ml-2" i18n>Manage Column Widths</span>
129 <a class="dropdown-item label-with-material-icon"
130 (click)="saveGridConfig()">
131 <span class="material-icons">save</span>
132 <span class="ml-2" i18n>Save Grid Settings</span>
134 <a class="dropdown-item label-with-material-icon"
135 (click)="gridContext.columnSet.reset()">
136 <span class="material-icons">restore</span>
137 <span class="ml-2" i18n>Reset Columns</span>
139 <a class="dropdown-item label-with-material-icon"
140 (click)="generateCsvExportUrl($event)"
141 [download]="csvExportFileName"
142 [href]="csvExportUrl">
143 <span class="material-icons">cloud_download</span>
144 <span class="ml-2" i18n>Download Full CSV</span>
146 <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
147 <span class="material-icons">print</span>
148 <span class="ml-2" i18n>Print Full Grid</span>
151 <div class="dropdown-divider"></div>
153 <a class="dropdown-item label-with-material-icon"
154 (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
155 <span *ngIf="col.visible" class="badge badge-success">✓</span>
156 <span *ngIf="!col.visible" class="badge badge-warning">✗</span>
157 <span class="ml-2">{{col.label}}</span>