@skyux/ag-grid 6.25.0 → 6.25.1

package/documentation.json

@@ -4341,7 +4341,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  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) => !!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\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"
+      "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) => !!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 = `<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) => 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"
     },
     {
       "fileName": "data-entry-grid-docs-demo.module.ts",
@@ -4396,7 +4396,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-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"
+      "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 = `<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: any[] = [];\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: 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",
@@ -4413,65 +4413,125 @@
       "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyDropdownModule } from '@skyux/popovers';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { SkyDataManagerDataEntryGridContextMenuComponent } from './data-manager-data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\nimport { DataManagerDataEntryGridDocsDemoViewGridComponent } from './data-manager-data-entry-grid-docs-demo-view-grid.component';\nimport { SkyDataManagerDataEntryGridDemoComponent } from './data-manager-data-entry-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerDataEntryGridContextMenuComponent,\n    SkyDataManagerDataEntryGridDemoComponent,\n    SkyDataManagerDataEntryGridEditModalComponent,\n    DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n    DataManagerDataEntryGridDocsDemoViewGridComponent,\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    AgGridModule,\n    SkyAgGridModule,\n    SkyModalModule,\n    SkyDropdownModule,\n    SkyDataManagerModule,\n    SkyCheckboxModule,\n  ],\n  exports: [SkyDataManagerDataEntryGridDemoComponent],\n})\nexport class SkyDataManagerDataEntryGridDocsDemoModule {}\n"
     },
+    {
+      "fileName": "basic-multiselect-data-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic-multiselect/basic-multiselect-data-grid-docs-demo-data.ts",
+      "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"
+    },
+    {
+      "fileName": "basic-multiselect-data-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic-multiselect/basic-multiselect-data-grid-docs-demo.component.html",
+      "rawContents": "<div>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\">\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
+    },
+    {
+      "fileName": "basic-multiselect-data-grid-docs-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic-multiselect/basic-multiselect-data-grid-docs-demo.component.ts",
+      "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"
+    },
+    {
+      "fileName": "basic-multiselect-data-grid-docs-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic-multiselect/basic-multiselect-data-grid-docs-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerModule,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { SkyBasicMultiselectDataGridDemoComponent } from './basic-multiselect-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [SkyBasicMultiselectDataGridDemoComponent],\n  exports: [SkyBasicMultiselectDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class SkyBasicMultiselectDataGridDocsDemoModule {}\n"
+    },
     {
       "fileName": "basic-data-grid-docs-demo-data.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo-data.ts",
-      "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"
+      "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"
     },
     {
       "fileName": "basic-data-grid-docs-demo.component.html",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.component.html",
-      "rawContents": "<div>\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <sky-search\n        [searchText]=\"searchText\"\n        [debounceTime]=\"250\"\n        (searchApply)=\"searchApplied($event)\"\n        (searchChange)=\"searchApplied($event)\"\n        (searchClear)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [rowData]=\"gridData\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
+      "rawContents": "<div>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\">\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
     },
     {
       "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  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: '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(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"
+      "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"
     },
     {
       "fileName": "basic-data-grid-docs-demo.module.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-data-grid-docs-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport {\n  SkyDataManagerModule,\n  SkyDataManagerService,\n} from '@skyux/data-manager';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { SkyBasicDataGridDemoComponent } from './basic-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [SkyBasicDataGridDemoComponent],\n  exports: [SkyBasicDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class SkyBasicDataGridDocsDemoModule {}\n"
     },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo-data.ts",
