1 <eg-grid-toolbar-actions-editor #toolbarActionsEditor [gridContext]="gridContext">
2 </eg-grid-toolbar-actions-editor>
4 <div class="eg-grid-toolbar mb-2">
6 <div class="btn-toolbar">
7 <span class="font-weight-bold mr-2" *ngIf="gridContext.toolbarLabel">
8 {{gridContext.toolbarLabel}}
12 <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length || gridContext.isFilterable">
13 <!-- special case for remove filters button -->
14 <button *ngIf="gridContext.isFilterable"
15 class="btn btn-outline-dark mr-1" (click)="gridContext.removeFilters()"
16 [disabled]="!gridContext.filtersSet() || gridContext.dataSource.requestingData" i18n>
19 <button *ngFor="let btn of gridContext.toolbarButtons"
20 [disabled]="btn.disabled"
21 class="btn btn-outline-dark mr-1" (click)="performButtonAction(btn)">
27 <div class="form-check form-check-inline"
28 *ngIf="gridContext.toolbarCheckboxes.length">
29 <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes">
30 <label class="form-check-label">
31 <input class="form-check-input" type="checkbox"
32 [(ngModel)]="cb.isChecked"
33 (click)="cb.onChange.emit($event.target.checked)"/>
40 <!-- push everything else to the right -->
41 <div class="flex-1"></div>
43 <ng-container *ngIf="!gridContext.disableSelect">
45 <div class="font-sm font-italic d-flex flex-column-reverse mr-2">
46 {{gridContext.getSelectedRows().length}} selected
48 <div ngbDropdown class="mr-1" placement="bottom-right">
49 <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
50 class="btn btn-outline-dark no-dropdown-caret">
51 <span title="Actions For Selected Rows" i18n-title
52 class="material-icons mat-icon-in-button">playlist_add_check</span>
54 <div class="dropdown-menu" ngbDropdownMenu>
55 <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
56 </eg-grid-toolbar-actions-menu>
60 </ng-container><!-- if disableSelect -->
62 <ng-container *ngIf="!gridContext.disablePaging">
64 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
65 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
66 <span title="First Page" i18n-title
67 class="material-icons mat-icon-in-button">first_page</span>
69 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
70 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
71 <span title="Previous Page" i18n-title
72 class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
74 <button [disabled]="gridContext.pager.isLastPage()" type="button"
75 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
76 <span title="Next Page" i18n-title
77 class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
79 <div ngbDropdown class="mr-1" placement="bottom-right">
80 <button ngbDropdownToggle class="btn btn-outline-dark text-button">
81 <span title="Select Row Count" i18n-title i18n>
82 Rows {{gridContext.pager.limit}}
85 <div class="dropdown-menu" ngbDropdownMenu>
86 <a class="dropdown-item"
87 *ngFor="let count of [5, 10, 25, 50, 100]"
88 (click)="gridContext.pager.setLimit(count)">
89 <span class="ml-2">{{count}}</span>
94 </ng-container><!-- if disablePaging-->
98 class="btn btn-outline-dark mr-1"
99 (click)="gridContext.overflowCells=!gridContext.overflowCells">
100 <span *ngIf="!gridContext.overflowCells"
101 title="Expand Cells Vertically" i18n-title
102 class="material-icons mat-icon-in-button">expand_more</span>
103 <span *ngIf="gridContext.overflowCells"
104 title="Collapse Cells Vertically" i18n-title
105 class="material-icons mat-icon-in-button">expand_less</span>
108 <eg-grid-column-config #columnConfDialog [gridContext]="gridContext">
109 </eg-grid-column-config>
110 <div ngbDropdown placement="bottom-right">
111 <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
112 <span title="Show Grid Options" i18n-title
113 class="material-icons mat-icon-in-button">settings</span>
115 <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
116 <a class="dropdown-item label-with-material-icon"
117 (click)="columnConfDialog.open({size:'lg'})">
118 <span class="material-icons">build</span>
119 <span class="ml-2" i18n>Manage Columns</span>
121 <a class="dropdown-item label-with-material-icon"
122 (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
123 <span class="material-icons">compare_arrows</span>
124 <span class="ml-2" i18n>Manage Column Widths</span>
126 <button class="dropdown-item label-with-material-icon"
127 [disabled]="gridContext.toolbarActions.length === 0"
128 (click)="toolbarActionsEditor.open().subscribe()">
129 <span class="material-icons">menu</span>
130 <span class="ml-2" i18n>Manage Actions Menu</span>
132 <a class="dropdown-item label-with-material-icon"
133 *ngIf="!disableSaveSettings"
134 (click)="saveGridConfig()">
135 <span class="material-icons">save</span>
136 <span class="ml-2" i18n>Save Grid Settings</span>
138 <a class="dropdown-item label-with-material-icon"
139 (click)="gridContext.columnSet.reset()">
140 <span class="material-icons">restore</span>
141 <span class="ml-2" i18n>Reset Columns</span>
143 <a class="dropdown-item label-with-material-icon"
144 (click)="generateCsvExportUrl($event)"
145 [download]="csvExportFileName"
146 [href]="csvExportUrl">
147 <span class="material-icons">cloud_download</span>
148 <span class="ml-2" i18n>Download Full CSV</span>
150 <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
151 <span class="material-icons">print</span>
152 <span class="ml-2" i18n>Print Full Grid</span>
155 <div class="dropdown-divider"></div>
157 <a class="dropdown-item label-with-material-icon"
158 (click)="toggleVisibility(col)"
159 *ngFor="let col of gridContext.columnSet.sortForColPicker()">
160 <span *ngIf="col.visible" class="badge badge-success">✓</span>
161 <span *ngIf="!col.visible" class="badge badge-warning">✗</span>
162 <span class="ml-2">{{col.label}}</span>