@skyux/ag-grid 5.1.7 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/skyux-ag-grid.umd.js +112 -112
- package/documentation.json +17 -17
- package/esm2015/modules/ag-grid/ag-grid-adapter.service.js +3 -3
- package/esm2015/modules/ag-grid/ag-grid-data-manager-adapter.directive.js +3 -3
- package/esm2015/modules/ag-grid/ag-grid-row-delete.component.js +3 -3
- package/esm2015/modules/ag-grid/ag-grid-row-delete.directive.js +3 -3
- package/esm2015/modules/ag-grid/ag-grid-wrapper.component.js +3 -3
- package/esm2015/modules/ag-grid/ag-grid.module.js +4 -4
- package/esm2015/modules/ag-grid/ag-grid.service.js +5 -5
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.component.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-datepicker/cell-editor-datepicker.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-number/cell-editor-number.component.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-number/cell-editor-number.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-text/cell-editor-text.component.js +4 -4
- package/esm2015/modules/ag-grid/cell-editors/cell-editor-text/cell-editor-text.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency-validator.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-currency/cell-renderer-currency.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-lookup/cell-renderer-lookup.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.component.js +4 -4
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-row-selector/cell-renderer-row-selector.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-renderers/cell-renderer-validator-tooltip/cell-renderer-validator-tooltip.module.js +4 -4
- package/esm2015/modules/ag-grid/cell-validator/ag-grid-cell-validator-tooltip.component.js +3 -3
- package/esm2015/modules/ag-grid/cell-validator/ag-grid-cell-validator.module.js +4 -4
- package/esm2015/modules/ag-grid/types/cell-type.js +2 -2
- package/esm2015/modules/shared/ag-grid-resources.module.js +4 -4
- package/fesm2015/skyux-ag-grid.js +108 -108
- package/fesm2015/skyux-ag-grid.js.map +1 -1
- package/modules/ag-grid/types/cell-type.d.ts +1 -1
- package/package.json +6 -6
package/documentation.json
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"kindString": "Enumeration",
|
|
21
21
|
"flags": {},
|
|
22
22
|
"comment": {
|
|
23
|
-
"shortText": "These column types can be used by setting the AG Grid [column definition `type`](https://www.ag-grid.com/javascript-grid-column-properties/) to one of the following values.\n<br/>\nAny [SKY UX component](https://developer.blackbaud.com/skyux/components can be made into a [cell editor](https://www.ag-grid.com/javascript-grid-cell-editor/) or [cell renderer](https://www.ag-grid.com/javascript-grid-cell-rendering-components/) component. If you would like to use a component that does not have a column definition yet, please consider [contributing it](https://developer.blackbaud.com/skyux/contribute/contribution-process) to the SKY UX data entry grid module, or [file an issue](https://developer.blackbaud.com/skyux/contribute/contribution-process/file-issue) in the [`@skyux/ag-grid` repo](https://github.com/blackbaud/skyux-ag-grid)."
|
|
23
|
+
"shortText": "These column types can be used by setting the AG Grid [column definition `type`](https://www.ag-grid.com/javascript-grid-column-properties/) to one of the following values.\n<br/>\nAny [SKY UX component](https://developer.blackbaud.com/skyux/components) can be made into a [cell editor](https://www.ag-grid.com/javascript-grid-cell-editor/) or [cell renderer](https://www.ag-grid.com/javascript-grid-cell-rendering-components/) component. If you would like to use a component that does not have a column definition yet, please consider [contributing it](https://developer.blackbaud.com/skyux/contribute/contribution-process) to the SKY UX data entry grid module, or [file an issue](https://developer.blackbaud.com/skyux/contribute/contribution-process/file-issue) in the [`@skyux/ag-grid` repo](https://github.com/blackbaud/skyux-ag-grid)."
|
|
24
24
|
},
|
|
25
25
|
"children": [
|
|
26
26
|
{
|
|
@@ -302,7 +302,7 @@
|
|
|
302
302
|
"name": "Injectable"
|
|
303
303
|
},
|
|
304
304
|
"arguments": {
|
|
305
|
-
"options": "{\n providedIn: '
|
|
305
|
+
"options": "{\n providedIn: 'any',\n}"
|
|
306
306
|
}
|
|
307
307
|
}
|
|
308
308
|
],
|
|
@@ -316,7 +316,7 @@
|
|
|
316
316
|
"sources": [
|
|
317
317
|
{
|
|
318
318
|
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
319
|
-
"line":
|
|
319
|
+
"line": 148,
|
|
320
320
|
"character": 2
|
|
321
321
|
}
|
|
322
322
|
],
|
|
@@ -405,7 +405,7 @@
|
|
|
405
405
|
"sources": [
|
|
406
406
|
{
|
|
407
407
|
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
408
|
-
"line":
|
|
408
|
+
"line": 189,
|
|
409
409
|
"character": 9
|
|
410
410
|
}
|
|
411
411
|
],
|
|
@@ -453,7 +453,7 @@
|
|
|
453
453
|
"sources": [
|
|
454
454
|
{
|
|
455
455
|
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
456
|
-
"line":
|
|
456
|
+
"line": 174,
|
|
457
457
|
"character": 9
|
|
458
458
|
}
|
|
459
459
|
],
|
|
@@ -501,7 +501,7 @@
|
|
|
501
501
|
"sources": [
|
|
502
502
|
{
|
|
503
503
|
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
504
|
-
"line":
|
|
504
|
+
"line": 164,
|
|
505
505
|
"character": 9
|
|
506
506
|
}
|
|
507
507
|
],
|
|
@@ -549,7 +549,7 @@
|
|
|
549
549
|
"sources": [
|
|
550
550
|
{
|
|
551
551
|
"fileName": "projects/ag-grid/src/modules/ag-grid/ag-grid.service.ts",
|
|
552
|
-
"line":
|
|
552
|
+
"line": 141,
|
|
553
553
|
"character": 13
|
|
554
554
|
}
|
|
555
555
|
],
|
|
@@ -692,17 +692,17 @@
|
|
|
692
692
|
{
|
|
693
693
|
"fileName": "data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
694
694
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
695
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridService,\n SkyAutocompleteProperties,\n SkyCellType,\n SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n
|
|
695
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridService,\n SkyAutocompleteProperties,\n SkyCellType,\n SkyDatepickerProperties,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ICellEditorParams,\n NewValueParams,\n RowNode,\n} from 'ag-grid-community';\n\nimport {\n SkyAgGridDemoRow,\n SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n selector: 'app-data-entry-grid-docs-demo-edit-modal',\n templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n public columnDefs: ColDef[];\n private gridApi: GridApi | undefined;\n public gridData: SkyAgGridDemoRow[];\n public gridOptions: GridOptions;\n\n constructor(\n private agGridService: SkyAgGridService,\n public context: SkyDataEntryGridEditModalContext,\n public instance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {\n this.columnDefs = [\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 100,\n editable: true,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyDatepickerProperties } => {\n return { skyComponentProperties: { minDate: params.data.startDate } };\n },\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyAutocompleteProperties } => {\n return {\n skyComponentProperties: {\n data: SKY_DEPARTMENTS,\n selectionChange: (\n change: SkyAutocompleteSelectionChange\n ): void => {\n this.departmentSelectionChange(change, params.node);\n },\n },\n };\n },\n onCellValueChanged: (event: NewValueParams): void => {\n if (event.newValue !== event.oldValue) {\n this.clearJobTitle(event.node);\n }\n },\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n editable: true,\n cellEditorParams: (\n params: ICellEditorParams\n ): { skyComponentProperties: SkyAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n let editParams: {\n skyComponentProperties: SkyAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n ];\n this.gridData = this.context.gridData;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getEditableGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetector.markForCheck();\n }\n\n private departmentSelectionChange(\n change: SkyAutocompleteSelectionChange,\n node: RowNode\n ): void {\n if (change.selectedItem && change.selectedItem !== node.data.department) {\n this.clearJobTitle(node);\n }\n }\n\n private clearJobTitle(node: RowNode | null): void {\n if (node) {\n node.data.jobTitle = undefined;\n this.changeDetector.markForCheck();\n if (this.gridApi) {\n this.gridApi.refreshCells({ rowNodes: [node] });\n }\n }\n }\n}\n"
|
|
696
696
|
},
|
|
697
697
|
{
|
|
698
698
|
"fileName": "data-entry-grid-docs-demo.component.html",
|
|
699
699
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.html",
|
|
700
|
-
"rawContents": "<div>\n <sky-toolbar>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-primary\"\n id=\"edit-btn\"\n (click)=\"openModal()\"\n >\n Edit\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-search\n [searchText]=\"searchText\"\n [debounceTime]=\"250\"\n (searchApply)=\"searchApplied($event)\"\n (searchChange)=\"searchApplied($event)\"\n (searchClear)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n </sky-toolbar>\n <sky-ag-grid-wrapper>\n <ag-grid-angular
|
|
700
|
+
"rawContents": "<div>\n <sky-toolbar>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-primary\"\n id=\"edit-btn\"\n (click)=\"openModal()\"\n >\n Edit\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-search\n [searchText]=\"searchText\"\n [debounceTime]=\"250\"\n (searchApply)=\"searchApplied($event)\"\n (searchChange)=\"searchApplied($event)\"\n (searchClear)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n </sky-toolbar>\n <sky-ag-grid-wrapper>\n <ag-grid-angular\n [gridOptions]=\"gridOptions\"\n [rowData]=\"gridData\"\n [overlayNoRowsTemplate]=\"noRowsTemplate\"\n >\n </ag-grid-angular>\n </sky-ag-grid-wrapper>\n</div>\n"
|
|
701
701
|
},
|
|
702
702
|
{
|
|
703
703
|
"fileName": "data-entry-grid-docs-demo.component.ts",
|
|
704
704
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.ts",
|
|
705
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\nimport { SkyModalService, SkyModalCloseArgs } from '@skyux/modals';\n\nimport {\n GridApi,\n GridReadyEvent,\n GridOptions,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\n\n@Component({\n selector: 'app-data-entry-grid-docs-demo',\n templateUrl: './data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public columnDefs = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRendererFramework: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n colId: 'validationDate',\n field: 'validationDate',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridOptions: GridOptions;\n public searchText: string = '';\n\n constructor(\n private agGridService: SkyAgGridService,\n private modalService: SkyModalService,\n private changeDetection: ChangeDetectorRef\n ) {\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetection.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetection.markForCheck();\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.gridData;\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.gridData = result.data;\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n alert('Saving data!');\n }\n });\n }\n\n public searchApplied(searchText: string | void): void {\n if (searchText) {\n this.searchText = searchText;\n } else {\n this.searchText = '';\n }\n if (this.gridApi) {\n this.gridApi.setQuickFilter(searchText);\n }\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
705
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\nimport { SkyModalService, SkyModalCloseArgs } from '@skyux/modals';\n\nimport {\n GridApi,\n GridReadyEvent,\n GridOptions,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\n\n@Component({\n selector: 'app-data-entry-grid-docs-demo',\n templateUrl: './data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public columnDefs = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRendererFramework: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n colId: 'validationDate',\n field: 'validationDate',\n headerName: 'Validation date',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridOptions: GridOptions;\n public searchText: string = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private modalService: SkyModalService,\n private changeDetection: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n this.changeDetection.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetection.markForCheck();\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.gridData;\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.gridData = result.data;\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n alert('Saving data!');\n }\n });\n }\n\n public searchApplied(searchText: string | void): void {\n if (searchText) {\n this.searchText = searchText;\n } else {\n this.searchText = '';\n }\n if (this.gridApi) {\n this.gridApi.setQuickFilter(searchText);\n let displayedRowCount = this.gridApi.getDisplayedRowCount();\n if (displayedRowCount > 0) {\n this.gridApi.hideOverlay();\n } else {\n this.gridApi.showNoRowsOverlay();\n }\n }\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
706
706
|
},
|
|
707
707
|
{
|
|
708
708
|
"fileName": "data-entry-grid-docs-demo.module.ts",
|
|
@@ -752,17 +752,17 @@
|
|
|
752
752
|
{
|
|
753
753
|
"fileName": "data-manager-data-entry-grid-docs-demo.component.html",
|
|
754
754
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.component.html",
|
|
755
|
-
"rawContents": "<sky-data-manager>\n <sky-data-manager-toolbar>\n <sky-data-manager-toolbar-left-item>\n <button\n class=\"sky-btn sky-btn-primary\"\n id=\"edit-btn\"\n (click)=\"openModal()\"\n >\n Edit\n </button>\n </sky-data-manager-toolbar-left-item>\n </sky-data-manager-toolbar>\n <sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n <sky-ag-grid-wrapper *ngIf=\"gridInitialized\">\n <ag-grid-angular
|
|
755
|
+
"rawContents": "<sky-data-manager>\n <sky-data-manager-toolbar>\n <sky-data-manager-toolbar-left-item>\n <button\n class=\"sky-btn sky-btn-primary\"\n id=\"edit-btn\"\n (click)=\"openModal()\"\n >\n Edit\n </button>\n </sky-data-manager-toolbar-left-item>\n </sky-data-manager-toolbar>\n <sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n <sky-ag-grid-wrapper *ngIf=\"gridInitialized\">\n <ag-grid-angular\n [gridOptions]=\"gridOptions\"\n [rowData]=\"displayedItems\"\n [overlayNoRowsTemplate]=\"noRowsTemplate\"\n >\n </ag-grid-angular>\n </sky-ag-grid-wrapper>\n </sky-data-view>\n</sky-data-manager>\n"
|
|
756
756
|
},
|
|
757
757
|
{
|
|
758
758
|
"fileName": "data-manager-data-entry-grid-docs-demo.component.ts",
|
|
759
759
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.component.ts",
|
|
760
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\n\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport {\n SkyDataManagerState,\n SkyDataViewConfig,\n SkyDataManagerService,\n} from '@skyux/data-manager';\n\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo',\n templateUrl: './data-manager-data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataEntryGridDemoComponent implements OnInit {\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRendererFramework: SkyDataManagerDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start Date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End Date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'validationCurrency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n field: 'validationDate',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n public columnApi?: ColumnApi;\n public displayedItems: any[] = [];\n public gridData = SKY_AG_GRID_DEMO_DATA;\n\n public viewId = 'gridView';\n public activeViewId = 'gridView';\n\n public dataState = new SkyDataManagerState({});\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: [\n {\n id: 'selected',\n label: 'selected',\n alwaysDisplayed: true,\n },\n\n {\n id: 'context',\n label: 'context',\n alwaysDisplayed: true,\n },\n {\n id: 'name',\n label: 'Name',\n description: 'The name of the employee.',\n },\n {\n id: 'age',\n label: 'Age',\n description: 'The age of the employee.',\n },\n {\n id: 'startDate',\n label: 'Start Date',\n description: 'The start date of the employee.',\n },\n {\n id: 'endDate',\n label: 'End Date',\n description: 'The end date of the employee.',\n },\n {\n id: 'department',\n label: 'Department',\n description: 'The department of the employee',\n },\n {\n id: 'jobTitle',\n label: 'Title',\n description: 'The job title of the employee.',\n },\n {\n id: 'validationCurrency',\n label: 'Validation Currency',\n description: 'An example column for currency validation.',\n },\n {\n id: 'validationDate',\n label: 'Validation Date',\n description: 'An example column for date validation.',\n },\n ],\n };\n\n public dataManagerConfig = {\n filterModalComponent: DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n sortOptions: [\n {\n id: 'az',\n label: 'Name (A - Z)',\n descending: false,\n propertyName: 'name',\n },\n {\n id: 'za',\n label: 'Name (Z - A)',\n descending: true,\n propertyName: 'name',\n },\n ],\n };\n\n public defaultDataState = new SkyDataManagerState({\n filterData: {\n filtersApplied: false,\n filters: {\n hideSales: false,\n },\n },\n views: [\n {\n viewId: this.viewId,\n displayedColumnIds: [\n 'selected',\n 'name',\n 'age',\n 'startDate',\n 'endDate',\n 'department',\n 'jobTitle',\n 'validationCurrency',\n 'validationDate',\n ],\n },\n ],\n });\n\n public gridApi?: GridApi;\n public gridInitialized = false;\n public gridOptions!: GridOptions;\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService,\n private modalService: SkyModalService\n ) {\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.markForCheck();\n });\n }\n\n public ngOnInit(): void {\n this.displayedItems = this.gridData;\n\n this.dataManagerService.initDataManager({\n activeViewId: this.activeViewId,\n dataManagerConfig: this.dataManagerConfig,\n defaultDataState: this.defaultDataState,\n });\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public updateData(): void {\n this.sortItems();\n this.displayedItems = this.filterItems(this.searchItems(this.gridData));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n this.changeDetector.markForCheck();\n }\n\n public setInitialColumnOrder(): void {\n let viewState = this.dataState.getViewStateById(this.viewId);\n let visibleColumns = viewState.displayedColumnIds;\n\n this.columnDefs.sort((col1, col2) => {\n let col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n let col2Index = visibleColumns.findIndex(\n (colId: string) => colId === col2.colId\n );\n\n if (col1Index === -1) {\n col1.hide = true;\n return 0;\n } else if (col2Index === -1) {\n col2.hide = true;\n return 0;\n } else {\n return col1Index - col2Index;\n }\n });\n\n this.gridInitialized = true;\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(event: GridReadyEvent): void {\n this.columnApi = event.columnApi;\n this.gridApi = event.api;\n this.gridApi.sizeColumnsToFit();\n this.updateData();\n this.changeDetector.markForCheck();\n }\n\n public sortItems(): void {\n let sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n const allColumns = this.columnApi.getAllColumns() || [];\n allColumns.forEach((column) => {\n if (column.getColId() === sortOption.propertyName) {\n column.setSort(sortOption.descending ? 'desc' : 'asc');\n } else {\n column.setSort('none');\n }\n });\n }\n }\n\n public clearAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (item.selected) {\n let itemIndex = selectedIds.indexOf(item.id);\n item.selected = false;\n selectedIds.splice(itemIndex, 1);\n }\n });\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public selectAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (!item.selected) {\n item.selected = true;\n selectedIds.push(item.id);\n }\n });\n\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public searchItems(items: any[]): any[] {\n let searchedItems = items;\n let searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: any) {\n let property: any;\n\n for (property in item) {\n if (\n item.hasOwnProperty(property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toLowerCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n\n return false;\n });\n }\n return searchedItems;\n }\n\n public filterItems(items: any[]): any[] {\n let filteredItems = items;\n let filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n let filters = filterData.filters;\n filteredItems = items.filter((item: any) => {\n return (\n ((filters.hideOrange && item.color !== 'orange') ||\n !filters.hideOrange) &&\n ((filters.type !== 'any' && item.type === filters.type) ||\n !filters.type ||\n filters.type === 'any')\n );\n });\n }\n\n return filteredItems;\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.gridData;\n this.changeDetector.markForCheck();\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataManagerDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.gridData = result.data;\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n alert('Saving data!');\n }\n this.changeDetector.markForCheck();\n });\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
760
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\n\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport {\n SkyDataManagerState,\n SkyDataViewConfig,\n SkyDataManagerService,\n} from '@skyux/data-manager';\n\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo',\n templateUrl: './data-manager-data-entry-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataEntryGridDemoComponent implements OnInit {\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRendererFramework: SkyDataManagerDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n field: 'validationDate',\n headerName: 'Validation date',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n public columnApi?: ColumnApi;\n public displayedItems: any[] = [];\n public gridData = SKY_AG_GRID_DEMO_DATA;\n\n public viewId = 'gridView';\n public activeViewId = 'gridView';\n\n public dataState = new SkyDataManagerState({});\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: [\n {\n id: 'selected',\n label: 'selected',\n alwaysDisplayed: true,\n },\n\n {\n id: 'context',\n label: 'context',\n alwaysDisplayed: true,\n },\n {\n id: 'name',\n label: 'Name',\n description: 'The name of the employee.',\n },\n {\n id: 'age',\n label: 'Age',\n description: 'The age of the employee.',\n },\n {\n id: 'startDate',\n label: 'Start date',\n description: 'The start date of the employee.',\n },\n {\n id: 'endDate',\n label: 'End date',\n description: 'The end date of the employee.',\n },\n {\n id: 'department',\n label: 'Department',\n description: 'The department of the employee',\n },\n {\n id: 'jobTitle',\n label: 'Title',\n description: 'The job title of the employee.',\n },\n {\n id: 'validationCurrency',\n label: 'Validation currency',\n description: 'An example column for currency validation.',\n },\n {\n id: 'validationDate',\n label: 'Validation date',\n description: 'An example column for date validation.',\n },\n ],\n };\n\n public dataManagerConfig = {\n filterModalComponent: DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n sortOptions: [\n {\n id: 'az',\n label: 'Name (A - Z)',\n descending: false,\n propertyName: 'name',\n },\n {\n id: 'za',\n label: 'Name (Z - A)',\n descending: true,\n propertyName: 'name',\n },\n ],\n };\n\n public defaultDataState = new SkyDataManagerState({\n filterData: {\n filtersApplied: false,\n filters: {\n hideSales: false,\n },\n },\n views: [\n {\n viewId: this.viewId,\n displayedColumnIds: [\n 'selected',\n 'name',\n 'age',\n 'startDate',\n 'endDate',\n 'department',\n 'jobTitle',\n 'validationCurrency',\n 'validationDate',\n ],\n },\n ],\n });\n\n public gridApi?: GridApi;\n public gridInitialized = false;\n public gridOptions!: GridOptions;\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService,\n private modalService: SkyModalService\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.markForCheck();\n });\n }\n\n public ngOnInit(): void {\n this.displayedItems = this.gridData;\n\n this.dataManagerService.initDataManager({\n activeViewId: this.activeViewId,\n dataManagerConfig: this.dataManagerConfig,\n defaultDataState: this.defaultDataState,\n });\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public updateData(): void {\n this.sortItems();\n this.displayedItems = this.filterItems(this.searchItems(this.gridData));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n\n if (this.displayedItems.length > 0) {\n this.gridApi?.hideOverlay();\n } else {\n this.gridApi?.showNoRowsOverlay();\n }\n\n this.changeDetector.markForCheck();\n }\n\n public setInitialColumnOrder(): void {\n let viewState = this.dataState.getViewStateById(this.viewId);\n let visibleColumns = viewState.displayedColumnIds;\n\n this.columnDefs.sort((col1, col2) => {\n let col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n let col2Index = visibleColumns.findIndex(\n (colId: string) => colId === col2.colId\n );\n\n if (col1Index === -1) {\n col1.hide = true;\n return 0;\n } else if (col2Index === -1) {\n col2.hide = true;\n return 0;\n } else {\n return col1Index - col2Index;\n }\n });\n\n this.gridInitialized = true;\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(event: GridReadyEvent): void {\n this.columnApi = event.columnApi;\n this.gridApi = event.api;\n this.gridApi.sizeColumnsToFit();\n this.updateData();\n this.changeDetector.markForCheck();\n }\n\n public sortItems(): void {\n let sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n const allColumns = this.columnApi.getAllColumns() || [];\n allColumns.forEach((column) => {\n if (column.getColId() === sortOption.propertyName) {\n column.setSort(sortOption.descending ? 'desc' : 'asc');\n } else {\n column.setSort('none');\n }\n });\n }\n }\n\n public clearAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (item.selected) {\n let itemIndex = selectedIds.indexOf(item.id);\n item.selected = false;\n selectedIds.splice(itemIndex, 1);\n }\n });\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public selectAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (!item.selected) {\n item.selected = true;\n selectedIds.push(item.id);\n }\n });\n\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public searchItems(items: any[]): any[] {\n let searchedItems = items;\n let searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: any) {\n let property: any;\n\n for (property in item) {\n if (\n item.hasOwnProperty(property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toLowerCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n\n return false;\n });\n }\n return searchedItems;\n }\n\n public filterItems(items: any[]): any[] {\n let filteredItems = items;\n let filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n let filters = filterData.filters;\n filteredItems = items.filter((item: any) => {\n return (\n ((filters.hideOrange && item.color !== 'orange') ||\n !filters.hideOrange) &&\n ((filters.type !== 'any' && item.type === filters.type) ||\n !filters.type ||\n filters.type === 'any')\n );\n });\n }\n\n return filteredItems;\n }\n\n public openModal(): void {\n const context = new SkyDataEntryGridEditModalContext();\n context.gridData = this.gridData;\n this.changeDetector.markForCheck();\n\n const options = {\n providers: [\n { provide: SkyDataEntryGridEditModalContext, useValue: context },\n ],\n ariaDescribedBy: 'docs-edit-grid-modal-content',\n size: 'large',\n };\n\n const modalInstance = this.modalService.open(\n SkyDataManagerDataEntryGridEditModalComponent,\n options\n );\n\n modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n if (result.reason === 'cancel' || result.reason === 'close') {\n alert('Edits canceled!');\n } else {\n this.gridData = result.data;\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n alert('Saving data!');\n }\n this.changeDetector.markForCheck();\n });\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
761
761
|
},
|
|
762
762
|
{
|
|
763
763
|
"fileName": "data-manager-data-entry-grid-docs-demo.module.ts",
|
|
764
764
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.module.ts",
|
|
765
|
-
"rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\
|
|
765
|
+
"rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyDataManagerDataEntryGridDemoComponent } from './data-manager-data-entry-grid-docs-demo.component';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n declarations: [\n SkyDataManagerDataEntryGridContextMenuComponent,\n SkyDataManagerDataEntryGridDemoComponent,\n SkyDataManagerDataEntryGridEditModalComponent,\n DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n ],\n imports: [\n AgGridModule.withComponents([\n SkyDataManagerDataEntryGridContextMenuComponent,\n ]),\n CommonModule,\n FormsModule,\n SkyToolbarModule,\n SkySearchModule,\n AgGridModule,\n SkyAgGridModule,\n SkyModalModule,\n SkyDropdownModule,\n SkyDataManagerModule,\n SkyCheckboxModule,\n ],\n exports: [SkyDataManagerDataEntryGridDemoComponent],\n entryComponents: [\n SkyDataManagerDataEntryGridEditModalComponent,\n DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n ],\n})\nexport class SkyDataManagerDataEntryGridDocsDemoModule {}\n"
|
|
766
766
|
},
|
|
767
767
|
{
|
|
768
768
|
"fileName": "basic-data-grid-docs-demo-data.ts",
|
|
@@ -772,12 +772,12 @@
|
|
|
772
772
|
{
|
|
773
773
|
"fileName": "basic-data-grid-docs-demo.component.html",
|
|
774
774
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.html",
|
|
775
|
-
"rawContents": "<div>\n <sky-toolbar>\n <sky-toolbar-item>\n <sky-search\n [searchText]=\"searchText\"\n [debounceTime]=\"250\"\n (searchApply)=\"searchApplied($event)\"\n (searchChange)=\"searchApplied($event)\"\n (searchClear)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n </sky-toolbar>\n <sky-ag-grid-wrapper>\n <ag-grid-angular
|
|
775
|
+
"rawContents": "<div>\n <sky-toolbar>\n <sky-toolbar-item>\n <sky-search\n [searchText]=\"searchText\"\n [debounceTime]=\"250\"\n (searchApply)=\"searchApplied($event)\"\n (searchChange)=\"searchApplied($event)\"\n (searchClear)=\"searchApplied($event)\"\n >\n </sky-search>\n </sky-toolbar-item>\n </sky-toolbar>\n <sky-ag-grid-wrapper>\n <ag-grid-angular\n [gridOptions]=\"gridOptions\"\n [rowData]=\"gridData\"\n [overlayNoRowsTemplate]=\"noRowsTemplate\"\n >\n </ag-grid-angular>\n </sky-ag-grid-wrapper>\n</div>\n"
|
|
776
776
|
},
|
|
777
777
|
{
|
|
778
778
|
"fileName": "basic-data-grid-docs-demo.component.ts",
|
|
779
779
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.ts",
|
|
780
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\n\nimport {\n GridApi,\n GridReadyEvent,\n GridOptions,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-basic-data-grid-docs-demo',\n templateUrl: './basic-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n public columnDefs = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n
|
|
780
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\n\nimport {\n GridApi,\n GridReadyEvent,\n GridOptions,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-basic-data-grid-docs-demo',\n templateUrl: './basic-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n public columnDefs = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public gridOptions: GridOptions;\n public searchText: string = '';\n public noRowsTemplate: string;\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.changeDetector.markForCheck();\n }\n\n public searchApplied(searchText: string | void): void {\n if (searchText) {\n this.searchText = searchText;\n } else {\n this.searchText = '';\n }\n if (this.gridApi) {\n this.gridApi.setQuickFilter(searchText);\n let displayedRowCount = this.gridApi.getDisplayedRowCount();\n if (displayedRowCount > 0) {\n this.gridApi.hideOverlay();\n } else {\n this.gridApi.showNoRowsOverlay();\n }\n }\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
781
781
|
},
|
|
782
782
|
{
|
|
783
783
|
"fileName": "basic-data-grid-docs-demo.module.ts",
|
|
@@ -802,12 +802,12 @@
|
|
|
802
802
|
{
|
|
803
803
|
"fileName": "data-manager-data-grid-docs-demo.component.html",
|
|
804
804
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.component.html",
|
|
805
|
-
"rawContents": "<sky-data-manager>\n <sky-data-manager-toolbar></sky-data-manager-toolbar>\n <sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n <sky-ag-grid-wrapper *ngIf=\"gridInitialized\">\n <ag-grid-angular
|
|
805
|
+
"rawContents": "<sky-data-manager>\n <sky-data-manager-toolbar></sky-data-manager-toolbar>\n <sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n <sky-ag-grid-wrapper *ngIf=\"gridInitialized\">\n <ag-grid-angular\n [gridOptions]=\"gridOptions\"\n [rowData]=\"displayedItems\"\n [overlayNoRowsTemplate]=\"noRowsTemplate\"\n >\n </ag-grid-angular>\n </sky-ag-grid-wrapper>\n </sky-data-view>\n</sky-data-manager>\n"
|
|
806
806
|
},
|
|
807
807
|
{
|
|
808
808
|
"fileName": "data-manager-data-grid-docs-demo.component.ts",
|
|
809
809
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.component.ts",
|
|
810
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n GridApi,\n GridReadyEvent,\n GridOptions,\n ValueFormatterParams,\n ColumnApi,\n ColDef,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-grid-docs-demo-data';\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\n\n@Component({\n selector: 'app-data-manager-data-grid-docs-demo',\n templateUrl: './data-manager-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataGridDemoComponent implements OnInit {\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n type: [SkyCellType.CurrencyValidator],\n },\n {\n colId: 'validationDate',\n field: 'validationDate',\n type: [SkyCellType.Date, SkyCellType.Validator],\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: Date) => !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public columnApi?: ColumnApi;\n public displayedItems: any[] = [];\n public gridApi?: GridApi;\n public gridInitialized = false;\n public items = SKY_AG_GRID_DEMO_DATA;\n public gridOptions!: GridOptions;\n\n public searchText: string = '';\n public activeViewId = 'dataManagerGridView';\n public viewId = 'dataManagerGridView';\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: [\n {\n id: 'selected',\n label: 'Selected',\n alwaysDisplayed: true,\n },\n {\n id: 'name',\n label: 'Name',\n description: 'The name of the employee.',\n },\n {\n id: 'age',\n label: 'Age',\n description: 'The age of the employee.',\n },\n {\n id: 'startDate',\n label: 'Start date',\n description: 'The start date of the employee.',\n },\n {\n id: 'endDate',\n label: 'End date',\n description: 'The end date of the employee.',\n },\n {\n id: 'department',\n label: 'Department',\n description: 'The department of the employee',\n },\n {\n id: 'jobTitle',\n label: 'Title',\n description: 'The job title of the employee.',\n },\n {\n id: 'validationCurrency',\n label: 'Validation currency',\n description: 'An example column for currency validation.',\n },\n {\n id: 'validationDate',\n label: 'Validation date',\n description: 'An example column for date validation.',\n },\n ],\n };\n public dataState = new SkyDataManagerState({});\n\n public dataManagerConfig = {\n filterModalComponent: DataManagerDataGridDocsDemoFiltersModalComponent,\n sortOptions: [\n {\n id: 'az',\n label: 'Name (A-Z)',\n descending: false,\n propertyName: 'name',\n },\n {\n id: 'za',\n label: 'Name (Z-A)',\n descending: true,\n propertyName: 'name',\n },\n ],\n };\n public defaultDataState = new SkyDataManagerState({\n filterData: {\n filtersApplied: false,\n filters: {\n hideSales: false,\n },\n },\n views: [\n {\n viewId: this.viewId,\n displayedColumnIds: [\n 'selected',\n 'name',\n 'age',\n 'startDate',\n 'endDate',\n 'department',\n 'jobTitle',\n 'validationCurrency',\n 'validationDate',\n ],\n },\n ],\n });\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.markForCheck();\n });\n }\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.dataManagerService.initDataManager({\n activeViewId: this.activeViewId,\n dataManagerConfig: this.dataManagerConfig,\n defaultDataState: this.defaultDataState,\n });\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public updateData(): void {\n this.sortItems();\n this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n this.changeDetector.markForCheck();\n }\n\n public setInitialColumnOrder(): void {\n let viewState = this.dataState.getViewStateById(this.viewId);\n let visibleColumns = viewState.displayedColumnIds;\n\n this.columnDefs.sort((col1, col2) => {\n let col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n let col2Index = visibleColumns.findIndex(\n (colId: string) => colId === col2.colId\n );\n\n if (col1Index === -1) {\n col1.hide = true;\n return 0;\n } else if (col2Index === -1) {\n col2.hide = true;\n return 0;\n } else {\n return col1Index - col2Index;\n }\n });\n\n this.gridInitialized = true;\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.columnApi = gridReadyEvent.columnApi;\n this.updateData();\n this.changeDetector.markForCheck();\n }\n\n public sortItems(): void {\n let sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n const allColumns = this.columnApi.getAllColumns() || [];\n allColumns.forEach((column) => {\n if (column.getColId() === sortOption.propertyName) {\n column.setSort(sortOption.descending ? 'desc' : 'asc');\n } else {\n column.setSort('none');\n }\n });\n }\n }\n\n public clearAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (item.selected) {\n let itemIndex = selectedIds.indexOf(item.id);\n item.selected = false;\n selectedIds.splice(itemIndex, 1);\n }\n });\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public selectAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (!item.selected) {\n item.selected = true;\n selectedIds.push(item.id);\n }\n });\n\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public searchItems(items: any[]): any[] {\n let searchedItems = items;\n let searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: any) {\n let property: any;\n\n for (property in item) {\n if (\n item.hasOwnProperty(property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toLowerCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n return false;\n });\n }\n return searchedItems;\n }\n\n public filterItems(items: any[]): any[] {\n let filteredItems = items;\n let filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n let filters = filterData.filters;\n filteredItems = items.filter((item: any) => {\n return (\n ((filters.hideSales && item.department.name !== 'Sales') ||\n !filters.hideSales) &&\n ((filters.jobTitle !== 'any' &&\n item.jobTitle?.name === filters.jobTitle) ||\n !filters.jobTitle ||\n filters.jobTitle === 'any')\n );\n });\n }\n\n return filteredItems;\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
810
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n OnInit,\n} from '@angular/core';\nimport { SkyCellType, SkyAgGridService } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n GridApi,\n GridReadyEvent,\n GridOptions,\n ValueFormatterParams,\n ColumnApi,\n ColDef,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-grid-docs-demo-data';\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\n\n@Component({\n selector: 'app-data-manager-data-grid-docs-demo',\n templateUrl: './data-manager-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataGridDemoComponent implements OnInit {\n public columnDefs: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n field: 'name',\n headerName: 'Name',\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n maxWidth: 60,\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.endDateFormatter,\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n },\n ];\n\n public columnApi?: ColumnApi;\n public displayedItems: any[] = [];\n public gridApi?: GridApi;\n public gridInitialized = false;\n public items = SKY_AG_GRID_DEMO_DATA;\n public gridOptions!: GridOptions;\n public noRowsTemplate: string;\n\n public searchText: string = '';\n public activeViewId = 'dataManagerGridView';\n public viewId = 'dataManagerGridView';\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: [\n {\n id: 'selected',\n label: 'Selected',\n alwaysDisplayed: true,\n },\n {\n id: 'name',\n label: 'Name',\n description: 'The name of the employee.',\n },\n {\n id: 'age',\n label: 'Age',\n description: 'The age of the employee.',\n },\n {\n id: 'startDate',\n label: 'Start date',\n description: 'The start date of the employee.',\n },\n {\n id: 'endDate',\n label: 'End date',\n description: 'The end date of the employee.',\n },\n {\n id: 'department',\n label: 'Department',\n description: 'The department of the employee',\n },\n {\n id: 'jobTitle',\n label: 'Title',\n description: 'The job title of the employee.',\n },\n ],\n };\n public dataState = new SkyDataManagerState({});\n\n public dataManagerConfig = {\n filterModalComponent: DataManagerDataGridDocsDemoFiltersModalComponent,\n sortOptions: [\n {\n id: 'az',\n label: 'Name (A-Z)',\n descending: false,\n propertyName: 'name',\n },\n {\n id: 'za',\n label: 'Name (Z-A)',\n descending: true,\n propertyName: 'name',\n },\n ],\n };\n public defaultDataState = new SkyDataManagerState({\n filterData: {\n filtersApplied: false,\n filters: {\n hideSales: false,\n },\n },\n views: [\n {\n viewId: this.viewId,\n displayedColumnIds: [\n 'selected',\n 'name',\n 'age',\n 'startDate',\n 'endDate',\n 'department',\n 'jobTitle',\n ],\n },\n ],\n });\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {\n this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.markForCheck();\n });\n }\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.dataManagerService.initDataManager({\n activeViewId: this.activeViewId,\n dataManagerConfig: this.dataManagerConfig,\n defaultDataState: this.defaultDataState,\n });\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefs,\n onGridReady: this.onGridReady.bind(this),\n },\n });\n this.changeDetector.markForCheck();\n }\n\n public updateData(): void {\n this.sortItems();\n this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n if (this.dataState.onlyShowSelected) {\n this.displayedItems = this.displayedItems.filter((item) => item.selected);\n }\n\n if (this.displayedItems.length > 0) {\n this.gridApi?.hideOverlay();\n } else {\n this.gridApi?.showNoRowsOverlay();\n }\n\n this.changeDetector.markForCheck();\n }\n\n public setInitialColumnOrder(): void {\n let viewState = this.dataState.getViewStateById(this.viewId);\n let visibleColumns = viewState.displayedColumnIds;\n\n this.columnDefs.sort((col1, col2) => {\n let col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n let col2Index = visibleColumns.findIndex(\n (colId: string) => colId === col2.colId\n );\n\n if (col1Index === -1) {\n col1.hide = true;\n return 0;\n } else if (col2Index === -1) {\n col2.hide = true;\n return 0;\n } else {\n return col1Index - col2Index;\n }\n });\n\n this.gridInitialized = true;\n this.changeDetector.markForCheck();\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.columnApi = gridReadyEvent.columnApi;\n this.updateData();\n this.changeDetector.markForCheck();\n }\n\n public sortItems(): void {\n let sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n const allColumns = this.columnApi.getAllColumns() || [];\n allColumns.forEach((column) => {\n if (column.getColId() === sortOption.propertyName) {\n column.setSort(sortOption.descending ? 'desc' : 'asc');\n } else {\n column.setSort('none');\n }\n });\n }\n }\n\n public clearAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (item.selected) {\n let itemIndex = selectedIds.indexOf(item.id);\n item.selected = false;\n selectedIds.splice(itemIndex, 1);\n }\n });\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public selectAll(): void {\n if (this.dataState) {\n let selectedIds = this.dataState.selectedIds || [];\n\n this.displayedItems.forEach((item) => {\n if (!item.selected) {\n item.selected = true;\n selectedIds.push(item.id);\n }\n });\n\n this.dataState.selectedIds = selectedIds;\n this.dataManagerService.updateDataState(this.dataState, this.viewId);\n }\n }\n\n public searchItems(items: any[]): any[] {\n let searchedItems = items;\n let searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: any) {\n let property: any;\n\n for (property in item) {\n if (\n item.hasOwnProperty(property) &&\n (property === 'name' || property === 'description')\n ) {\n const propertyText = item[property].toLowerCase();\n if (propertyText.indexOf(searchText) > -1) {\n return true;\n }\n }\n }\n return false;\n });\n }\n return searchedItems;\n }\n\n public filterItems(items: any[]): any[] {\n let filteredItems = items;\n let filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n let filters = filterData.filters;\n filteredItems = items.filter((item: any) => {\n return (\n ((filters.hideSales && item.department.name !== 'Sales') ||\n !filters.hideSales) &&\n ((filters.jobTitle !== 'any' &&\n item.jobTitle?.name === filters.jobTitle) ||\n !filters.jobTitle ||\n filters.jobTitle === 'any')\n );\n });\n }\n\n return filteredItems;\n }\n\n private endDateFormatter(params: ValueFormatterParams): string {\n const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n return params.value\n ? params.value.toLocaleDateString('en-us', dateConfig)\n : 'N/A';\n }\n}\n"
|
|
811
811
|
},
|
|
812
812
|
{
|
|
813
813
|
"fileName": "data-manager-data-grid-docs-demo.module.ts",
|
|
@@ -43,9 +43,9 @@ export class SkyAgGridAdapterService {
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
SkyAgGridAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
47
|
-
SkyAgGridAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
46
|
+
SkyAgGridAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
47
|
+
SkyAgGridAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridAdapterService, providedIn: 'root' });
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridAdapterService, decorators: [{
|
|
49
49
|
type: Injectable,
|
|
50
50
|
args: [{
|
|
51
51
|
providedIn: 'root',
|
|
@@ -192,9 +192,9 @@ export class SkyAgGridDataManagerAdapterDirective {
|
|
|
192
192
|
agGrid.api.deselectAll();
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
|
-
SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
196
|
-
SkyAgGridDataManagerAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
|
197
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
195
|
+
SkyAgGridDataManagerAdapterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyDataManagerService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
196
|
+
SkyAgGridDataManagerAdapterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridDataManagerAdapterDirective, selector: "[skyAgGridDataManagerAdapter]", inputs: { viewId: "viewId" }, queries: [{ propertyName: "agGridList", predicate: AgGridAngular, descendants: true }, { propertyName: "skyAgGridWrapperList", predicate: SkyAgGridWrapperComponent, descendants: true }], ngImport: i0 });
|
|
197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridDataManagerAdapterDirective, decorators: [{
|
|
198
198
|
type: Directive,
|
|
199
199
|
args: [{
|
|
200
200
|
selector: '[skyAgGridDataManagerAdapter]',
|
|
@@ -8,8 +8,8 @@ import * as i2 from "@angular/common";
|
|
|
8
8
|
*/
|
|
9
9
|
export class SkyAgGridRowDeleteComponent {
|
|
10
10
|
}
|
|
11
|
-
SkyAgGridRowDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
12
|
-
SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
11
|
+
SkyAgGridRowDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridRowDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
+
SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridRowDeleteComponent, selector: "ng-component", viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], ngImport: i0, template: `
|
|
13
13
|
<ng-template
|
|
14
14
|
let-row
|
|
15
15
|
let-tableWidth="tableWidth()"
|
|
@@ -36,7 +36,7 @@ SkyAgGridRowDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
|
|
|
36
36
|
</div>
|
|
37
37
|
</ng-template>
|
|
38
38
|
`, isInline: true, components: [{ type: i1.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridRowDeleteComponent, decorators: [{
|
|
40
40
|
type: Component,
|
|
41
41
|
args: [{
|
|
42
42
|
template: `
|
|
@@ -208,9 +208,9 @@ export class SkyAgGridRowDeleteDirective {
|
|
|
208
208
|
this.changeDetector.markForCheck();
|
|
209
209
|
}
|
|
210
210
|
}
|
|
211
|
-
SkyAgGridRowDeleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
212
|
-
SkyAgGridRowDeleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
211
|
+
SkyAgGridRowDeleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridRowDeleteDirective, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i1.SkyOverlayService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
212
|
+
SkyAgGridRowDeleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridRowDeleteDirective, selector: "[skyAgGridRowDelete]", inputs: { rowDeleteIds: "rowDeleteIds" }, outputs: { rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", rowDeleteIdsChange: "rowDeleteIdsChange" }, queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true }], ngImport: i0 });
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridRowDeleteDirective, decorators: [{
|
|
214
214
|
type: Directive,
|
|
215
215
|
args: [{
|
|
216
216
|
selector: '[skyAgGridRowDelete]',
|
|
@@ -77,9 +77,9 @@ export class SkyAgGridWrapperComponent {
|
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
81
|
-
SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.
|
|
82
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
80
|
+
SkyAgGridWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridWrapperComponent, deps: [{ token: i1.SkyAgGridAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
+
SkyAgGridWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyAgGridWrapperComponent, selector: "sky-ag-grid-wrapper", queries: [{ propertyName: "agGrid", first: true, predicate: AgGridAngular, descendants: true, static: true }], ngImport: i0, template: "<span\n class=\"nav-anchor\"\n tabindex=\"0\"\n [id]=\"beforeAnchorId\"\n (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n<div\n class=\"sky-ag-grid\"\n tabindex=\"0\"\n [id]=\"gridId\"\n [skyViewkeeper]=\"viewkeeperClasses\"\n (keydown)=\"onGridKeydown($event)\"\n>\n <ng-content></ng-content>\n</div>\n<span\n tabindex=\"0\"\n class=\"nav-anchor\"\n [id]=\"afterAnchorId\"\n (focusin)=\"onAnchorFocus($event)\"\n>\n</span>\n", directives: [{ type: i2.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridWrapperComponent, decorators: [{
|
|
83
83
|
type: Component,
|
|
84
84
|
args: [{
|
|
85
85
|
selector: 'sky-ag-grid-wrapper',
|
|
@@ -31,8 +31,8 @@ import { SkyAgGridCellValidatorModule } from './cell-validator/ag-grid-cell-vali
|
|
|
31
31
|
import * as i0 from "@angular/core";
|
|
32
32
|
export class SkyAgGridModule {
|
|
33
33
|
}
|
|
34
|
-
SkyAgGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.
|
|
35
|
-
SkyAgGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.
|
|
34
|
+
SkyAgGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
35
|
+
SkyAgGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridModule, declarations: [SkyAgGridDataManagerAdapterDirective,
|
|
36
36
|
SkyAgGridRowDeleteComponent,
|
|
37
37
|
SkyAgGridRowDeleteDirective,
|
|
38
38
|
SkyAgGridWrapperComponent], imports: [AgGridModule,
|
|
@@ -54,7 +54,7 @@ SkyAgGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
|
|
|
54
54
|
SkyAgGridRowDeleteComponent,
|
|
55
55
|
SkyAgGridRowDeleteDirective,
|
|
56
56
|
SkyAgGridWrapperComponent] });
|
|
57
|
-
SkyAgGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.
|
|
57
|
+
SkyAgGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridModule, imports: [[
|
|
58
58
|
AgGridModule,
|
|
59
59
|
CommonModule,
|
|
60
60
|
SkyAgGridCellEditorAutocompleteModule,
|
|
@@ -72,7 +72,7 @@ SkyAgGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
|
|
|
72
72
|
SkyInlineDeleteModule,
|
|
73
73
|
SkyViewkeeperModule,
|
|
74
74
|
]] });
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyAgGridModule, decorators: [{
|
|
76
76
|
type: NgModule,
|
|
77
77
|
args: [{
|
|
78
78
|
declarations: [
|