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)="btn.action()">
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 <span class="ml-2">{{action.label}}</span>
46 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
47 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
48 <span title="First Page" i18n-title
49 class="material-icons mat-icon-in-button">first_page</span>
51 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
52 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
53 <span title="Previous Page" i18n-title
54 class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
56 <button [disabled]="gridContext.pager.isLastPage()" type="button"
57 class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
58 <span title="Next Page" i18n-title
59 class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
63 Hiding jump-to-last since there's no analog in the angularjs grid and
64 it has limited value since the size of the data set is often unknown.
65 <button [disabled]="!gridContext.pager.resultCount || gridContext.pager.isLastPage()"
66 type="button" class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toLast()">
67 <span title="First Page" i18n-title
68 class="material-icons mat-icon-in-button">last_page</span>
72 <div ngbDropdown class="mr-1" placement="bottom-right">
73 <button ngbDropdownToggle class="btn btn-outline-dark text-button">
74 <span title="Select Row Count" i18n-title i18n>
75 Rows {{gridContext.pager.limit}}
78 <div class="dropdown-menu" ngbDropdownMenu>
79 <a class="dropdown-item"
80 *ngFor="let count of [5, 10, 25, 50, 100]"
81 (click)="gridContext.pager.setLimit(count)">
82 <span class="ml-2">{{count}}</span>
88 class="btn btn-outline-dark mr-1"
89 (click)="gridContext.overflowCells=!gridContext.overflowCells">
90 <span *ngIf="!gridContext.overflowCells"
91 title="Expand Cells Vertically" i18n-title
92 class="material-icons mat-icon-in-button">expand_more</span>
93 <span *ngIf="gridContext.overflowCells"
94 title="Collaps Cells Vertically" i18n-title
95 class="material-icons mat-icon-in-button">expand_less</span>
98 <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
99 </eg-grid-column-config>
100 <div ngbDropdown placement="bottom-right">
101 <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
102 <span title="Show Grid Options" i18n-title
103 class="material-icons mat-icon-in-button">settings</span>
105 <div class="dropdown-menu" ngbDropdownMenu>
106 <a class="dropdown-item label-with-material-icon"
107 (click)="columnConfDialog.open({size:'lg'})">
108 <span class="material-icons">build</span>
109 <span class="ml-2" i18n>Manage Columns</span>
111 <a class="dropdown-item label-with-material-icon"
112 (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
113 <span class="material-icons">compare_arrows</span>
114 <span class="ml-2" i18n>Manage Column Widths</span>
116 <a class="dropdown-item label-with-material-icon"
117 (click)="saveGridConfig()">
118 <span class="material-icons">save</span>
119 <span class="ml-2" i18n>Save Grid Settings</span>
121 <a class="dropdown-item label-with-material-icon"
122 (click)="gridContext.columnSet.reset()">
123 <span class="material-icons">restore</span>
124 <span class="ml-2" i18n>Reset Columns</span>
126 <a class="dropdown-item label-with-material-icon"
127 (click)="generateCsvExportUrl($event)"
128 [download]="csvExportFileName"
129 [href]="csvExportUrl">
130 <span class="material-icons">cloud_download</span>
131 <span class="ml-2" i18n>Download Full CSV</span>
133 <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
134 <span class="material-icons">print</span>
135 <span class="ml-2" i18n>Print Full Grid</span>
138 <div class="dropdown-divider"></div>
140 <a class="dropdown-item label-with-material-icon"
141 (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
142 <span *ngIf="col.visible" class="badge badge-success">✓</span>
143 <span *ngIf="!col.visible" class="badge badge-warning">✗</span>
144 <span class="ml-2">{{col.label}}</span>