@skyux/ag-grid 5.9.3 → 5.9.6

package/documentation.json

@@ -4071,7 +4071,7 @@
     {
       "fileName": "data-entry-grid-docs-demo.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.ts",
-      "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  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 = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      colId: 'context',\n      headerName: '',\n      maxWidth: 50,\n      sortable: false,\n      cellRendererFramework: SkyDataEntryGridContextMenuComponent,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n      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) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private modalService: SkyModalService,\n    private changeDetection: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      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"
+      "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  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 = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      colId: 'context',\n      headerName: '',\n      maxWidth: 50,\n      sortable: false,\n      cellRendererFramework: SkyDataEntryGridContextMenuComponent,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n      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) => !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private modalService: SkyModalService,\n    private changeDetection: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent) => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      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"
     },
     {
       "fileName": "data-entry-grid-docs-demo.module.ts",
@@ -4126,7 +4126,7 @@
     {
       "fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-view-grid.component.ts",
-      "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: any[]) {\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) => !!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: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\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: any[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\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: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\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: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "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: any[]) {\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) => !!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: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\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: any[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\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: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\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: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-entry-grid-docs-demo.component.html",
@@ -4156,7 +4156,7 @@
     {
       "fileName": "basic-data-grid-docs-demo.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\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 = [\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  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      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"
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\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 = [\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  public noRowsTemplate: string;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(searchText);\n      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"
     },
     {
       "fileName": "basic-data-grid-docs-demo.module.ts",
@@ -4186,7 +4186,7 @@
     {
       "fileName": "data-manager-data-grid-docs-demo-view-grid.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-view-grid.component.ts",
-      "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-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridsDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: any[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\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\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\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  };\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  }\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: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "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-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridsDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: any[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\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\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: any[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate: string;\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  };\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\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: any[]): any[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: any) {\n        let property: any;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            (property === 'name' || property === 'description')\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  public filterItems(items: any[]): any[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: any) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo.component.html",

package/esm2015/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.js

@@ -103,20 +103,10 @@ export class SkyAgGridDataManagerAdapterDirective {
             .subscribe((value) => {
             this.updateColumnsInCurrentDataState(value.columnApi);
         });
-        let currentColumns;
-        agGrid.dragStarted
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((value) => {
-            currentColumns = this.getColumnOrder(value.columnApi);
-        });
         agGrid.dragStopped
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            const newColumns = this.getColumnOrder(value.columnApi);
-            const hasChanged = currentColumns.findIndex((colId, i) => colId !== newColumns[i]);
-            if (hasChanged > -1) {
-                this.updateColumnsInCurrentDataState(value.columnApi);
-            }
+            this.updateColumnsInCurrentDataState(value.columnApi);
         });
         agGrid.rowSelected
             .pipe(takeUntil(this.ngUnsubscribe))
@@ -159,14 +149,17 @@ export class SkyAgGridDataManagerAdapterDirective {
     updateColumnsInCurrentDataState(columnApi) {
         const columnOrder = this.getColumnOrder(columnApi);
         const viewState = this.currentDataState.getViewStateById(this.viewConfig.id);
-        viewState.displayedColumnIds = columnOrder;
-        this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+        if (viewState.displayedColumnIds.length !== columnOrder.length ||
+            viewState.displayedColumnIds.some((col, i) => col !== columnOrder[i])) {
+            viewState.displayedColumnIds = columnOrder;
+            this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+        }
     }
     getColumnOrder(columnApi) {
         return columnApi
-            .getAllGridColumns()
-            .filter((col) => col.isVisible())
-            .map((col) => col.getColDef().colId);
+            .getColumnState()
+            .filter((state) => !state.hide)
+            .map((state) => state.colId);
     }
     displayColumns(dataState) {
         const agGrid = this.currentAgGrid;
@@ -176,12 +169,16 @@ export class SkyAgGridDataManagerAdapterDirective {
         if (viewState.displayedColumnIds) {
             displayedColumnIds = viewState.displayedColumnIds;
         }
-        const columns = agGrid.columnApi.getAllColumns();
-        for (const column of columns) {
-            const colId = column.getColId();
-            const colIndex = displayedColumnIds.indexOf(colId);
-            agGrid.columnApi.setColumnVisible(colId, colIndex !== -1);
-            agGrid.columnApi.moveColumn(colId, colIndex);
+        const columnOrder = this.getColumnOrder(agGrid.columnApi);
+        if (displayedColumnIds.length !== columnOrder.length ||
+            displayedColumnIds.some((col, i) => col !== columnOrder[i])) {
+            const hideColumns = agGrid.columnApi
+                .getColumnState()
+                .map((col) => col.colId)
+                .filter((colId) => !displayedColumnIds.includes(colId));
+            agGrid.columnApi.setColumnsVisible(hideColumns, false);
+            agGrid.columnApi.setColumnsVisible(displayedColumnIds, true);
+            agGrid.columnApi.moveColumns(displayedColumnIds, 0);
         }
     }
     selectAll() {

package/esm2015/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"ag-grid-data-manager-adapter.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectorRef,\n  ContentChildren,\n  Directive,\n  Input,\n  OnDestroy,\n  QueryList,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerSortOption,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { AgGridAngular } from 'ag-grid-angular';\nimport {\n  ColumnApi,\n  ColumnMovedEvent,\n  ColumnState,\n  DragStartedEvent,\n  DragStoppedEvent,\n  RowSelectedEvent,\n} from 'ag-grid-community';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { SkyAgGridWrapperComponent } from './ag-grid-wrapper.component';\n\n/**\n * @internal\n */\n@Directive({\n  selector: '[skyAgGridDataManagerAdapter]',\n})\nexport class SkyAgGridDataManagerAdapterDirective\n  implements AfterContentInit, OnDestroy\n{\n  @Input()\n  public viewId: string;\n\n  @ContentChildren(AgGridAngular, { descendants: true })\n  public agGridList: QueryList<AgGridAngular>;\n\n  @ContentChildren(SkyAgGridWrapperComponent, { descendants: true })\n  public skyAgGridWrapperList: QueryList<SkyAgGridWrapperComponent>;\n\n  private currentAgGrid: AgGridAngular;\n  private currentDataState: SkyDataManagerState;\n  private currentSkyAgGridWrapper: SkyAgGridWrapperComponent;\n  private dataStateSub: Subscription;\n  private viewConfig: SkyDataViewConfig;\n  private ngUnsubscribe = new Subject();\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerSvc: SkyDataManagerService\n  ) {}\n\n  public ngAfterContentInit(): void {\n    this.dataManagerSvc.setViewkeeperClasses(this.viewId, ['.ag-header']);\n\n    this.viewConfig = this.dataManagerSvc.getViewById(this.viewId);\n    this.checkForAgGrid();\n    this.checkForSkyAgGridWrapper();\n\n    this.agGridList.changes\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => this.checkForAgGrid());\n\n    this.skyAgGridWrapperList.changes\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => this.checkForSkyAgGridWrapper());\n  }\n\n  public ngOnDestroy() {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n\n  private checkForAgGrid(): void {\n    const agGridCount = this.agGridList.length;\n\n    /* istanbul ignore else */\n    if (agGridCount === 0) {\n      this.unregisterAgGrid();\n    } else if (this.agGridList.first !== this.currentAgGrid) {\n      this.registerAgGrid();\n    }\n\n    if (agGridCount > 1) {\n      console.warn(\n        'More than one ag-grid child component was found. Using the first ag-Grid.'\n      );\n    }\n  }\n\n  private checkForSkyAgGridWrapper(): void {\n    const skyAgGridWrapperCount = this.skyAgGridWrapperList.length;\n\n    /* istanbul ignore else */\n    if (skyAgGridWrapperCount === 0) {\n      this.unregisterSkyAgGridWrapper();\n    } else if (\n      this.skyAgGridWrapperList.first !== this.currentSkyAgGridWrapper\n    ) {\n      this.registerSkyAgGridWrapper();\n    }\n\n    if (skyAgGridWrapperCount > 1) {\n      console.warn(\n        'More than one ag-grid child component was found. Using the first ag-Grid.'\n      );\n    }\n  }\n\n  private unregisterAgGrid(): void {\n    this.currentAgGrid = undefined;\n\n    /* istanbul ignore if */\n    if (this.dataStateSub) {\n      this.dataStateSub.unsubscribe();\n    }\n  }\n\n  private unregisterSkyAgGridWrapper(): void {\n    this.currentSkyAgGridWrapper = undefined;\n  }\n\n  private registerSkyAgGridWrapper(): void {\n    this.unregisterSkyAgGridWrapper();\n\n    this.currentSkyAgGridWrapper = this.skyAgGridWrapperList.first;\n\n    setTimeout(() => {\n      if (this.currentSkyAgGridWrapper) {\n        this.currentSkyAgGridWrapper.viewkeeperClasses = [];\n      }\n    });\n  }\n\n  private registerAgGrid(): void {\n    this.unregisterAgGrid();\n\n    const agGrid = this.agGridList.first;\n\n    this.currentAgGrid = agGrid;\n\n    agGrid.gridReady.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n      this.viewConfig.onSelectAllClick = this.selectAll.bind(this);\n      this.viewConfig.onClearAllClick = this.clearAll.bind(this);\n\n      this.dataManagerSvc.updateViewConfig(this.viewConfig);\n\n      this.dataStateSub = this.dataManagerSvc\n        .getDataStateUpdates(this.viewConfig.id)\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((dataState: SkyDataManagerState) => {\n          this.currentDataState = dataState;\n          this.displayColumns(dataState);\n        });\n\n      agGrid.api.sizeColumnsToFit();\n    });\n\n    agGrid.columnMoved\n      .pipe(\n        takeUntil(this.ngUnsubscribe),\n        filter(\n          (event: ColumnMovedEvent) =>\n            ![\n              'gridInitializing',\n              'uiColumnResized',\n              'uiColumnDragged',\n              'api',\n            ].includes(event.source)\n        )\n      )\n      .subscribe((value: ColumnMovedEvent) => {\n        this.updateColumnsInCurrentDataState(value.columnApi);\n      });\n    let currentColumns: string[];\n    agGrid.dragStarted\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((value: DragStartedEvent) => {\n        currentColumns = this.getColumnOrder(value.columnApi);\n      });\n    agGrid.dragStopped\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((value: DragStoppedEvent) => {\n        const newColumns = this.getColumnOrder(value.columnApi);\n        const hasChanged = currentColumns.findIndex(\n          (colId, i) => colId !== newColumns[i]\n        );\n        if (hasChanged > -1) {\n          this.updateColumnsInCurrentDataState(value.columnApi);\n        }\n      });\n\n    agGrid.rowSelected\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((event: RowSelectedEvent) => {\n        const row = event.node;\n        const selectedIds = this.currentDataState.selectedIds || [];\n        const rowIndex = selectedIds.indexOf(row.data.id);\n\n        if (row.isSelected() && rowIndex === -1) {\n          selectedIds.push(row.data.id);\n        } else if (!row.isSelected() && rowIndex !== -1) {\n          selectedIds.splice(rowIndex, 1);\n        }\n\n        this.currentDataState.selectedIds = selectedIds;\n        this.dataManagerSvc.updateDataState(\n          this.currentDataState,\n          this.viewConfig.id\n        );\n        this.changeDetector.markForCheck();\n      });\n\n    agGrid.sortChanged.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n      const gridColumnStates: ColumnState[] = agGrid.columnApi.getColumnState();\n      let sortOption: SkyDataManagerSortOption;\n\n      /* istanbul ignore else */\n      if (gridColumnStates.length) {\n        const activeSortColumnState = gridColumnStates.find(\n          (aGridColumnState) => aGridColumnState.sortIndex === 0\n        );\n\n        const dataManagerConfig =\n          this.dataManagerSvc.getCurrentDataManagerConfig();\n\n        /* istanbul ignore else */\n        if (dataManagerConfig.sortOptions && activeSortColumnState) {\n          sortOption = dataManagerConfig.sortOptions.find(\n            (option: SkyDataManagerSortOption) => {\n              return (\n                option.propertyName === activeSortColumnState.colId &&\n                option.descending === (activeSortColumnState.sort === 'desc')\n              );\n            }\n          );\n        } else {\n          sortOption = undefined;\n        }\n      }\n      this.currentDataState.activeSortOption = sortOption;\n      this.dataManagerSvc.updateDataState(\n        this.currentDataState,\n        this.viewConfig.id\n      );\n    });\n  }\n\n  private updateColumnsInCurrentDataState(columnApi: ColumnApi) {\n    const columnOrder = this.getColumnOrder(columnApi);\n\n    const viewState = this.currentDataState.getViewStateById(\n      this.viewConfig.id\n    );\n    viewState.displayedColumnIds = columnOrder;\n\n    this.dataManagerSvc.updateDataState(\n      this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState),\n      this.viewConfig.id\n    );\n  }\n\n  private getColumnOrder(columnApi: ColumnApi): string[] {\n    return columnApi\n      .getAllGridColumns()\n      .filter((col) => col.isVisible())\n      .map((col) => col.getColDef().colId);\n  }\n\n  private displayColumns(dataState: SkyDataManagerState): void {\n    const agGrid = this.currentAgGrid;\n    const viewState = dataState.getViewStateById(this.viewConfig.id);\n    let displayedColumnIds: string[] = [];\n    /*istanbul ignore else*/\n    if (viewState.displayedColumnIds) {\n      displayedColumnIds = viewState.displayedColumnIds;\n    }\n    const columns = agGrid.columnApi.getAllColumns();\n\n    for (const column of columns) {\n      const colId = column.getColId();\n      const colIndex = displayedColumnIds.indexOf(colId);\n\n      agGrid.columnApi.setColumnVisible(colId, colIndex !== -1);\n      agGrid.columnApi.moveColumn(colId, colIndex);\n    }\n  }\n\n  private selectAll(): void {\n    const agGrid = this.agGridList.first;\n    agGrid.api.selectAll();\n  }\n\n  private clearAll(): void {\n    const agGrid = this.agGridList.first;\n    agGrid.api.deselectAll();\n  }\n}\n"]}
+{"version":3,"file":"ag-grid-data-manager-adapter.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectorRef,\n  ContentChildren,\n  Directive,\n  Input,\n  OnDestroy,\n  QueryList,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerSortOption,\n  SkyDataManagerState,\n  SkyDataViewConfig,\n} from '@skyux/data-manager';\n\nimport { AgGridAngular } from 'ag-grid-angular';\nimport {\n  ColumnApi,\n  ColumnMovedEvent,\n  ColumnState,\n  DragStoppedEvent,\n  RowSelectedEvent,\n} from 'ag-grid-community';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { SkyAgGridWrapperComponent } from './ag-grid-wrapper.component';\n\n/**\n * @internal\n */\n@Directive({\n  selector: '[skyAgGridDataManagerAdapter]',\n})\nexport class SkyAgGridDataManagerAdapterDirective\n  implements AfterContentInit, OnDestroy\n{\n  @Input()\n  public viewId: string;\n\n  @ContentChildren(AgGridAngular, { descendants: true })\n  public agGridList: QueryList<AgGridAngular>;\n\n  @ContentChildren(SkyAgGridWrapperComponent, { descendants: true })\n  public skyAgGridWrapperList: QueryList<SkyAgGridWrapperComponent>;\n\n  private currentAgGrid: AgGridAngular;\n  private currentDataState: SkyDataManagerState;\n  private currentSkyAgGridWrapper: SkyAgGridWrapperComponent;\n  private dataStateSub: Subscription;\n  private viewConfig: SkyDataViewConfig;\n  private ngUnsubscribe = new Subject();\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerSvc: SkyDataManagerService\n  ) {}\n\n  public ngAfterContentInit(): void {\n    this.dataManagerSvc.setViewkeeperClasses(this.viewId, ['.ag-header']);\n\n    this.viewConfig = this.dataManagerSvc.getViewById(this.viewId);\n    this.checkForAgGrid();\n    this.checkForSkyAgGridWrapper();\n\n    this.agGridList.changes\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => this.checkForAgGrid());\n\n    this.skyAgGridWrapperList.changes\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(() => this.checkForSkyAgGridWrapper());\n  }\n\n  public ngOnDestroy() {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n\n  private checkForAgGrid(): void {\n    const agGridCount = this.agGridList.length;\n\n    /* istanbul ignore else */\n    if (agGridCount === 0) {\n      this.unregisterAgGrid();\n    } else if (this.agGridList.first !== this.currentAgGrid) {\n      this.registerAgGrid();\n    }\n\n    if (agGridCount > 1) {\n      console.warn(\n        'More than one ag-grid child component was found. Using the first ag-Grid.'\n      );\n    }\n  }\n\n  private checkForSkyAgGridWrapper(): void {\n    const skyAgGridWrapperCount = this.skyAgGridWrapperList.length;\n\n    /* istanbul ignore else */\n    if (skyAgGridWrapperCount === 0) {\n      this.unregisterSkyAgGridWrapper();\n    } else if (\n      this.skyAgGridWrapperList.first !== this.currentSkyAgGridWrapper\n    ) {\n      this.registerSkyAgGridWrapper();\n    }\n\n    if (skyAgGridWrapperCount > 1) {\n      console.warn(\n        'More than one ag-grid child component was found. Using the first ag-Grid.'\n      );\n    }\n  }\n\n  private unregisterAgGrid(): void {\n    this.currentAgGrid = undefined;\n\n    /* istanbul ignore if */\n    if (this.dataStateSub) {\n      this.dataStateSub.unsubscribe();\n    }\n  }\n\n  private unregisterSkyAgGridWrapper(): void {\n    this.currentSkyAgGridWrapper = undefined;\n  }\n\n  private registerSkyAgGridWrapper(): void {\n    this.unregisterSkyAgGridWrapper();\n\n    this.currentSkyAgGridWrapper = this.skyAgGridWrapperList.first;\n\n    setTimeout(() => {\n      if (this.currentSkyAgGridWrapper) {\n        this.currentSkyAgGridWrapper.viewkeeperClasses = [];\n      }\n    });\n  }\n\n  private registerAgGrid(): void {\n    this.unregisterAgGrid();\n\n    const agGrid = this.agGridList.first;\n\n    this.currentAgGrid = agGrid;\n\n    agGrid.gridReady.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n      this.viewConfig.onSelectAllClick = this.selectAll.bind(this);\n      this.viewConfig.onClearAllClick = this.clearAll.bind(this);\n\n      this.dataManagerSvc.updateViewConfig(this.viewConfig);\n\n      this.dataStateSub = this.dataManagerSvc\n        .getDataStateUpdates(this.viewConfig.id)\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((dataState: SkyDataManagerState) => {\n          this.currentDataState = dataState;\n          this.displayColumns(dataState);\n        });\n\n      agGrid.api.sizeColumnsToFit();\n    });\n\n    agGrid.columnMoved\n      .pipe(\n        takeUntil(this.ngUnsubscribe),\n        filter(\n          (event: ColumnMovedEvent) =>\n            ![\n              'gridInitializing',\n              'uiColumnResized',\n              'uiColumnDragged',\n              'api',\n            ].includes(event.source)\n        )\n      )\n      .subscribe((value: ColumnMovedEvent) => {\n        this.updateColumnsInCurrentDataState(value.columnApi);\n      });\n\n    agGrid.dragStopped\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((value: DragStoppedEvent) => {\n        this.updateColumnsInCurrentDataState(value.columnApi);\n      });\n\n    agGrid.rowSelected\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((event: RowSelectedEvent) => {\n        const row = event.node;\n        const selectedIds = this.currentDataState.selectedIds || [];\n        const rowIndex = selectedIds.indexOf(row.data.id);\n\n        if (row.isSelected() && rowIndex === -1) {\n          selectedIds.push(row.data.id);\n        } else if (!row.isSelected() && rowIndex !== -1) {\n          selectedIds.splice(rowIndex, 1);\n        }\n\n        this.currentDataState.selectedIds = selectedIds;\n        this.dataManagerSvc.updateDataState(\n          this.currentDataState,\n          this.viewConfig.id\n        );\n        this.changeDetector.markForCheck();\n      });\n\n    agGrid.sortChanged.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n      const gridColumnStates: ColumnState[] = agGrid.columnApi.getColumnState();\n      let sortOption: SkyDataManagerSortOption;\n\n      /* istanbul ignore else */\n      if (gridColumnStates.length) {\n        const activeSortColumnState = gridColumnStates.find(\n          (aGridColumnState) => aGridColumnState.sortIndex === 0\n        );\n\n        const dataManagerConfig =\n          this.dataManagerSvc.getCurrentDataManagerConfig();\n\n        /* istanbul ignore else */\n        if (dataManagerConfig.sortOptions && activeSortColumnState) {\n          sortOption = dataManagerConfig.sortOptions.find(\n            (option: SkyDataManagerSortOption) => {\n              return (\n                option.propertyName === activeSortColumnState.colId &&\n                option.descending === (activeSortColumnState.sort === 'desc')\n              );\n            }\n          );\n        } else {\n          sortOption = undefined;\n        }\n      }\n      this.currentDataState.activeSortOption = sortOption;\n      this.dataManagerSvc.updateDataState(\n        this.currentDataState,\n        this.viewConfig.id\n      );\n    });\n  }\n\n  private updateColumnsInCurrentDataState(columnApi: ColumnApi) {\n    const columnOrder = this.getColumnOrder(columnApi);\n\n    const viewState = this.currentDataState.getViewStateById(\n      this.viewConfig.id\n    );\n    if (\n      viewState.displayedColumnIds.length !== columnOrder.length ||\n      viewState.displayedColumnIds.some((col, i) => col !== columnOrder[i])\n    ) {\n      viewState.displayedColumnIds = columnOrder;\n\n      this.dataManagerSvc.updateDataState(\n        this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState),\n        this.viewConfig.id\n      );\n    }\n  }\n\n  private getColumnOrder(columnApi: ColumnApi): string[] {\n    return columnApi\n      .getColumnState()\n      .filter((state) => !state.hide)\n      .map((state) => state.colId);\n  }\n\n  private displayColumns(dataState: SkyDataManagerState): void {\n    const agGrid = this.currentAgGrid;\n    const viewState = dataState.getViewStateById(this.viewConfig.id);\n    let displayedColumnIds: string[] = [];\n    /*istanbul ignore else*/\n    if (viewState.displayedColumnIds) {\n      displayedColumnIds = viewState.displayedColumnIds;\n    }\n    const columnOrder = this.getColumnOrder(agGrid.columnApi);\n    if (\n      displayedColumnIds.length !== columnOrder.length ||\n      displayedColumnIds.some((col, i) => col !== columnOrder[i])\n    ) {\n      const hideColumns = agGrid.columnApi\n        .getColumnState()\n        .map((col) => col.colId)\n        .filter((colId) => !displayedColumnIds.includes(colId));\n      agGrid.columnApi.setColumnsVisible(hideColumns, false);\n      agGrid.columnApi.setColumnsVisible(displayedColumnIds, true);\n      agGrid.columnApi.moveColumns(displayedColumnIds, 0);\n    }\n  }\n\n  private selectAll(): void {\n    const agGrid = this.agGridList.first;\n    agGrid.api.selectAll();\n  }\n\n  private clearAll(): void {\n    const agGrid = this.agGridList.first;\n    agGrid.api.deselectAll();\n  }\n}\n"]}

package/fesm2015/skyux-ag-grid.js

@@ -272,20 +272,10 @@ class SkyAgGridDataManagerAdapterDirective {
             .subscribe((value) => {
             this.updateColumnsInCurrentDataState(value.columnApi);
         });
-        let currentColumns;
-        agGrid.dragStarted
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((value) => {
-            currentColumns = this.getColumnOrder(value.columnApi);
-        });
         agGrid.dragStopped
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            const newColumns = this.getColumnOrder(value.columnApi);
-            const hasChanged = currentColumns.findIndex((colId, i) => colId !== newColumns[i]);
-            if (hasChanged > -1) {
-                this.updateColumnsInCurrentDataState(value.columnApi);
-            }
+            this.updateColumnsInCurrentDataState(value.columnApi);
         });
         agGrid.rowSelected
             .pipe(takeUntil(this.ngUnsubscribe))
@@ -328,14 +318,17 @@ class SkyAgGridDataManagerAdapterDirective {
     updateColumnsInCurrentDataState(columnApi) {
         const columnOrder = this.getColumnOrder(columnApi);
         const viewState = this.currentDataState.getViewStateById(this.viewConfig.id);
-        viewState.displayedColumnIds = columnOrder;
-        this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+        if (viewState.displayedColumnIds.length !== columnOrder.length ||
+            viewState.displayedColumnIds.some((col, i) => col !== columnOrder[i])) {
+            viewState.displayedColumnIds = columnOrder;
+            this.dataManagerSvc.updateDataState(this.currentDataState.addOrUpdateView(this.viewConfig.id, viewState), this.viewConfig.id);
+        }
     }
     getColumnOrder(columnApi) {
         return columnApi
-            .getAllGridColumns()
-            .filter((col) => col.isVisible())
-            .map((col) => col.getColDef().colId);
+            .getColumnState()
+            .filter((state) => !state.hide)
+            .map((state) => state.colId);
     }
     displayColumns(dataState) {
         const agGrid = this.currentAgGrid;
@@ -345,12 +338,16 @@ class SkyAgGridDataManagerAdapterDirective {
         if (viewState.displayedColumnIds) {
             displayedColumnIds = viewState.displayedColumnIds;
         }
-        const columns = agGrid.columnApi.getAllColumns();
-        for (const column of columns) {
-            const colId = column.getColId();
-            const colIndex = displayedColumnIds.indexOf(colId);
-            agGrid.columnApi.setColumnVisible(colId, colIndex !== -1);
-            agGrid.columnApi.moveColumn(colId, colIndex);
+        const columnOrder = this.getColumnOrder(agGrid.columnApi);
+        if (displayedColumnIds.length !== columnOrder.length ||
+            displayedColumnIds.some((col, i) => col !== columnOrder[i])) {
+            const hideColumns = agGrid.columnApi
+                .getColumnState()
+                .map((col) => col.colId)
+                .filter((colId) => !displayedColumnIds.includes(colId));
+            agGrid.columnApi.setColumnsVisible(hideColumns, false);
+            agGrid.columnApi.setColumnsVisible(displayedColumnIds, true);
+            agGrid.columnApi.moveColumns(displayedColumnIds, 0);
         }
     }
     selectAll() {