API tools faq
paste
Guest User

Untitled

a guest
Dec 10th, 2018
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.94 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <body>
  4. <input type="text">
  5. <md-app-aggrid [columnDefs]="columnDefs1" [rowData]="rowData1"
  6. (editEvent)="getData($event);" [pagination]="false" [enableSorting]="false"
  7. [enableColResize]="false"></md-app-aggrid>
  8. </body>
  9.  
  10. </html>
  11.  
  12. <div *ngIf="gridId == 'aggrid1'">
  13. <div [ngStyle]="style">
  14. <ag-grid-angular style="width: 100%; height: 100%;" #agGrid class="ag-
  15. theme-blue" [rowData]="rowData" rowSelection="single"
  16. [columnDefs]="columnDefs" [pagination]="pagination"
  17. [enableSorting]="enableSorting" [enableColResize]="enableColResize"
  18. (input)="dataChange($event)" (gridReady)="onGridReady1($event)"
  19. (getSelectedRows)="getSelectedRows()"
  20. (cellClicked)="onCellClicked($event)">
  21. </ag-grid-angular>
  22. </div>
  23. </div>
  24. <div *ngIf="gridId == 'aggrid2'">
  25. <div [ngStyle]="style">
  26. <ag-grid-angular style="width: 100%; height: 100%;" #agGrid2 class="ag-
  27. theme-blue" [rowData]="rowData" rowSelection="single"
  28. [columnDefs]="columnDefs" [pagination]="pagination"
  29. [enableSorting]="enableSorting" [enableColResize]="enableColResize"
  30. (input)="dataChange($event)" (gridReady)="onGridReady2($event)"
  31. (getSelectedRows)="getSelectedRows()"
  32. (cellClicked)="onCellClicked($event)">
  33. </ag-grid-angular>
  34. </div>
  35. </div>
  36. <div *ngIf="gridId == 'aggrid3'">
  37. <div [ngStyle]="style">
  38. <ag-grid-angular style="width: 100%; height: 100%;" #agGrid3 class="ag-
  39. theme-blue" [rowData]="rowData" rowSelection="single"
  40. [columnDefs]="columnDefs" [pagination]="pagination"
  41. [enableSorting]="enableSorting" [enableColResize]="enableColResize"
  42. (input)="dataChange($event)" (gridReady)="onGridReady3($event)"
  43. (getSelectedRows)="getSelectedRows()"
  44. (cellClicked)="onCellClicked($event)">
  45. </ag-grid-angular>
  46. </div>
  47. </div>
  48.  
  49. import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from
  50. '@angular/core';
  51. import { AgGridNg2 } from 'ag-grid-angular';
  52.  
  53. @Component({
  54. selector: 'md-app-aggrid2',
  55. templateUrl: './app-aggrid2.component.html',
  56. styleUrls: ['./app-aggrid2.component.scss']
  57. })
  58. export class AppAggrid2Component implements OnInit {
  59.  
  60. params2: any;
  61. params3: any;
  62. params1: any;
  63. style: { width: any; height: any; };
  64. public getRowNodeId: (data: any) => any;
  65. selectedDataString: any;
  66. public gridApi1;
  67. public gridApi2;
  68. public gridApi3;
  69. public gridColumnApi;
  70. // getting inputs from parent component
  71. @Input() columnDefs: any;
  72. // @Input() height: any;
  73. // @Input() width: any;
  74. @Input() pagination: any;
  75. @Input() enableSorting: any;
  76. @Input() enableColResize: any;
  77. @Input() rowData: any;
  78. @Input() gridLayout: any;
  79. @Input() gridId: any;
  80. // editing form using editevent in parent component
  81. @Output() editEvent = new EventEmitter();
  82. @Output() editEvent2 = new EventEmitter();
  83. @Output() editEvent3 = new EventEmitter();
  84. // removing data from array in parent component
  85. @Output() removeEvent = new EventEmitter();
  86. @ViewChild('agGrid') agGrid: AgGridNg2;
  87. @ViewChild('agGrid2') agGrid2: AgGridNg2;
  88. @ViewChild('agGrid3') agGrid3: AgGridNg2;
  89. constructor() { }
  90. ngOnInit() {
  91. if (this.gridLayout === 'manageOrders1.1') {
  92. this.setWidthAndHeight('100%', '250px');
  93. } else if (this.gridLayout === 'manageOrders1.2') {
  94. this.setWidthAndHeight('100%', '150px');
  95. } else {
  96. this.setWidthAndHeight('100%', '150px');
  97. }
  98. }
  99. setWidthAndHeight(width, height) {
  100. this.style = {
  101. width: width,
  102. height: height,
  103. };
  104. }
  105. // initilize the ag-grid
  106. onGridReady1(params) {
  107. this.params1 = params;
  108. console.log('onGridReady1', params);
  109. this.gridApi1 = params.api;
  110. this.gridColumnApi = params.columnApi;
  111. }
  112. onGridReady2(params) {
  113. this.params2 = params;
  114. console.log('onGridReady2', params);
  115. this.gridApi2 = params.api;
  116. this.gridColumnApi = params.columnApi;
  117. }
  118. onGridReady3(params) {
  119. this.params3 = params;
  120. console.log('onGridReady3', params);
  121. this.gridApi3 = params.api;
  122. this.gridColumnApi = params.columnApi;
  123. }
  124. // adding new row to the grid
  125. submit(obj, grid) {
  126. if (grid === 'aggrid2') {
  127. this.gridId = 'aggrid2';
  128. // this.onGridReady2(this.params2);
  129. this.editEvent2.emit('Ravi aggrid2');
  130. // const res1 = this.gridApi2.updateRowData({ add: [obj] });
  131. const res1 = this.agGrid2.api.updateRowData({ add: [obj] });
  132. } else if (grid === 'aggrid3') {
  133. this.gridId = 'aggrid3';
  134. this.editEvent3.emit('Ravi aggrid3');
  135. // const res1 = this.gridApi3.updateRowData({ add: [obj] });
  136. const res1 = this.agGrid3.api.updateRowData({ add: [obj] });
  137. } else {
  138. const res1 = this.gridApi1.updateRowData({ add: [obj] });
  139. }
  140. }
  141. // checking the action type from cellClicked event
  142. onCellClicked(e) {
  143. if (e.event.target !== undefined) {
  144. const actionType = e.event.target.getAttribute('data-action-type');
  145. switch (actionType) {
  146. case 'edit':
  147. // callback to edit method in ag-grid
  148. return this.onRowEdit(e);
  149. case 'remove':
  150. // callback to remove method in ag-grid
  151. return this.onRemoveSelected(e);
  152. case 'deleteAndSend':
  153. // callback to remove method in ag-grid
  154. return this.sendToTodaysGrid(e);
  155. default:
  156. // callback to remove method in ag-grid
  157. return this.getSelectedData(e);
  158. }
  159. }
  160. }
  161. // emits the data in editevent to callback parent component
  162. onRowEdit(e) {
  163. this.editEvent.emit(e.data);
  164. }
  165. // emits the removing data and remove the selected data in ag-grid
  166. onRemoveSelected(e) {
  167. this.removeEvent.emit(e.data);
  168. const selectedData = e.data;
  169. const res2 = this.gridApi1.updateRowData({ remove: [selectedData] });
  170. // alert('deleted successfully');
  171. }
  172. // update existing row in ag-grid by using index
  173. update(obj, index) {
  174. const rowNode = this.gridApi1.getRowNode(index);
  175. rowNode.setData(obj);
  176. }
  177. // emits the data in editevent to callback parent component
  178. getSelectedData(e) {
  179. console.log('2 getSelectedData successfully' + e.data);
  180. this.editEvent.emit(e.data);
  181. }
  182. sendToTodaysGrid(e) {
  183. //..
  184. }
  185. }
  186.  
  187. <div class="panel panel-primary">
  188. <div class="panel-heading">
  189. <span style="font-size: 16px"> Manage orders </span>
  190. </div>
  191. <div class="panel-body">
  192. <div class="row">
  193. <div class="col-md-6 col-md-6 col-sm-6 col-xs-6">
  194. <div class="panel panel-primary" style=" border: 1px solid gray;">
  195. <div class="panel-body">
  196. <div class="row">
  197. <div class="col-lg-8 col-md-8 col-sm-8">
  198. <md-app-search jsonType="Snomed" itemName="snomed_fsn"
  199. (typeOfJson)="jsonType=$event;"
  200. (afterSearchData)="selectedData($event);"
  201. [dataShow]='false'></md-app-search>
  202. </div>
  203. <div class="col-lg-4 col-md-4 col-sm-4">
  204. <input type="radio" name="radio1" checked
  205. (click)="selectOption(r.value)" #r value="all">All
  206. <input type="radio" name="radio1"
  207. (click)="selectOption(r1.value)" #r1 value="pre">Previous Orders
  208. </div>
  209. </div>
  210. <div class="row" style="padding-top: 10px">
  211. <div class="col-lg-5 col-md-5 col-sm-5">
  212. <div class="input-group">
  213. By&nbsp;&nbsp;
  214. <select class="form-control input-sm">
  215. <option value="" disabled selected></option>
  216. </select>
  217. </div>
  218. </div>
  219. <div class="col-lg-3 col-md-3 col-sm-3">
  220. <select class="form-control input-sm">
  221. <option value="" disabled selected></option>
  222. </select>
  223. </div>
  224. <div class="col-lg-4 col-md-4 col-sm-4">
  225. <div class="input-group">
  226. Type &nbsp;&nbsp;
  227. <select class="form-control input-sm">
  228. <option value="" disabled selected></option>
  229. </select>
  230. </div>
  231. </div>
  232. </div>
  233. <div class="row" style="padding-top: 10px">
  234. <div class="col-lg-8 col-md-8 col-sm-8">
  235. <div class="input-group">
  236. Lab Company &nbsp;&nbsp;
  237. <select class="form-control input-sm">
  238. <option value="" disabled selected></option>
  239. </select>
  240. </div>
  241. </div>
  242. <div class="col-lg-4 col-md-4 col-sm-4">
  243. </div>
  244. </div>
  245. </div>
  246. </div>
  247. <md-app-aggrid2 gridId="aggrid1" [columnDefs]="columnDefs1"
  248. [rowData]="rowData1" gridLayout="manageOrders1.1"
  249. (editEvent)="getData($event);"
  250. [pagination]="false" [enableSorting]="false"
  251. [enableColResize]="false"></md-app-aggrid2>
  252. </div>
  253. <div class="col-md-6 col-md-6 col-sm-6 col-xs-6">
  254. <input type="radio" name="radio2" checked
  255. (click)="todaysOrders(t.value)" #t value="today">Today's Orders
  256. <md-app-aggrid2 gridId="aggrid2" [columnDefs]="columnDefs2"
  257. [rowData]="rowData2" gridLayout="manageOrders1.2"
  258. (editEvent2)="getData2($event);"
  259. [pagination]="false" [enableSorting]="false"
  260. [enableColResize]="false"></md-app-aggrid2>
  261. <br>
  262. <input type="radio" name="radio2" (click)="todaysOrders(f.value)" #f
  263. value="future">Future Orders
  264. <span style=" padding-left: 255px">Order Date : </span>&nbsp;{{date |
  265. date:'MM/dd/yyyy'}}
  266. <md-app-aggrid2 gridId="aggrid3" [columnDefs]="columnDefs3"
  267. [rowData]="rowData3" gridLayout="manageOrders1.2"
  268. (editEvent3)="getData3($event);"
  269. [pagination]="false" [enableSorting]="false"
  270. [enableColResize]="false"></md-app-aggrid2>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275.  
  276. <div [ngStyle]="style">
  277. <ag-grid-angular style="width: 100%; height: 100%;" #agGrid class="ag-theme-blue"
  278. [rowData]="rowData" rowSelection="single"
  279. [columnDefs]="columnDefs" [pagination]="pagination" [enableSorting]="enableSorting"
  280. [enableColResize]="enableColResize"
  281. (input)="dataChange($event)" (gridReady)="onGridReady($event)"
  282. (getSelectedRows)="getSelectedRows()" (cellClicked)="onCellClicked($event)">
  283. </ag-grid-angular>
  284. </div>
  285.  
  286. <ag-grid-angular
  287. style="width: 100%; height: 45%"
  288. #topGrid
  289. class="ag-theme-balham"
  290. [rowData]="rowData"
  291. [gridOptions]="topOptions"
  292. [columnDefs]="columnDefs"
  293. (firstDataRendered)="onFirstDataRendered($event)">
  294. </ag-grid-angular>
  295.  
  296. <ag-grid-angular
  297. style="width: 100%; height: 45%"
  298. #bottomGrid
  299. class="ag-theme-balham"
  300. [rowData]="rowData"
  301. [gridOptions]="bottomOptions"
  302. [columnDefs]="columnDefs"
  303. (firstDataRendered)="onFirstDataRendered($event)">
  304. </ag-grid-angular>
  305.  
  306. export class AppComponent {
  307. columnDefs;
  308. rowData;
  309. topOptions = {alignedGrids: []};
  310. bottomOptions = {alignedGrids: []};
  311.  
  312. @ViewChild('topGrid') topGrid;
  313. @ViewChild('bottomGrid') bottomGrid;
  314.  
  315. constructor(private http: HttpClient) {
  316. this.columnDefs = [
  317. {headerName: 'Athlete', field: 'athlete', width: 200},
  318. {headerName: 'Age', field: 'age', width: 150},
  319. {headerName: 'Country', field: 'country', width: 150},
  320. {headerName: 'Year', field: 'year', width: 120},
  321. {headerName: 'Date', field: 'date', width: 150},
  322. {headerName: 'Sport', field: 'sport', width: 150},
  323. {
  324. headerName: 'Medals',
  325. children: [
  326. {
  327. headerName: "Total", columnGroupShow: 'closed', field: "total",
  328. valueGetter: "data.gold + data.silver + data.bronze", width: 200
  329. },
  330. {headerName: "Gold", columnGroupShow: 'open', field: "gold", width: 100},
  331. {headerName: "Silver", columnGroupShow: 'open', field: "silver", width: 100},
  332. {headerName: "Bronze", columnGroupShow: 'open', field: "bronze", width: 100}
  333. ]
  334. }
  335. ];
  336.  
  337. this.topOptions.alignedGrids.push(this.bottomOptions);
  338. this.bottomOptions.alignedGrids.push(this.topOptions);
  339. }
  340.  
  341. ngOnInit() {
  342. this.http.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json').subscribe(data => {
  343. this.rowData = data;
  344. });
  345. }
  346. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!