+      "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"
+    },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo-filter-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo-filter-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Filter employees </sky-modal-header>\n  <sky-modal-content>\n    <label for=\"sky-demo-select-type\">Job Title</label>\n    <select\n      id=\"sky-demo-select-type\"\n      [(ngModel)]=\"jobTitle\"\n      class=\"sky-form-control\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div style=\"margin-top: 15px\">\n      <sky-checkbox [(ngModel)]=\"hideSales\">\n        <sky-checkbox-label> Hide Sales employees </sky-checkbox-label>\n      </sky-checkbox>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+    },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo-filter-modal.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo-filter-modal.component.ts",
+      "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-multiselect-data-grid-docs-demo-filter-modal',\n  templateUrl:\n    './data-manager-multiselect-data-grid-docs-demo-filter-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerMultiselectDataGridDocsDemoFiltersModalComponent {\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"
+    },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo-view-grid.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo-view-grid.component.html",
+      "rawContents": "<sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n  <sky-ag-grid-wrapper *ngIf=\"isViewActive && isGridReadyForInitialization\">\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [rowData]=\"displayedItems\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n      (rowSelected)=\"onRowSelected($event)\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</sky-data-view>\n"
+    },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo-view-grid.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-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  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: any[] = [];\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: any[] = [];\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: 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  private 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  private updateColumnOrder(): void {\n    const viewState: SkyDataViewState = this.dataState.getViewStateById(\n      this.viewId\n    );\n\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  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"
+    },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo.component.html",
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar></sky-data-manager-toolbar>\n  <app-data-manager-multiselect-data-grid-docs-demo-view-grid [items]=\"items\">\n  </app-data-manager-multiselect-data-grid-docs-demo-view-grid>\n</sky-data-manager>\n"
+    },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n} from '@skyux/data-manager';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-multiselect-data-grid-docs-demo-data';\nimport { DataManagerMultiselectDataGridDocsDemoFiltersModalComponent } from './data-manager-multiselect-data-grid-docs-demo-filter-modal.component';\n\n@Component({\n  selector: 'app-data-manager-multiselect-data-grid-docs-demo',\n  templateUrl: './data-manager-multiselect-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerMultiselectDataGridDemoComponent implements OnInit {\n  public items = SKY_AG_GRID_DEMO_DATA;\n\n  public dataState = new SkyDataManagerState({});\n\n  public dataManagerConfig = {\n    filterModalComponent:\n      DataManagerMultiselectDataGridDocsDemoFiltersModalComponent,\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Name (A - Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Name (Z - A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n\n  public defaultDataState = new SkyDataManagerState({\n    filterData: {\n      filtersApplied: false,\n      filters: {\n        hideSales: false,\n        jobTitle: 'any',\n      },\n    },\n    views: [\n      {\n        viewId: 'dataGridMultiselectWithDataManagerView',\n        columnIds: [\n          'selected',\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n        ],\n        displayedColumnIds: [\n          'selected',\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n        ],\n      },\n    ],\n  });\n\n  public activeViewId = 'dataGridMultiselectWithDataManagerView';\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.dataManagerService\n      .getDataStateUpdates('dataGridDataManager')\n      .subscribe((state) => {\n        this.dataState = state;\n        this.changeDetector.detectChanges();\n      });\n    this.dataManagerService\n      .getActiveViewIdUpdates()\n      .subscribe((activeViewId) => {\n        this.activeViewId = activeViewId;\n        this.changeDetector.detectChanges();\n      });\n  }\n\n  public ngOnInit(): void {\n    this.dataManagerService.initDataManager({\n      activeViewId: this.activeViewId,\n      dataManagerConfig: this.dataManagerConfig,\n      defaultDataState: this.defaultDataState,\n    });\n  }\n}\n"
+    },
+    {
+      "fileName": "data-manager-multiselect-data-grid-docs-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-multiselect/data-manager-multiselect-data-grid-docs-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataManagerMultiselectDataGridDocsDemoFiltersModalComponent } from './data-manager-multiselect-data-grid-docs-demo-filter-modal.component';\nimport { DataManagerMultiselectDataGridDocsDemoViewGridComponent } from './data-manager-multiselect-data-grid-docs-demo-view-grid.component';\nimport { SkyDataManagerMultiselectDataGridDemoComponent } from './data-manager-multiselect-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerMultiselectDataGridDemoComponent,\n    DataManagerMultiselectDataGridDocsDemoFiltersModalComponent,\n    DataManagerMultiselectDataGridDocsDemoViewGridComponent,\n  ],\n  exports: [SkyDataManagerMultiselectDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyDataManagerModule,\n    SkyModalModule,\n    SkyCheckboxModule,\n  ],\n})\nexport class SkyDataManagerMultiselectDataGridDocsDemoModule {}\n"
+    },
     {
       "fileName": "data-manager-data-grid-docs-demo-data.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-data.ts",
-      "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    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"
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo-data.ts",
+      "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"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo-filter-modal.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-filter-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo-filter-modal.component.html",
       "rawContents": "<sky-modal>\n  <sky-modal-header> Filter employees </sky-modal-header>\n  <sky-modal-content>\n    <label for=\"sky-demo-select-type\">Job Title</label>\n    <select\n      id=\"sky-demo-select-type\"\n      [(ngModel)]=\"jobTitle\"\n      class=\"sky-form-control\"\n    >\n      <option value=\"any\">Any job title</option>\n      <option value=\"Product Manager\">Product Manager</option>\n      <option value=\"Software Engineer\">Software Engineer</option>\n    </select>\n    <div style=\"margin-top: 15px\">\n      <sky-checkbox [(ngModel)]=\"hideSales\">\n        <sky-checkbox-label> Hide Sales employees </sky-checkbox-label>\n      </sky-checkbox>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-primary\"\n      (click)=\"applyFilters()\"\n    >\n      Apply filters\n    </button>\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link\"\n      (click)=\"clearAllFilters()\"\n    >\n      Clear all filters\n    </button>\n    <button type=\"button\" class=\"sky-btn sky-btn-link\" (click)=\"cancel()\">\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo-filter-modal.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-filter-modal.component.ts",
-      "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    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"
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo-filter-modal.component.ts",
+      "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"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo-view-grid.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo-view-grid.component.html",
-      "rawContents": "<sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n  <sky-ag-grid-wrapper *ngIf=\"isActive && gridInitialized\">\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n      [rowData]=\"displayedItems\"\n      (rowSelected)=\"onRowSelected($event)\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</sky-data-view>\n"
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo-view-grid.component.html",
+      "rawContents": "<sky-data-view skyAgGridDataManagerAdapter [viewId]=\"viewConfig.id\">\n  <sky-ag-grid-wrapper *ngIf=\"isViewActive && isGridReadyForInitialization\">\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [rowData]=\"displayedItems\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n      (rowSelected)=\"onRowSelected($event)\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</sky-data-view>\n"
     },
     {
       "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-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"
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/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  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: any[] = [];\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: any[] = [];\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: 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  private 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  private updateColumnOrder(): void {\n    const viewState: SkyDataViewState = this.dataState.getViewStateById(\n      this.viewId\n    );\n\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  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"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo.component.html",
       "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar></sky-data-manager-toolbar>\n  <app-data-manager-data-grid-docs-demo-view-grid [items]=\"items\">\n  </app-data-manager-data-grid-docs-demo-view-grid>\n</sky-data-manager>\n"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n} from '@skyux/data-manager';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-grid-docs-demo-data';\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo',\n  templateUrl: './data-manager-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataGridDemoComponent implements OnInit {\n  public items = SKY_AG_GRID_DEMO_DATA;\n\n  public dataState = new SkyDataManagerState({});\n\n  public dataManagerConfig = {\n    filterModalComponent: DataManagerDataGridDocsDemoFiltersModalComponent,\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Name (A - Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Name (Z - A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n\n  public defaultDataState = new SkyDataManagerState({\n    filterData: {\n      filtersApplied: false,\n      filters: {\n        hideSales: false,\n      },\n    },\n    views: [\n      {\n        viewId: 'dataGridWithDataManagerView',\n        displayedColumnIds: [\n          'selected',\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n        ],\n      },\n    ],\n  });\n\n  public activeViewId = 'dataGridWithDataManagerView';\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.dataManagerService\n      .getDataStateUpdates('dataGridDataManager')\n      .subscribe((state) => {\n        this.dataState = state;\n        this.changeDetector.detectChanges();\n      });\n    this.dataManagerService\n      .getActiveViewIdUpdates()\n      .subscribe((activeViewId) => {\n        this.activeViewId = activeViewId;\n        this.changeDetector.detectChanges();\n      });\n  }\n\n  public ngOnInit(): void {\n    this.dataManagerService.initDataManager({\n      activeViewId: this.activeViewId,\n      dataManagerConfig: this.dataManagerConfig,\n      defaultDataState: this.defaultDataState,\n    });\n  }\n}\n"
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport {\n  SkyDataManagerService,\n  SkyDataManagerState,\n} from '@skyux/data-manager';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-grid-docs-demo-data';\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo',\n  templateUrl: './data-manager-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataGridDemoComponent implements OnInit {\n  public items = SKY_AG_GRID_DEMO_DATA;\n\n  public dataState = new SkyDataManagerState({});\n\n  public dataManagerConfig = {\n    filterModalComponent: DataManagerDataGridDocsDemoFiltersModalComponent,\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Name (A - Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Name (Z - A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n\n  public defaultDataState = new SkyDataManagerState({\n    filterData: {\n      filtersApplied: false,\n      filters: {\n        hideSales: false,\n        jobTitle: 'any',\n      },\n    },\n    views: [\n      {\n        viewId: 'dataGridWithDataManagerView',\n        columnIds: [\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n        ],\n        displayedColumnIds: [\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n        ],\n      },\n    ],\n  });\n\n  public activeViewId = 'dataGridWithDataManagerView';\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {\n    this.dataManagerService\n      .getDataStateUpdates('dataGridDataManager')\n      .subscribe((state) => {\n        this.dataState = state;\n        this.changeDetector.detectChanges();\n      });\n    this.dataManagerService\n      .getActiveViewIdUpdates()\n      .subscribe((activeViewId) => {\n        this.activeViewId = activeViewId;\n        this.changeDetector.detectChanges();\n      });\n  }\n\n  public ngOnInit(): void {\n    this.dataManagerService.initDataManager({\n      activeViewId: this.activeViewId,\n      dataManagerConfig: this.dataManagerConfig,\n      defaultDataState: this.defaultDataState,\n    });\n  }\n}\n"
     },
     {
       "fileName": "data-manager-data-grid-docs-demo.module.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager-added/data-manager-data-grid-docs-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\nimport { DataManagerDataGridsDocsDemoViewGridComponent } from './data-manager-data-grid-docs-demo-view-grid.component';\nimport { SkyDataManagerDataGridDemoComponent } from './data-manager-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerDataGridDemoComponent,\n    DataManagerDataGridDocsDemoFiltersModalComponent,\n    DataManagerDataGridsDocsDemoViewGridComponent,\n  ],\n  exports: [SkyDataManagerDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyDataManagerModule,\n    SkyModalModule,\n    SkyCheckboxModule,\n  ],\n})\nexport class SkyDataManagerDataGridDocsDemoModule {}\n"
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/data-manager/data-manager-data-grid-docs-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyDataManagerModule } from '@skyux/data-manager';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\nimport { SkyModalModule } from '@skyux/modals';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataManagerDataGridDocsDemoFiltersModalComponent } from './data-manager-data-grid-docs-demo-filter-modal.component';\nimport { DataManagerDataGridDocsDemoViewGridComponent } from './data-manager-data-grid-docs-demo-view-grid.component';\nimport { SkyDataManagerDataGridDemoComponent } from './data-manager-data-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataManagerDataGridDemoComponent,\n    DataManagerDataGridDocsDemoFiltersModalComponent,\n    DataManagerDataGridDocsDemoViewGridComponent,\n  ],\n  exports: [SkyDataManagerDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyDataManagerModule,\n    SkyModalModule,\n    SkyCheckboxModule,\n  ],\n})\nexport class SkyDataManagerDataGridDocsDemoModule {}\n"
     },
     {
       "fileName": "top-scroll-data-grid-demo-data.ts",
@@ -4486,7 +4546,7 @@
     {
       "fileName": "top-scroll-data-grid-demo.component.ts",
       "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-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  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './top-scroll-data-grid-demo-data';\n\n@Component({\n  selector: 'app-basic-data-grid-docs-demo',\n  templateUrl: './top-scroll-data-grid-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyTopScrollDataGridDemoComponent {\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 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        context: {\n          enableTopScroll: true,\n        },\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(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"
+      "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 './top-scroll-data-grid-demo-data';\n\n@Component({\n  selector: 'app-basic-data-grid-docs-demo',\n  templateUrl: './top-scroll-data-grid-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyTopScrollDataGridDemoComponent {\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 gridApi: GridApi | undefined;\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n\n  constructor(private agGridService: SkyAgGridService) {\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n        context: {\n          enableTopScroll: true,\n        },\n      },\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\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"
     },
     {
       "fileName": "top-scroll-data-grid-demo.module.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/ag-grid",
-  "version": "6.25.0",
+  "version": "6.25.1",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -35,17 +35,17 @@
     "@angular/common": "^13.3.2",
     "@angular/core": "^13.3.2",
     "@angular/forms": "^13.3.2",
-    "@skyux/autonumeric": "6.25.0",
-    "@skyux/core": "6.25.0",
-    "@skyux/data-manager": "6.25.0",
-    "@skyux/datetime": "6.25.0",
-    "@skyux/forms": "6.25.0",
-    "@skyux/i18n": "6.25.0",
-    "@skyux/indicators": "6.25.0",
-    "@skyux/layout": "6.25.0",
-    "@skyux/lookup": "6.25.0",
-    "@skyux/popovers": "6.25.0",
-    "@skyux/theme": "6.25.0",
+    "@skyux/autonumeric": "6.25.1",
+    "@skyux/core": "6.25.1",
+    "@skyux/data-manager": "6.25.1",
+    "@skyux/datetime": "6.25.1",
+    "@skyux/forms": "6.25.1",
+    "@skyux/i18n": "6.25.1",
+    "@skyux/indicators": "6.25.1",
+    "@skyux/layout": "6.25.1",
+    "@skyux/lookup": "6.25.1",
+    "@skyux/popovers": "6.25.1",
+    "@skyux/theme": "6.25.1",
     "ag-grid-angular": "^27.2.0",
     "ag-grid-community": "^27.2.0"
   },