Commit 440e2e86b49357ab987ef99941440dc756147ba6
1 parent
6c0454b9
fixes
Showing
3 changed files
with
11 additions
and
17 deletions
Show diff stats
src/app/components/grid/rich-grid.component.html
| 1 | -<div style="width: 800px;"> | 1 | +<div> |
| 2 | <h1>Rich Grid with Pure JavaScript</h1> | 2 | <h1>Rich Grid with Pure JavaScript</h1> |
| 3 | <div style="clear: both;"></div> | 3 | <div style="clear: both;"></div> |
| 4 | <div *ngIf="showGrid"> | 4 | <div *ngIf="showGrid"> |
| 5 | - <button class="btn btn-warning" (click)="addNewRow()" type="button">Добавить новое поле</button> | ||
| 6 | - <button class="btn btn-danger" (click)="deleteRows()" type="button">Удалить</button> | 5 | + <button md-raised-button (click)="addNewRow()" type="button">Добавить новое поле</button> |
| 6 | + <button md-raised-button (click)="deleteRows()" type="button">Удалить</button> | ||
| 7 | <div *ngIf="isLoading" class=""> | 7 | <div *ngIf="isLoading" class=""> |
| 8 | ...Loading | 8 | ...Loading |
| 9 | </div> | 9 | </div> |
src/app/components/grid/rich-grid.component.ts
| @@ -39,6 +39,7 @@ export class RichGridComponent { | @@ -39,6 +39,7 @@ export class RichGridComponent { | ||
| 39 | public boolean: BooleanSelectList[]; | 39 | public boolean: BooleanSelectList[]; |
| 40 | public isLoading: boolean = false; | 40 | public isLoading: boolean = false; |
| 41 | public isBootstrapping: boolean = true; | 41 | public isBootstrapping: boolean = true; |
| 42 | + public isSelected: boolean = true; | ||
| 42 | private columnDefs: any[]; | 43 | private columnDefs: any[]; |
| 43 | private gridOptions: GridOptions; | 44 | private gridOptions: GridOptions; |
| 44 | 45 | ||
| @@ -73,7 +74,6 @@ export class RichGridComponent { | @@ -73,7 +74,6 @@ export class RichGridComponent { | ||
| 73 | this.gridOptions.api.refreshVirtualPageCache(); | 74 | this.gridOptions.api.refreshVirtualPageCache(); |
| 74 | }); | 75 | }); |
| 75 | } | 76 | } |
| 76 | - | ||
| 77 | setRowData(allOfTheData) { | 77 | setRowData(allOfTheData) { |
| 78 | let dataSource = { | 78 | let dataSource = { |
| 79 | rowCount: null, // behave as infinite scroll | 79 | rowCount: null, // behave as infinite scroll |
| @@ -121,13 +121,11 @@ export class RichGridComponent { | @@ -121,13 +121,11 @@ export class RichGridComponent { | ||
| 121 | { | 121 | { |
| 122 | headerName: 'ID', | 122 | headerName: 'ID', |
| 123 | field: 'busStopId', | 123 | field: 'busStopId', |
| 124 | - width: 150 | ||
| 125 | }, | 124 | }, |
| 126 | { | 125 | { |
| 127 | headerName: 'Назва дороги', | 126 | headerName: 'Назва дороги', |
| 128 | field: 'roadId', | 127 | field: 'roadId', |
| 129 | editable: true, | 128 | editable: true, |
| 130 | - width: 150, | ||
| 131 | cellEditorFramework: EditorComponent, | 129 | cellEditorFramework: EditorComponent, |
| 132 | cellRendererFramework: RendererComponent, | 130 | cellRendererFramework: RendererComponent, |
| 133 | cellEditorParams: { | 131 | cellEditorParams: { |
| @@ -140,7 +138,6 @@ export class RichGridComponent { | @@ -140,7 +138,6 @@ export class RichGridComponent { | ||
| 140 | headerName: 'Область', | 138 | headerName: 'Область', |
| 141 | field: 'regionId', | 139 | field: 'regionId', |
| 142 | editable: true, | 140 | editable: true, |
| 143 | - width: 150, | ||
| 144 | cellEditorFramework: EditorComponent, | 141 | cellEditorFramework: EditorComponent, |
| 145 | cellRendererFramework: RendererComponent, | 142 | cellRendererFramework: RendererComponent, |
| 146 | cellEditorParams: { | 143 | cellEditorParams: { |
| @@ -153,19 +150,16 @@ export class RichGridComponent { | @@ -153,19 +150,16 @@ export class RichGridComponent { | ||
| 153 | headerName: 'Місцезнаходження, км+ справа', | 150 | headerName: 'Місцезнаходження, км+ справа', |
| 154 | field: 'locationRight', | 151 | field: 'locationRight', |
| 155 | editable: true, | 152 | editable: true, |
| 156 | - width: 150 | ||
| 157 | }, | 153 | }, |
| 158 | { | 154 | { |
| 159 | headerName: 'Місцезнаходження, км+ зліва', | 155 | headerName: 'Місцезнаходження, км+ зліва', |
| 160 | field: 'locationLeft', | 156 | field: 'locationLeft', |
| 161 | editable: true, | 157 | editable: true, |
| 162 | - width: 150 | ||
| 163 | }, | 158 | }, |
| 164 | { | 159 | { |
| 165 | headerName: 'Технічний стан', | 160 | headerName: 'Технічний стан', |
| 166 | field: 'stateCommonId', | 161 | field: 'stateCommonId', |
| 167 | editable: true, | 162 | editable: true, |
| 168 | - width: 150, | ||
| 169 | cellEditorFramework: EditorComponent, | 163 | cellEditorFramework: EditorComponent, |
| 170 | cellRendererFramework: RendererComponent, | 164 | cellRendererFramework: RendererComponent, |
| 171 | cellEditorParams: { | 165 | cellEditorParams: { |
| @@ -178,7 +172,6 @@ export class RichGridComponent { | @@ -178,7 +172,6 @@ export class RichGridComponent { | ||
| 178 | headerName: 'Наявність туалету', | 172 | headerName: 'Наявність туалету', |
| 179 | field: 'toiletAvailability', | 173 | field: 'toiletAvailability', |
| 180 | editable: true, | 174 | editable: true, |
| 181 | - width: 150, | ||
| 182 | cellEditorFramework: EditorComponent, | 175 | cellEditorFramework: EditorComponent, |
| 183 | cellRendererFramework: RendererComponent, | 176 | cellRendererFramework: RendererComponent, |
| 184 | cellEditorParams: { | 177 | cellEditorParams: { |
src/app/helpers/editor.component.ts
| @@ -5,16 +5,17 @@ import { AgEditorComponent } from 'ag-grid-ng2/main'; | @@ -5,16 +5,17 @@ import { AgEditorComponent } from 'ag-grid-ng2/main'; | ||
| 5 | @Component({ | 5 | @Component({ |
| 6 | selector: 'editor-cell', | 6 | selector: 'editor-cell', |
| 7 | template: ` | 7 | template: ` |
| 8 | - <md-select #container> | ||
| 9 | - <md-option *ngFor="let item of data" (click)="onClick(item[this.params.valueCol])" > | ||
| 10 | - {{item[this.params.labelCol]}} | ||
| 11 | - </md-option> | ||
| 12 | - </md-select> | 8 | + <div class="md-select-panel"> |
| 9 | + <div #container class="md-select-content"> | ||
| 10 | + <md-option *ngFor="let item of data" (click)="onClick(item[this.params.valueCol])" > | ||
| 11 | + {{item[this.params.labelCol]}} | ||
| 12 | + </md-option> | ||
| 13 | + </div> | ||
| 14 | + </div> | ||
| 13 | ` | 15 | ` |
| 14 | }) | 16 | }) |
| 15 | export class EditorComponent implements AgEditorComponent, AfterViewInit { | 17 | export class EditorComponent implements AgEditorComponent, AfterViewInit { |
| 16 | @ViewChild('container', {read: ViewContainerRef}) public container; | 18 | @ViewChild('container', {read: ViewContainerRef}) public container; |
| 17 | - @ViewChild('container') public child; | ||
| 18 | public item: Object = null; | 19 | public item: Object = null; |
| 19 | public data: Object[]; | 20 | public data: Object[]; |
| 20 | private params: any; | 21 | private params: any; |