@skyux/ag-grid 7.0.0 → 7.1.1
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/documentation.json +23 -23
- package/package.json +12 -12
package/documentation.json
CHANGED
|
@@ -5016,7 +5016,7 @@
|
|
|
5016
5016
|
{
|
|
5017
5017
|
"fileName": "data-entry-grid-docs-demo-data.ts",
|
|
5018
5018
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-data.ts",
|
|
5019
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5019
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n selected: true,\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n selected: false,\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n selected: false,\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n },\n {\n selected: false,\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n selected: true,\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n selected: false,\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n selected: false,\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5020
5020
|
},
|
|
5021
5021
|
{
|
|
5022
5022
|
"fileName": "data-entry-grid-docs-demo-edit-modal-context.ts",
|
|
@@ -5031,7 +5031,7 @@
|
|
|
5031
5031
|
{
|
|
5032
5032
|
"fileName": "data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
5033
5033
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
5034
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridAutocompleteProperties,\n SkyAgGridDatepickerProperties,\n SkyAgGridService,\n SkyCellType,\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 SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\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 type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n cellEditorParams: {\n skyComponentProperties: {\n maxlength: 10,\n },\n },\n editable: true,\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value) => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n cellEditorParams: {\n skyComponentProperties: {\n min: 18,\n },\n },\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: SkyAgGridDatepickerProperties } => {\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: SkyAgGridAutocompleteProperties } => {\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: SkyAgGridAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAgGridAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n editable: true,\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) =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n editable: true,\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"
|
|
5034
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridAutocompleteProperties,\n SkyAgGridDatepickerProperties,\n SkyAgGridService,\n SkyCellType,\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 SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\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 type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: string): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n cellEditorParams: {\n skyComponentProperties: {\n maxlength: 10,\n },\n },\n editable: true,\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: number): boolean => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n cellEditorParams: {\n skyComponentProperties: {\n min: 18,\n },\n },\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: SkyAgGridDatepickerProperties } => {\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: SkyAgGridAutocompleteProperties } => {\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: SkyAgGridAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAgGridAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n editable: true,\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): boolean =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n editable: true,\n },\n ];\n this.gridData = this.context.gridData;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent): void => 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"
|
|
5035
5035
|
},
|
|
5036
5036
|
{
|
|
5037
5037
|
"fileName": "data-entry-grid-docs-demo.component.html",
|
|
@@ -5041,7 +5041,7 @@
|
|
|
5041
5041
|
{
|
|
5042
5042
|
"fileName": "data-entry-grid-docs-demo.component.ts",
|
|
5043
5043
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.ts",
|
|
5044
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\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: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRenderer: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value) => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\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)
|
|
5044
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\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: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRenderer: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: string): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: number): boolean => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\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): boolean =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Enter a future date',\n },\n },\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\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): void => this.onGridReady(gridReadyEvent),\n };\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(this.searchText);\n const 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"
|
|
5045
5045
|
},
|
|
5046
5046
|
{
|
|
5047
5047
|
"fileName": "data-entry-grid-docs-demo.module.ts",
|
|
@@ -5061,7 +5061,7 @@
|
|
|
5061
5061
|
{
|
|
5062
5062
|
"fileName": "data-manager-data-entry-grid-docs-demo-data.ts",
|
|
5063
5063
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-data.ts",
|
|
5064
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5064
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA: SkyAgGridDemoRow[] = [\n {\n selected: true,\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n selected: false,\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n selected: false,\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n jobTitle: SKY_JOB_TITLES['Sales'][1],\n },\n {\n selected: false,\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n selected: true,\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n selected: false,\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n selected: false,\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5065
5065
|
},
|
|
5066
5066
|
{
|
|
5067
5067
|
"fileName": "data-manager-data-entry-grid-docs-demo-edit-modal-context.ts",
|
|
@@ -5076,7 +5076,7 @@
|
|
|
5076
5076
|
{
|
|
5077
5077
|
"fileName": "data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
5078
5078
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
5079
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridAutocompleteProperties,\n SkyAgGridDatepickerProperties,\n SkyAgGridService,\n SkyCellType,\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 SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\n} from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-edit-modal',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-edit-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridEditModalComponent {\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: 60,\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: SkyAgGridDatepickerProperties } => {\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: SkyAgGridAutocompleteProperties } => {\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: SkyAgGridAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAgGridAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n editable: true,\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) =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: '
|
|
5079
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridAutocompleteProperties,\n SkyAgGridDatepickerProperties,\n SkyAgGridService,\n SkyCellType,\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 SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\n} from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-edit-modal',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-edit-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridEditModalComponent {\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: 60,\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: SkyAgGridDatepickerProperties } => {\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: SkyAgGridAutocompleteProperties } => {\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: SkyAgGridAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAgGridAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n editable: true,\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): boolean =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Enter a future date.',\n },\n },\n editable: true,\n },\n ];\n this.gridData = this.context.gridData;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent): void => 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\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 if (this.gridApi) {\n this.gridApi.refreshCells({ rowNodes: [node] });\n }\n }\n this.changeDetector.markForCheck();\n }\n}\n"
|
|
5080
5080
|
},
|
|
5081
5081
|
{
|
|
5082
5082
|
"fileName": "data-manager-data-entry-grid-docs-demo-filter-modal.component.html",
|
|
@@ -5086,7 +5086,7 @@
|
|
|
5086
5086
|
{
|
|
5087
5087
|
"fileName": "data-manager-data-entry-grid-docs-demo-filter-modal.component.ts",
|
|
5088
5088
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-filter-modal.component.ts",
|
|
5089
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyDataManagerFilterData,\n SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-filter-modal',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-filter-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoFiltersModalComponent {\n public jobTitle = '';\n\n public hideSales = false;\n\n constructor(\n public context: SkyDataManagerFilterModalContext,\n public instance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {\n if (this.context.filterData && this.context.filterData.filters) {\n const filters = this.context.filterData.filters;\n this.jobTitle = filters.jobTitle || 'any';\n this.hideSales = filters.hideSales || false;\n }\n this.changeDetector.markForCheck();\n }\n\n public applyFilters() {\n const result: SkyDataManagerFilterData = {};\n\n result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n result.filters = {\n jobTitle: this.jobTitle,\n hideSales: this.hideSales,\n };\n this.changeDetector.markForCheck();\n\n this.instance.save(result);\n }\n\n public clearAllFilters() {\n this.hideSales = false;\n this.jobTitle = 'any';\n this.changeDetector.markForCheck();\n }\n\n public cancel() {\n this.instance.cancel();\n }\n}\n"
|
|
5089
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyDataManagerFilterData,\n SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-filter-modal',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-filter-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoFiltersModalComponent {\n public jobTitle = '';\n\n public hideSales = false;\n\n constructor(\n public context: SkyDataManagerFilterModalContext,\n public instance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {\n if (this.context.filterData && this.context.filterData.filters) {\n const filters = this.context.filterData.filters;\n this.jobTitle = filters.jobTitle || 'any';\n this.hideSales = filters.hideSales || false;\n }\n this.changeDetector.markForCheck();\n }\n\n public applyFilters(): void {\n const result: SkyDataManagerFilterData = {};\n\n result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n result.filters = {\n jobTitle: this.jobTitle,\n hideSales: this.hideSales,\n };\n this.changeDetector.markForCheck();\n\n this.instance.save(result);\n }\n\n public clearAllFilters(): void {\n this.hideSales = false;\n this.jobTitle = 'any';\n this.changeDetector.markForCheck();\n }\n\n public cancel(): void {\n this.instance.cancel();\n }\n}\n"
|
|
5090
5090
|
},
|
|
5091
5091
|
{
|
|
5092
5092
|
"fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.html",
|
|
@@ -5096,7 +5096,7 @@
|
|
|
5096
5096
|
{
|
|
5097
5097
|
"fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
|
|
5098
5098
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
|
|
5099
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n implements OnInit\n{\n @Input()\n public set items(value:
|
|
5099
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyAgGridDemoRow } from '../basic/data-entry-grid-docs-demo-data';\n\n@Component({\n selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n templateUrl:\n './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n implements OnInit\n{\n @Input()\n public set items(value: SkyAgGridDemoRow[]) {\n this._items = value;\n this.changeDetector.markForCheck();\n if (this.gridApi) {\n this.gridApi.refreshCells();\n }\n }\n\n public viewId = 'dataEntryGridWithDataManagerView';\n\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 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): boolean =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n },\n ];\n\n public dataState = new SkyDataManagerState({});\n\n public columnApi?: ColumnApi;\n public displayedItems: SkyAgGridDemoRow[] = [];\n public gridApi?: GridApi;\n public gridInitialized = false;\n public gridOptions!: GridOptions;\n public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n public isActive = false;\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Data 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\n private _items: SkyAgGridDemoRow[] = [];\n\n constructor(\n private agGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {}\n\n public ngOnInit(): void {\n this.displayedItems = this._items;\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\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.setInitialColumnOrder();\n this.updateData();\n this.changeDetector.detectChanges();\n });\n\n this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n this.isActive = id === this.viewId;\n this.changeDetector.detectChanges();\n });\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 const viewState = this.dataState.getViewStateById(this.viewId);\n const visibleColumns = viewState?.displayedColumnIds || [];\n\n this.columnDefs.sort((col1, col2) => {\n const col1Index = visibleColumns.findIndex(\n (colId: string) => colId === col1.colId\n );\n const 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 onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n if (!rowSelectedEvent.data.selected) {\n this.updateData();\n }\n }\n\n public sortItems(): void {\n const sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n this.columnApi.applyColumnState({\n state: [\n {\n colId: sortOption.propertyName,\n sort: sortOption.descending ? 'desc' : 'asc',\n },\n ],\n });\n }\n }\n\n public searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n let searchedItems = items;\n const searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n let property: keyof typeof item;\n for (property in item) {\n if (\n Object.prototype.hasOwnProperty.call(item, property) &&\n property === 'name'\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\n return searchedItems;\n }\n\n public filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n let filteredItems = items;\n const filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n filteredItems = items.filter((item: SkyAgGridDemoRow) => {\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"
|
|
5100
5100
|
},
|
|
5101
5101
|
{
|
|
5102
5102
|
"fileName": "data-manager-data-entry-grid-docs-demo.component.html",
|
|
@@ -5126,7 +5126,7 @@
|
|
|
5126
5126
|
{
|
|
5127
5127
|
"fileName": "data-entry-grid-docs-demo-data.ts",
|
|
5128
5128
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-data.ts",
|
|
5129
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5129
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n selected: true,\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n selected: false,\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n selected: false,\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n },\n {\n selected: false,\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n selected: true,\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n selected: false,\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n selected: false,\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5130
5130
|
},
|
|
5131
5131
|
{
|
|
5132
5132
|
"fileName": "data-entry-grid-docs-demo-edit-modal-context.ts",
|
|
@@ -5141,7 +5141,7 @@
|
|
|
5141
5141
|
{
|
|
5142
5142
|
"fileName": "data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
5143
5143
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal.component.ts",
|
|
5144
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridAutocompleteProperties,\n SkyAgGridDatepickerProperties,\n SkyAgGridService,\n SkyCellType,\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 SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\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 public gridData: SkyAgGridDemoRow[];\n public gridOptions: GridOptions;\n\n #gridApi: GridApi | undefined;\n #agGridService: SkyAgGridService;\n #changeDetector: ChangeDetectorRef;\n\n constructor(\n public context: SkyDataEntryGridEditModalContext,\n public instance: SkyModalInstance,\n agGridService: SkyAgGridService,\n changeDetector: ChangeDetectorRef\n ) {\n this.#agGridService = agGridService;\n this.#changeDetector = changeDetector;\n\n this.columnDefs = [\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n cellEditorParams: {\n skyComponentProperties: {\n maxlength: 10,\n },\n },\n editable: true,\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value) => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n cellEditorParams: {\n skyComponentProperties: {\n min: 18,\n },\n },\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: SkyAgGridDatepickerProperties } => {\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: SkyAgGridAutocompleteProperties } => {\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: SkyAgGridAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAgGridAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n editable: true,\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) =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n editable: true,\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 #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 #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"
|
|
5144
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyAgGridAutocompleteProperties,\n SkyAgGridDatepickerProperties,\n SkyAgGridService,\n SkyCellType,\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 SKY_DEPARTMENTS,\n SKY_JOB_TITLES,\n SkyAgGridDemoRow,\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 public gridData: SkyAgGridDemoRow[];\n public gridOptions: GridOptions;\n\n #gridApi: GridApi | undefined;\n #agGridService: SkyAgGridService;\n #changeDetector: ChangeDetectorRef;\n\n constructor(\n public context: SkyDataEntryGridEditModalContext,\n public instance: SkyModalInstance,\n agGridService: SkyAgGridService,\n changeDetector: ChangeDetectorRef\n ) {\n this.#agGridService = agGridService;\n this.#changeDetector = changeDetector;\n\n this.columnDefs = [\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: string): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n cellEditorParams: {\n skyComponentProperties: {\n maxlength: 10,\n },\n },\n editable: true,\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: number): boolean => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n cellEditorParams: {\n skyComponentProperties: {\n min: 18,\n },\n },\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: SkyAgGridDatepickerProperties } => {\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: SkyAgGridAutocompleteProperties } => {\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: SkyAgGridAutocompleteProperties } => {\n const selectedDepartment: string =\n params.data &&\n params.data.department &&\n params.data.department.name;\n const editParams: {\n skyComponentProperties: SkyAgGridAutocompleteProperties;\n } = { skyComponentProperties: { data: [] } };\n\n if (selectedDepartment) {\n editParams.skyComponentProperties.data =\n SKY_JOB_TITLES[selectedDepartment];\n }\n return editParams;\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n editable: true,\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): boolean =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Please enter a future date',\n },\n },\n editable: true,\n },\n ];\n this.gridData = this.context.gridData;\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent): void => 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 #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 #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"
|
|
5145
5145
|
},
|
|
5146
5146
|
{
|
|
5147
5147
|
"fileName": "data-entry-grid-docs-demo.component.html",
|
|
@@ -5151,7 +5151,7 @@
|
|
|
5151
5151
|
{
|
|
5152
5152
|
"fileName": "data-entry-grid-docs-demo.component.ts",
|
|
5153
5153
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo.component.ts",
|
|
5154
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\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';\nimport { InlineHelpComponent } from './inline-help.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: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRenderer: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value) => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.#endDateFormatter,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\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)
|
|
5154
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\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';\nimport { InlineHelpComponent } from './inline-help.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: ColDef[] = [\n {\n field: 'selected',\n type: SkyCellType.RowSelector,\n },\n {\n colId: 'context',\n headerName: '',\n maxWidth: 50,\n sortable: false,\n cellRenderer: SkyDataEntryGridContextMenuComponent,\n },\n {\n field: 'name',\n headerName: 'Name',\n type: SkyCellType.Text,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: string): boolean => String(value).length <= 10,\n validatorMessage: `Value exceeds maximum length`,\n },\n },\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'age',\n headerName: 'Age',\n type: SkyCellType.Number,\n cellRendererParams: {\n skyComponentProperties: {\n validator: (value: number): boolean => value >= 18,\n validatorMessage: `Age must be 18+`,\n },\n },\n maxWidth: 60,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'startDate',\n headerName: 'Start date',\n type: SkyCellType.Date,\n sort: 'asc',\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'endDate',\n headerName: 'End date',\n type: SkyCellType.Date,\n valueFormatter: this.#endDateFormatter,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'department',\n headerName: 'Department',\n type: SkyCellType.Autocomplete,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n field: 'jobTitle',\n headerName: 'Title',\n type: SkyCellType.Autocomplete,\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n {\n colId: 'validationCurrency',\n field: 'validationCurrency',\n headerName: 'Validation currency',\n type: [SkyCellType.CurrencyValidator],\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\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): boolean =>\n !!value && value > new Date(1985, 9, 26),\n validatorMessage: 'Enter a future date',\n },\n },\n headerComponentParams: {\n inlineHelpComponent: InlineHelpComponent,\n },\n },\n ];\n\n public gridApi: GridApi | undefined;\n public gridOptions: GridOptions;\n public searchText = '';\n public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n\n #agGridService: SkyAgGridService;\n #modalService: SkyModalService;\n #changeDetection: ChangeDetectorRef;\n\n constructor(\n agGridService: SkyAgGridService,\n modalService: SkyModalService,\n changeDetection: ChangeDetectorRef\n ) {\n this.#agGridService = agGridService;\n this.#modalService = modalService;\n this.#changeDetection = changeDetection;\n\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n };\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(this.searchText);\n const displayedRowCount = this.gridApi.getDisplayedRowCount();\n if (displayedRowCount > 0) {\n this.gridApi.hideOverlay();\n } else {\n this.gridApi.showNoRowsOverlay();\n }\n }\n }\n\n #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"
|
|
5155
5155
|
},
|
|
5156
5156
|
{
|
|
5157
5157
|
"fileName": "data-entry-grid-docs-demo.module.ts",
|
|
@@ -5166,12 +5166,12 @@
|
|
|
5166
5166
|
{
|
|
5167
5167
|
"fileName": "inline-help.component.ts",
|
|
5168
5168
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/inline-help.component.ts",
|
|
5169
|
-
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n selector: 'app-inline-help',\n templateUrl: './inline-help.component.html',\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n readonly #displayName: string;\n\n constructor(headerInfo: SkyAgGridHeaderInfo) {\n this.#displayName = headerInfo.displayName;\n }\n\n public onHelpClick(): void {\n alert(`Help was clicked for ${this.#displayName}.`);\n }\n}\n"
|
|
5169
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n selector: 'app-inline-help',\n templateUrl: './inline-help.component.html',\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n readonly #displayName: string | undefined;\n\n constructor(headerInfo: SkyAgGridHeaderInfo) {\n this.#displayName = headerInfo.displayName;\n }\n\n public onHelpClick(): void {\n alert(`Help was clicked for ${this.#displayName}.`);\n }\n}\n"
|
|
5170
5170
|
},
|
|
5171
5171
|
{
|
|
5172
5172
|
"fileName": "basic-multiselect-data-grid-docs-demo-data.ts",
|
|
5173
5173
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic-multiselect/basic-multiselect-data-grid-docs-demo-data.ts",
|
|
5174
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5174
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n selected: false,\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n selected: false,\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n selected: false,\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n },\n {\n selected: false,\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n selected: true,\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n selected: false,\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n selected: false,\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5175
5175
|
},
|
|
5176
5176
|
{
|
|
5177
5177
|
"fileName": "basic-multiselect-data-grid-docs-demo.component.html",
|
|
@@ -5181,7 +5181,7 @@
|
|
|
5181
5181
|
{
|
|
5182
5182
|
"fileName": "basic-multiselect-data-grid-docs-demo.component.ts",
|
|
5183
5183
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic-multiselect/basic-multiselect-data-grid-docs-demo.component.ts",
|
|
5184
|
-
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-multiselect-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-basic-multiselect-data-grid-docs-demo',\n templateUrl: './basic-multiselect-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicMultiselectDataGridDemoComponent {\n public multiselectColumnDefs: 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 gridApi: GridApi | undefined;\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public gridOptions: GridOptions;\n public searchText = '';\n\n constructor(private agGridService: SkyAgGridService) {\n this.gridOptions = {\n columnDefs: this.multiselectColumnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n rowSelection: 'multiple',\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\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"
|
|
5184
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-multiselect-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-basic-multiselect-data-grid-docs-demo',\n templateUrl: './basic-multiselect-data-grid-docs-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicMultiselectDataGridDemoComponent {\n public multiselectColumnDefs: 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 gridApi: GridApi | undefined;\n public gridData = SKY_AG_GRID_DEMO_DATA;\n public gridOptions: GridOptions;\n public searchText = '';\n\n constructor(private agGridService: SkyAgGridService) {\n this.gridOptions = {\n columnDefs: this.multiselectColumnDefs,\n onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n rowSelection: 'multiple',\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\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"
|
|
5185
5185
|
},
|
|
5186
5186
|
{
|
|
5187
5187
|
"fileName": "basic-multiselect-data-grid-docs-demo.module.ts",
|
|
@@ -5191,7 +5191,7 @@
|
|
|
5191
5191
|
{
|
|
5192
5192
|
"fileName": "basic-data-grid-docs-demo-data.ts",
|
|
5193
5193
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo-data.ts",
|
|
5194
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5194
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n },\n {\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5195
5195
|
},
|
|
5196
5196
|
{
|
|
5197
5197
|
"fileName": "basic-data-grid-docs-demo.component.html",
|
|
@@ -5201,7 +5201,7 @@
|
|
|
5201
5201
|
{
|
|
5202
5202
|
"fileName": "basic-data-grid-docs-demo.component.ts",
|
|
5203
5203
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.ts",
|
|
5204
|
-
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\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: ColDef[] = [\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 = '';\n\n constructor(private agGridService: SkyAgGridService) {\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n rowSelection: 'single',\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\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"
|
|
5204
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n ColDef,\n GridApi,\n GridOptions,\n GridReadyEvent,\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: ColDef[] = [\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 = '';\n\n constructor(private agGridService: SkyAgGridService) {\n this.gridOptions = {\n columnDefs: this.columnDefs,\n onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n rowSelection: 'single',\n };\n this.gridOptions = this.agGridService.getGridOptions({\n gridOptions: this.gridOptions,\n });\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\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"
|
|
5205
5205
|
},
|
|
5206
5206
|
{
|
|
5207
5207
|
"fileName": "basic-data-grid-docs-demo.module.ts",
|
|
@@ -5211,7 +5211,7 @@
|
|
|
5211
5211
|
{
|
|
5212
5212
|
"fileName": "data-manager-multiselect-data-grid-docs-demo-data.ts",
|
|
5213
5213
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo-data.ts",
|
|
5214
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5214
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n selected: false,\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n selected: false,\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n selected: false,\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n jobTitle: SKY_JOB_TITLES['Sales'][1],\n },\n {\n selected: false,\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n selected: true,\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n selected: false,\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n selected: false,\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5215
5215
|
},
|
|
5216
5216
|
{
|
|
5217
5217
|
"fileName": "data-manager-multiselect-data-grid-docs-demo-filter-modal.component.html",
|
|
@@ -5231,7 +5231,7 @@
|
|
|
5231
5231
|
{
|
|
5232
5232
|
"fileName": "data-manager-multiselect-data-grid-docs-demo-view-grid.component.ts",
|
|
5233
5233
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo-view-grid.component.ts",
|
|
5234
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerColumnPickerOption,\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n SkyDataViewState,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n selector: 'app-data-manager-multiselect-data-grid-docs-demo-view-grid',\n templateUrl:\n './data-manager-multiselect-data-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerMultiselectDataGridDocsDemoViewGridComponent\n implements OnInit\n{\n @Input()\n public items:
|
|
5234
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerColumnPickerOption,\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n SkyDataViewState,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyAgGridDemoRow } from './data-manager-multiselect-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-data-manager-multiselect-data-grid-docs-demo-view-grid',\n templateUrl:\n './data-manager-multiselect-data-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerMultiselectDataGridDocsDemoViewGridComponent\n implements OnInit\n{\n @Input()\n public items: SkyAgGridDemoRow[] = [];\n\n public viewId = 'dataGridMultiselectWithDataManagerView';\n\n public columnDefinitions: 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 private columnPickerOptions: SkyDataManagerColumnPickerOption[] = [\n {\n id: 'selected',\n label: '',\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 columnApi?: ColumnApi;\n public displayedItems: SkyAgGridDemoRow[] = [];\n public gridApi?: GridApi;\n public isGridReadyForInitialization = false;\n public gridOptions!: GridOptions;\n public noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n public isViewActive = false;\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Data Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n multiselectToolbarEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: this.columnPickerOptions,\n };\n\n constructor(\n private skyAgGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {}\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.skyAgGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefinitions,\n rowSelection: 'multiple',\n onGridReady: this.onGridReady.bind(this),\n },\n });\n\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.updateColumnOrder();\n this.isGridReadyForInitialization = true;\n this.updateDisplayedItems();\n this.changeDetector.detectChanges();\n });\n\n this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n this.isViewActive = id === this.viewId;\n this.changeDetector.detectChanges();\n });\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.columnApi = gridReadyEvent.columnApi;\n this.updateDisplayedItems();\n }\n\n public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n if (!rowSelectedEvent.data.selected) {\n this.updateDisplayedItems();\n }\n }\n\n private searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n let searchedItems = items;\n const searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n let property: keyof typeof item;\n\n for (property in item) {\n if (\n Object.prototype.hasOwnProperty.call(item, property) &&\n property === 'name'\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 private filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n let filteredItems = items;\n const filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n filteredItems = items.filter((item: SkyAgGridDemoRow) => {\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 private updateColumnOrder(): void {\n const viewState: SkyDataViewState | undefined =\n this.dataState.getViewStateById(this.viewId);\n\n if (viewState) {\n this.columnDefinitions.sort((columnDefinition1, columnDefinition2) => {\n const displayedColumnIdIndex1: number =\n viewState.displayedColumnIds.findIndex(\n (aDisplayedColumnId: string) =>\n aDisplayedColumnId === columnDefinition1.field\n );\n const displayedColumnIdIndex2: number =\n viewState.displayedColumnIds.findIndex(\n (aDisplayedColumnId: string) =>\n aDisplayedColumnId === columnDefinition2.field\n );\n\n if (displayedColumnIdIndex1 === -1) {\n return 0;\n } else if (displayedColumnIdIndex2 === -1) {\n return 0;\n } else {\n return displayedColumnIdIndex1 - displayedColumnIdIndex2;\n }\n });\n this.changeDetector.markForCheck();\n }\n }\n\n private updateDisplayedItems(): void {\n const sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n this.columnApi.applyColumnState({\n state: [\n {\n colId: sortOption.propertyName,\n sort: sortOption.descending ? 'desc' : 'asc',\n },\n ],\n });\n }\n\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}\n"
|
|
5235
5235
|
},
|
|
5236
5236
|
{
|
|
5237
5237
|
"fileName": "data-manager-multiselect-data-grid-docs-demo.component.html",
|
|
@@ -5251,7 +5251,7 @@
|
|
|
5251
5251
|
{
|
|
5252
5252
|
"fileName": "data-manager-data-grid-docs-demo-data.ts",
|
|
5253
5253
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo-data.ts",
|
|
5254
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5254
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n jobTitle: SKY_JOB_TITLES['Sales'][1],\n },\n {\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5255
5255
|
},
|
|
5256
5256
|
{
|
|
5257
5257
|
"fileName": "data-manager-data-grid-docs-demo-filter-modal.component.html",
|
|
@@ -5261,7 +5261,7 @@
|
|
|
5261
5261
|
{
|
|
5262
5262
|
"fileName": "data-manager-data-grid-docs-demo-filter-modal.component.ts",
|
|
5263
5263
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo-filter-modal.component.ts",
|
|
5264
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyDataManagerFilterData,\n SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n selector: 'app-data-manager-data-grid-docs-demo-filter-modal',\n templateUrl: './data-manager-data-grid-docs-demo-filter-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoFiltersModalComponent {\n public jobTitle = '';\n\n public hideSales = false;\n\n constructor(\n public context: SkyDataManagerFilterModalContext,\n public instance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {\n if (this.context.filterData && this.context.filterData.filters) {\n const filters = this.context.filterData.filters;\n this.jobTitle = filters.jobTitle || 'any';\n this.hideSales = filters.hideSales || false;\n }\n }\n\n public applyFilters() {\n const result: SkyDataManagerFilterData = {};\n\n result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n result.filters = {\n jobTitle: this.jobTitle,\n hideSales: this.hideSales,\n };\n this.changeDetector.markForCheck();\n\n this.instance.save(result);\n }\n\n public clearAllFilters() {\n this.hideSales = false;\n this.jobTitle = 'any';\n }\n\n public cancel() {\n this.instance.cancel();\n }\n}\n"
|
|
5264
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n} from '@angular/core';\nimport {\n SkyDataManagerFilterData,\n SkyDataManagerFilterModalContext,\n} from '@skyux/data-manager';\nimport { SkyModalInstance } from '@skyux/modals';\n\n@Component({\n selector: 'app-data-manager-data-grid-docs-demo-filter-modal',\n templateUrl: './data-manager-data-grid-docs-demo-filter-modal.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoFiltersModalComponent {\n public jobTitle = '';\n\n public hideSales = false;\n\n constructor(\n public context: SkyDataManagerFilterModalContext,\n public instance: SkyModalInstance,\n private changeDetector: ChangeDetectorRef\n ) {\n if (this.context.filterData && this.context.filterData.filters) {\n const filters = this.context.filterData.filters;\n this.jobTitle = filters.jobTitle || 'any';\n this.hideSales = filters.hideSales || false;\n }\n }\n\n public applyFilters(): void {\n const result: SkyDataManagerFilterData = {};\n\n result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n result.filters = {\n jobTitle: this.jobTitle,\n hideSales: this.hideSales,\n };\n this.changeDetector.markForCheck();\n\n this.instance.save(result);\n }\n\n public clearAllFilters(): void {\n this.hideSales = false;\n this.jobTitle = 'any';\n }\n\n public cancel(): void {\n this.instance.cancel();\n }\n}\n"
|
|
5265
5265
|
},
|
|
5266
5266
|
{
|
|
5267
5267
|
"fileName": "data-manager-data-grid-docs-demo-view-grid.component.html",
|
|
@@ -5271,7 +5271,7 @@
|
|
|
5271
5271
|
{
|
|
5272
5272
|
"fileName": "data-manager-data-grid-docs-demo-view-grid.component.ts",
|
|
5273
5273
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo-view-grid.component.ts",
|
|
5274
|
-
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerColumnPickerOption,\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n SkyDataViewState,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\n@Component({\n selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoViewGridComponent implements OnInit {\n @Input()\n public items:
|
|
5274
|
+
"rawContents": "import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n Input,\n OnInit,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\nimport {\n SkyDataManagerColumnPickerOption,\n SkyDataManagerService,\n SkyDataManagerState,\n SkyDataViewConfig,\n SkyDataViewState,\n} from '@skyux/data-manager';\n\nimport {\n ColDef,\n ColumnApi,\n GridApi,\n GridOptions,\n GridReadyEvent,\n RowSelectedEvent,\n ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SkyAgGridDemoRow } from './data-manager-data-grid-docs-demo-data';\n\n@Component({\n selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoViewGridComponent implements OnInit {\n @Input()\n public items: SkyAgGridDemoRow[] = [];\n\n public viewId = 'dataGridWithDataManagerView';\n\n public columnDefinitions: ColDef[] = [\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 private columnPickerOptions: SkyDataManagerColumnPickerOption[] = [\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 columnApi?: ColumnApi;\n public displayedItems: SkyAgGridDemoRow[] = [];\n public gridApi?: GridApi;\n public isGridReadyForInitialization = false;\n public gridOptions!: GridOptions;\n public noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n public isViewActive = false;\n\n public viewConfig: SkyDataViewConfig = {\n id: this.viewId,\n name: 'Data Grid View',\n icon: 'table',\n searchEnabled: true,\n sortEnabled: true,\n columnPickerEnabled: true,\n filterButtonEnabled: true,\n columnOptions: this.columnPickerOptions,\n };\n\n constructor(\n private skyAgGridService: SkyAgGridService,\n private changeDetector: ChangeDetectorRef,\n private dataManagerService: SkyDataManagerService\n ) {}\n\n public ngOnInit(): void {\n this.displayedItems = this.items;\n\n this.dataManagerService.initDataView(this.viewConfig);\n\n this.gridOptions = this.skyAgGridService.getGridOptions({\n gridOptions: {\n columnDefs: this.columnDefinitions,\n rowSelection: 'single',\n onGridReady: this.onGridReady.bind(this),\n },\n });\n\n this.dataManagerService\n .getDataStateUpdates(this.viewId)\n .subscribe((state) => {\n this.dataState = state;\n this.updateColumnOrder();\n this.isGridReadyForInitialization = true;\n this.updateDisplayedItems();\n this.changeDetector.detectChanges();\n });\n\n this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n this.isViewActive = id === this.viewId;\n this.changeDetector.detectChanges();\n });\n }\n\n public onGridReady(gridReadyEvent: GridReadyEvent): void {\n this.gridApi = gridReadyEvent.api;\n this.gridApi.sizeColumnsToFit();\n this.columnApi = gridReadyEvent.columnApi;\n this.updateDisplayedItems();\n }\n\n public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n if (!rowSelectedEvent.data.selected) {\n this.updateDisplayedItems();\n }\n }\n\n private searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n let searchedItems = items;\n const searchText = this.dataState && this.dataState.searchText;\n\n if (searchText) {\n searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n let property: keyof typeof item;\n\n for (property in item) {\n if (\n Object.prototype.hasOwnProperty.call(item, property) &&\n property === 'name'\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 private filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n let filteredItems = items;\n const filterData = this.dataState && this.dataState.filterData;\n\n if (filterData && filterData.filters) {\n const filters = filterData.filters;\n filteredItems = items.filter((item: SkyAgGridDemoRow) => {\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 private updateColumnOrder(): void {\n const viewState: SkyDataViewState | undefined =\n this.dataState.getViewStateById(this.viewId);\n\n if (viewState) {\n this.columnDefinitions.sort((columnDefinition1, columnDefinition2) => {\n const displayedColumnIdIndex1: number =\n viewState.displayedColumnIds.findIndex(\n (aDisplayedColumnId: string) =>\n aDisplayedColumnId === columnDefinition1.field\n );\n const displayedColumnIdIndex2: number =\n viewState.displayedColumnIds.findIndex(\n (aDisplayedColumnId: string) =>\n aDisplayedColumnId === columnDefinition2.field\n );\n\n if (displayedColumnIdIndex1 === -1) {\n return 0;\n } else if (displayedColumnIdIndex2 === -1) {\n return 0;\n } else {\n return displayedColumnIdIndex1 - displayedColumnIdIndex2;\n }\n });\n this.changeDetector.markForCheck();\n }\n }\n\n private updateDisplayedItems(): void {\n const sortOption = this.dataState.activeSortOption;\n if (this.columnApi && sortOption) {\n this.columnApi.applyColumnState({\n state: [\n {\n colId: sortOption.propertyName,\n sort: sortOption.descending ? 'desc' : 'asc',\n },\n ],\n });\n }\n\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}\n"
|
|
5275
5275
|
},
|
|
5276
5276
|
{
|
|
5277
5277
|
"fileName": "data-manager-data-grid-docs-demo.component.html",
|
|
@@ -5291,7 +5291,7 @@
|
|
|
5291
5291
|
{
|
|
5292
5292
|
"fileName": "data-grid-demo-data.ts",
|
|
5293
5293
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/data-grid-demo-data.ts",
|
|
5294
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5294
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n },\n {\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5295
5295
|
},
|
|
5296
5296
|
{
|
|
5297
5297
|
"fileName": "data-grid-demo.component.html",
|
|
@@ -5316,12 +5316,12 @@
|
|
|
5316
5316
|
{
|
|
5317
5317
|
"fileName": "inline-help.component.ts",
|
|
5318
5318
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/inline-help.component.ts",
|
|
5319
|
-
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n selector: 'app-inline-help',\n templateUrl: './inline-help.component.html',\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n readonly #displayName: string;\n\n constructor(headerInfo: SkyAgGridHeaderInfo) {\n this.#displayName = headerInfo.displayName;\n }\n\n public onHelpClick(): void {\n alert(`Help was clicked for ${this.#displayName}.`);\n }\n}\n"
|
|
5319
|
+
"rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n selector: 'app-inline-help',\n templateUrl: './inline-help.component.html',\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n readonly #displayName: string | undefined;\n\n constructor(headerInfo: SkyAgGridHeaderInfo) {\n this.#displayName = headerInfo.displayName;\n }\n\n public onHelpClick(): void {\n alert(`Help was clicked for ${this.#displayName}.`);\n }\n}\n"
|
|
5320
5320
|
},
|
|
5321
5321
|
{
|
|
5322
5322
|
"fileName": "top-scroll-data-grid-demo-data.ts",
|
|
5323
5323
|
"filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-demo-data.ts",
|
|
5324
|
-
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected
|
|
5324
|
+
"rawContents": "export interface SkyAutocompleteOption {\n id: string;\n name: string;\n}\n\nexport const SKY_DEPARTMENTS = [\n {\n id: '1',\n name: 'Marketing',\n },\n {\n id: '2',\n name: 'Sales',\n },\n {\n id: '3',\n name: 'Engineering',\n },\n {\n id: '4',\n name: 'Customer Support',\n },\n];\n\nexport const SKY_JOB_TITLES: { [name: string]: SkyAutocompleteOption[] } = {\n Marketing: [\n {\n id: '1',\n name: 'Social Media Coordinator',\n },\n {\n id: '2',\n name: 'Blog Manager',\n },\n {\n id: '3',\n name: 'Events Manager',\n },\n ],\n Sales: [\n {\n id: '4',\n name: 'Business Development Representative',\n },\n {\n id: '5',\n name: 'Account Executive',\n },\n ],\n Engineering: [\n {\n id: '6',\n name: 'Software Engineer',\n },\n {\n id: '7',\n name: 'Senior Software Engineer',\n },\n {\n id: '8',\n name: 'Principal Software Engineer',\n },\n {\n id: '9',\n name: 'UX Designer',\n },\n {\n id: '10',\n name: 'Product Manager',\n },\n ],\n 'Customer Support': [\n {\n id: '11',\n name: 'Customer Support Representative',\n },\n {\n id: '12',\n name: 'Account Manager',\n },\n {\n id: '13',\n name: 'Customer Support Specialist',\n },\n ],\n};\n\nexport interface SkyAgGridDemoRow {\n selected?: boolean;\n name: string;\n age: number;\n startDate: Date;\n endDate?: Date;\n department: SkyAutocompleteOption;\n jobTitle?: SkyAutocompleteOption;\n}\n\nexport const SKY_AG_GRID_DEMO_DATA = [\n {\n selected: true,\n name: 'Billy Bob',\n age: 55,\n startDate: new Date('12/1/1994'),\n department: SKY_DEPARTMENTS[3],\n jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n },\n {\n selected: false,\n name: 'Jane Deere',\n age: 33,\n startDate: new Date('7/15/2009'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][2],\n },\n {\n selected: false,\n name: 'John Doe',\n age: 38,\n startDate: new Date('9/1/2017'),\n endDate: new Date('9/30/2017'),\n department: SKY_DEPARTMENTS[1],\n },\n {\n selected: false,\n name: 'David Smith',\n age: 51,\n startDate: new Date('1/1/2012'),\n endDate: new Date('6/15/2018'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][4],\n },\n {\n selected: true,\n name: 'Emily Johnson',\n age: 41,\n startDate: new Date('1/15/2014'),\n department: SKY_DEPARTMENTS[0],\n jobTitle: SKY_JOB_TITLES['Marketing'][2],\n },\n {\n selected: false,\n name: 'Nicole Davidson',\n age: 22,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][0],\n },\n {\n selected: false,\n name: 'Carl Roberts',\n age: 23,\n startDate: new Date('11/1/2019'),\n department: SKY_DEPARTMENTS[2],\n jobTitle: SKY_JOB_TITLES['Engineering'][3],\n },\n];\n"
|
|
5325
5325
|
},
|
|
5326
5326
|
{
|
|
5327
5327
|
"fileName": "top-scroll-data-grid-demo.component.html",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/ag-grid",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -35,17 +35,17 @@
|
|
|
35
35
|
"@angular/common": "^14.2.11",
|
|
36
36
|
"@angular/core": "^14.2.11",
|
|
37
37
|
"@angular/forms": "^14.2.11",
|
|
38
|
-
"@skyux/autonumeric": "7.
|
|
39
|
-
"@skyux/core": "7.
|
|
40
|
-
"@skyux/data-manager": "7.
|
|
41
|
-
"@skyux/datetime": "7.
|
|
42
|
-
"@skyux/forms": "7.
|
|
43
|
-
"@skyux/i18n": "7.
|
|
44
|
-
"@skyux/indicators": "7.
|
|
45
|
-
"@skyux/layout": "7.
|
|
46
|
-
"@skyux/lookup": "7.
|
|
47
|
-
"@skyux/popovers": "7.
|
|
48
|
-
"@skyux/theme": "7.
|
|
38
|
+
"@skyux/autonumeric": "7.1.1",
|
|
39
|
+
"@skyux/core": "7.1.1",
|
|
40
|
+
"@skyux/data-manager": "7.1.1",
|
|
41
|
+
"@skyux/datetime": "7.1.1",
|
|
42
|
+
"@skyux/forms": "7.1.1",
|
|
43
|
+
"@skyux/i18n": "7.1.1",
|
|
44
|
+
"@skyux/indicators": "7.1.1",
|
|
45
|
+
"@skyux/layout": "7.1.1",
|
|
46
|
+
"@skyux/lookup": "7.1.1",
|
|
47
|
+
"@skyux/popovers": "7.1.1",
|
|
48
|
+
"@skyux/theme": "7.1.1",
|
|
49
49
|
"ag-grid-angular": "^28.2.1",
|
|
50
50
|
"ag-grid-community": "^28.2.1"
|
|
51
51
|
},
|