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="fw-bold me-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 me-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 me-1" (click)="performButtonAction(btn)">
27 <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes; index as i">
28 <div class="form-check form-check-inline">
29 <input class="form-check-input" type="checkbox" id="eg-grid-toolbar-cb{{i}}"
30 [(ngModel)]="cb.isChecked"
31 (click)="cb.onChange.emit($event.target.checked)"/>
32 <label class="form-check-label" for="eg-grid-toolbar-cb{{i}}">{{cb.label}}</label>
39 <!-- push everything else to the right -->
40 <div class="flex-1"></div>
42 <ng-container *ngIf="!gridContext.disableSelect">
44 <div class="font-sm fst-italic d-flex flex-column-reverse me-2">
45 {{gridContext.getSelectedRows().length}} selected
47 <div ngbDropdown class="me-1" placement="bottom-right">
48 <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
49 class="btn btn-outline-dark no-dropdown-caret">
50 <span title="Actions For Selected Rows" i18n-title
51 class="material-icons mat-icon-in-button">playlist_add_check</span>
53 <div class="dropdown-menu" ngbDropdownMenu>
54 <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
55 </eg-grid-toolbar-actions-menu>
59 </ng-container><!-- if disableSelect -->
61 <ng-container *ngIf="!gridContext.disablePaging">
63 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
64 class="btn btn-outline-dark me-1" (click)="gridContext.pager.toFirst()">
65 <span title="First Page" i18n-title
66 class="material-icons mat-icon-in-button">first_page</span>
68 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
69 class="btn btn-outline-dark me-1" (click)="gridContext.pager.decrement()">
70 <span title="Previous Page" i18n-title
71 class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
73 <button [disabled]="gridContext.pager.isLastPage()" type="button"
74 class="btn btn-outline-dark me-1" (click)="gridContext.pager.increment()">
75 <span title="Next Page" i18n-title
76 class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
78 <div ngbDropdown class="me-1" placement="bottom-right">
79 <button ngbDropdownToggle class="btn btn-outline-dark text-button">
80 <span title="Select Row Count" i18n-title i18n>
81 Rows {{gridContext.pager.limit}}
84 <div class="dropdown-menu" ngbDropdownMenu>
85 <a class="dropdown-item"
86 *ngFor="let count of [5, 10, 25, 50, 100]"
87 (click)="gridContext.pager.setLimit(count)">
88 <span class="ms-2">{{count}}</span>
93 </ng-container><!-- if disablePaging-->
97 class="btn btn-outline-dark me-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="Collapse Cells Vertically" i18n-title
104 class="material-icons mat-icon-in-button">expand_less</span>
107 <eg-grid-column-config #columnConfDialog [gridContext]="gridContext">
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 class="material-icons mat-icon-in-button">settings</span>
113 <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
114 <button nbgDropdownItem class="dropdown-item label-with-material-icon"
115 (click)="columnConfDialog.open({size:'lg'})">
116 <span class="material-icons">build</span>
117 <span class="ms-2" i18n>Manage Columns</span>
119 <button nbgDropdownItem class="dropdown-item label-with-material-icon"
120 (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
121 <span class="material-icons">compare_arrows</span>
122 <span class="ms-2" i18n>Manage Column Widths</span>
124 <button nbgDropdownItem class="dropdown-item label-with-material-icon"
125 [disabled]="gridContext.toolbarActions.length === 0" (click)="toolbarActionsEditor.open().subscribe()">
126 <span class="material-icons">menu</span>
127 <span class="ms-2" i18n>Manage Actions Menu</span>
129 <button nbgDropdownItem class="dropdown-item label-with-material-icon" *ngIf="!disableSaveSettings"
130 (click)="saveGridConfig()">
131 <span class="material-icons">save</span>
132 <span class="ms-2" i18n>Save Grid Settings</span>
134 <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="gridContext.columnSet.reset()">
135 <span class="material-icons">restore</span>
136 <span class="ms-2" i18n>Reset Columns</span>
138 <a nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="generateCsvExportUrl($event)"
139 [download]="csvExportFileName" [href]="csvExportUrl">
140 <span class="material-icons">cloud_download</span>
141 <span class="ms-2" i18n>Download Full CSV</span>
143 <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="printHtml()">
144 <span class="material-icons">print</span>
145 <span class="ms-2" i18n>Print Full Grid</span>
148 <div class="dropdown-divider"></div>
150 <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="toggleVisibility(col)"
151 *ngFor="let col of gridContext.columnSet.sortForColPicker()">
152 <span *ngIf="col.visible" class="badge badge-success">✓</span>
153 <span *ngIf="!col.visible" class="badge badge-warning">✗</span>
154 <span class="ms-2">{{col.label}}</span>