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; |