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">
9 <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length || gridContext.isFilterable">
10 <!-- special case for remove filters button -->
11 <button *ngIf="gridContext.isFilterable"
12 class="btn btn-outline-dark mr-1" (click)="gridContext.removeFilters()"
13 [disabled]="!gridContext.filtersSet() || gridContext.dataSource.requestingData" i18n>
16 <button *ngFor="let btn of gridContext.toolbarButtons"
17 [disabled]="btn.disabled"
18 class="btn btn-outline-dark mr-1" (click)="performButtonAction(btn)">
24 <div class="form-check form-check-inline"
25 *ngIf="gridContext.toolbarCheckboxes.length">
26 <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes">
27 <label class="form-check-label">
28 <input class="form-check-input" type="checkbox"
29 [(ngModel)]="cb.isChecked"
30 (click)="cb.onChange.emit($event.target.checked)"/>
37 <!-- push everything else to the right -->
38 <div class="flex-1"></div>
40 <ng-container *ngIf="!gridContext.disableSelect">
42 <div class="font-sm font-italic d-flex flex-column-reverse mr-2">
43 {{gridContext.getSelectedRows().length}} selected
45 <div ngbDropdown class="mr-1" placement="bottom-right">
46 <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
47 class="btn btn-outline-dark no-dropdown-caret">
48 <span title="Actions For Selected Rows" i18n-title
49 class="material-icons mat-icon-in-button">playlist_add_check</span>
51 <div class="dropdown-menu" ngbDropdownMenu>
52 <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
53 </eg-grid-toolbar-actions-menu>
57 </ng-container><!-- if disableSelect -->
59 <ng-container *ngIf="!gridContext.disablePaging">
61 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
62 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
63 <span title="First Page" i18n-title
64 class="material-icons mat-icon-in-button">first_page</span>
66 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
67 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
68 <span title="Previous Page" i18n-title
69 class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
71 <button [disabled]="gridContext.pager.isLastPage()" type="button"
72 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
73 <span title="Next Page" i18n-title
74 class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
76 <div ngbDropdown class="mr-1" placement="bottom-right">
77 <button ngbDropdownToggle class="btn btn-outline-dark text-button">
78 <span title="Select Row Count" i18n-title i18n>
79 Rows {{gridContext.pager.limit}}
82 <div class="dropdown-menu" ngbDropdownMenu>
83 <a class="dropdown-item"
84 *ngFor="let count of [5, 10, 25, 50, 100]"
85 (click)="gridContext.pager.setLimit(count)">
86 <span class="ml-2">{{count}}</span>
91 </ng-container><!-- if disablePaging-->
95 class="btn btn-outline-dark mr-1"
96 (click)="gridContext.overflowCells=!gridContext.overflowCells">
97 <span *ngIf="!gridContext.overflowCells"
98 title="Expand Cells Vertically" i18n-title
99 class="material-icons mat-icon-in-button">expand_more</span>
100 <span *ngIf="gridContext.overflowCells"
101 title="Collapse Cells Vertically" i18n-title
102 class="material-icons mat-icon-in-button">expand_less</span>
105 <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
106 </eg-grid-column-config>
107 <div ngbDropdown placement="bottom-right">
108 <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
109 <span title="Show Grid Options" i18n-title
110 class="material-icons mat-icon-in-button">settings</span>
112 <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
113 <a class="dropdown-item label-with-material-icon"
114 (click)="columnConfDialog.open({size:'lg'})">
115 <span class="material-icons">build</span>
116 <span class="ml-2" i18n>Manage Columns</span>
118 <a class="dropdown-item label-with-material-icon"
119 (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
120 <span class="material-icons">compare_arrows</span>
121 <span class="ml-2" i18n>Manage Column Widths</span>
123 <button class="dropdown-item label-with-material-icon"
124 [disabled]="gridContext.toolbarActions.length === 0"
125 (click)="toolbarActionsEditor.open().subscribe()">
126 <span class="material-icons">menu</span>
127 <span class="ml-2" i18n>Manage Actions Menu</span>
129 <a class="dropdown-item label-with-material-icon"
130 *ngIf="!disableSaveSettings"
131 (click)="saveGridConfig()">
132 <span class="material-icons">save</span>
133 <span class="ml-2" i18n>Save Grid Settings</span>
135 <a class="dropdown-item label-with-material-icon"
136 (click)="gridContext.columnSet.reset()">
137 <span class="material-icons">restore</span>
138 <span class="ml-2" i18n>Reset Columns</span>
140 <a class="dropdown-item label-with-material-icon"
141 (click)="generateCsvExportUrl($event)"
142 [download]="csvExportFileName"
143 [href]="csvExportUrl">
144 <span class="material-icons">cloud_download</span>
145 <span class="ml-2" i18n>Download Full CSV</span>
147 <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
148 <span class="material-icons">print</span>
149 <span class="ml-2" i18n>Print Full Grid</span>
152 <div class="dropdown-divider"></div>
154 <a class="dropdown-item label-with-material-icon"
155 (click)="col.visible=!col.visible"
156 *ngFor="let col of gridContext.columnSet.sortForColPicker()">
157 <span *ngIf="col.visible" class="badge badge-success">✓</span>
158 <span *ngIf="!col.visible" class="badge badge-warning">✗</span>
159 <span class="ml-2">{{col.label}}</span>