npm - @skyux/ag-grid - Versions diffs - 8.7.2 → 9.0.0-alpha.1 - Mend

@skyux/ag-grid 8.7.2 → 9.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/documentation.json CHANGED Viewed

@@ -5044,169 +5044,169 @@
   },
   "codeExamples": [
     {
-      "fileName": "data-entry-grid-docs-demo-context-menu.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-context-menu.component.html",
-      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+      "fileName": "top-scroll-data-grid-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-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 { SkyTopScrollDataGridDemoComponent } from './top-scroll-data-grid-demo.component';\n\n@NgModule({\n  declarations: [SkyTopScrollDataGridDemoComponent],\n  exports: [SkyTopScrollDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class SkyTopScrollDataGridDemoModule {}\n"
     },
     {
-      "fileName": "data-entry-grid-docs-demo-context-menu.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-context-menu.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-context-menu',\n  templateUrl: './data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
+      "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 { 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": "data-entry-grid-docs-demo-data.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-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"
+      "fileName": "top-scroll-data-grid-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-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"
     },
     {
-      "fileName": "data-entry-grid-docs-demo-edit-modal-context.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal-context.ts",
-      "rawContents": "import { SkyAgGridDemoRow } from './data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\n}\n"
+      "fileName": "top-scroll-data-grid-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-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"
     },
     {
-      "fileName": "data-entry-grid-docs-demo-edit-modal.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "fileName": "data-grid-paging-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-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 { SkyPagingModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataGridPagingDemoComponent } from './data-grid-paging-demo.component';\n\n@NgModule({\n  declarations: [DataGridPagingDemoComponent],\n  exports: [DataGridPagingDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyPagingModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class DataGridPagingDemoModule {}\n"
     },
     {
-      "fileName": "data-entry-grid-docs-demo-edit-modal.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridAutocompleteProperties,\n  SkyAgGridDatepickerProperties,\n  SkyAgGridService,\n  SkyCellType,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n  SkyAgGridDemoRow,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-edit-modal',\n  templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n        type: SkyCellType.Text,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: string): boolean => String(value).length <= 10,\n            validatorMessage: `Value exceeds maximum length`,\n          },\n        },\n        cellEditorParams: {\n          skyComponentProperties: {\n            maxlength: 10,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: number): boolean => value >= 18,\n            validatorMessage: `Age must be 18+`,\n          },\n        },\n        maxWidth: 60,\n        cellEditorParams: {\n          skyComponentProperties: {\n            min: 18,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'startDate',\n        headerName: 'Start date',\n        type: SkyCellType.Date,\n        sort: 'asc',\n      },\n      {\n        field: 'endDate',\n        headerName: 'End date',\n        type: SkyCellType.Date,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAgGridAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n      {\n        colId: 'validationCurrency',\n        field: 'validationCurrency',\n        headerName: 'Validation currency',\n        type: [SkyCellType.CurrencyValidator],\n        editable: true,\n      },\n      {\n        colId: 'validationDate',\n        field: 'validationDate',\n        headerName: 'Validation date',\n        type: [SkyCellType.Date, SkyCellType.Validator],\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: Date): boolean =>\n              !!value && value > new Date(1985, 9, 26),\n            validatorMessage: 'Please enter a future date',\n          },\n        },\n        editable: true,\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      this.changeDetector.markForCheck();\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n  }\n}\n"
+      "fileName": "data-grid-paging-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { ActivatedRoute, NavigationEnd, Router } from '@angular/router';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\nimport { Subscription } from 'rxjs';\nimport { filter, map } from 'rxjs/operators';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-grid-paging-demo-data';\n\n@Component({\n  selector: 'app-data-grid-paging-demo',\n  templateUrl: './data-grid-paging-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataGridPagingDemoComponent implements OnInit, OnDestroy {\n  public currentPage = 1;\n\n  public readonly pageSize = 3;\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  #activatedRoute = inject(ActivatedRoute);\n  #agGridService = inject(SkyAgGridService);\n  #changeDetector = inject(ChangeDetectorRef);\n  #router = inject(Router);\n  #subscriptions = new Subscription();\n\n  constructor() {\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n      rowSelection: 'single',\n      pagination: true,\n      suppressPaginationPanel: true,\n      paginationPageSize: this.pageSize,\n    };\n    this.gridOptions = this.#agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#subscriptions.add(\n      this.#activatedRoute.queryParamMap\n        .pipe(map((params) => params.get('page') || '1'))\n        .subscribe((page) => {\n          this.currentPage = Number(page);\n          this.gridApi?.paginationGoToPage(this.currentPage - 1);\n          this.#changeDetector.detectChanges();\n        })\n    );\n    this.#subscriptions.add(\n      this.#router.events\n        .pipe(filter((event) => event instanceof NavigationEnd))\n        .subscribe(() => {\n          const page = this.#activatedRoute.snapshot.paramMap.get('page');\n          if (page) {\n            this.currentPage = Number(page);\n          }\n          this.gridApi?.paginationGoToPage(this.currentPage - 1);\n          this.#changeDetector.detectChanges();\n        })\n    );\n  }\n\n  public ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.gridApi.paginationGoToPage(this.currentPage - 1);\n  }\n\n  public onPageChange(page: number): void {\n    this.#router\n      .navigate(['.'], {\n        relativeTo: this.#activatedRoute,\n        queryParams: { page: page.toString(10) },\n        queryParamsHandling: 'merge',\n      })\n      .then();\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.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.html",
-      "rawContents": "<div>\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search\n        [searchText]=\"searchText\"\n        [debounceTime]=\"250\"\n        (searchApply)=\"searchApplied($event)\"\n        (searchChange)=\"searchApplied($event)\"\n        (searchClear)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [rowData]=\"gridData\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
+      "fileName": "data-grid-paging-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-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<sky-paging\n  [itemCount]=\"gridData.length\"\n  [pageSize]=\"pageSize\"\n  [currentPage]=\"currentPage\"\n  (currentPageChange)=\"onPageChange($event)\"\n>\n</sky-paging>\n"
     },
     {
-      "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: string): boolean => String(value).length <= 10,\n          validatorMessage: `Value exceeds maximum length`,\n        },\n      },\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: number): boolean => value >= 18,\n          validatorMessage: `Age must be 18+`,\n        },\n      },\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      colId: 'validationCurrency',\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      colId: 'validationDate',\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date): boolean =>\n            !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Enter a future date',\n        },\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private modalService: SkyModalService,\n    private changeDetection: ChangeDetectorRef\n  ) {\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(this.searchText);\n      const displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "fileName": "data-grid-paging-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-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  },\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-entry-grid-docs-demo.module.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.module.ts",
-      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\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 { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyDataEntryGridDemoComponent } from './data-entry-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataEntryGridContextMenuComponent,\n    SkyDataEntryGridDemoComponent,\n    SkyDataEntryGridEditModalComponent,\n  ],\n  imports: [\n    SkyToolbarModule,\n    SkySearchModule,\n    AgGridModule,\n    SkyAgGridModule,\n    SkyModalModule,\n    SkyDropdownModule,\n  ],\n  exports: [SkyDataEntryGridDemoComponent],\n})\nexport class SkyDataEntryGridDocsDemoModule {}\n"
+      "fileName": "inline-help.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/inline-help.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n  selector: 'app-inline-help',\n  templateUrl: './inline-help.component.html',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n  readonly #displayName: string | undefined;\n\n  constructor(headerInfo: SkyAgGridHeaderInfo) {\n    this.#displayName = headerInfo.displayName;\n  }\n\n  public onHelpClick(): void {\n    alert(`Help was clicked for ${this.#displayName}.`);\n  }\n}\n"
     },
     {
-      "fileName": "data-manager-data-entry-grid-docs-demo-context-menu.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-context-menu.component.html",
-      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+      "fileName": "inline-help.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/inline-help.component.html",
+      "rawContents": "<sky-help-inline\n  (actionClick)=\"onHelpClick()\"\n  class=\"sky-control-help\"\n></sky-help-inline>\n"
     },
     {
-      "fileName": "data-manager-data-entry-grid-docs-demo-context-menu.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-context-menu.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-context-menu',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
+      "fileName": "data-grid-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/data-grid-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 { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataGridDemoComponent } from './data-grid-demo.component';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@NgModule({\n  declarations: [DataGridDemoComponent, InlineHelpComponent],\n  exports: [DataGridDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyHelpInlineModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class DataGridDemoModule {}\n"
     },
     {
-      "fileName": "data-manager-data-entry-grid-docs-demo-data.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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: SkyAgGridDemoRow[] = [\n  {\n    selected: true,\n    name: 'Billy Bob',\n    age: 55,\n    startDate: new Date('12/1/1994'),\n    department: SKY_DEPARTMENTS[3],\n    jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n  },\n  {\n    selected: false,\n    name: 'Jane Deere',\n    age: 33,\n    startDate: new Date('7/15/2009'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][2],\n  },\n  {\n    selected: false,\n    name: 'John Doe',\n    age: 38,\n    startDate: new Date('9/1/2017'),\n    endDate: new Date('9/30/2017'),\n    department: SKY_DEPARTMENTS[1],\n    jobTitle: SKY_JOB_TITLES['Sales'][1],\n  },\n  {\n    selected: false,\n    name: 'David Smith',\n    age: 51,\n    startDate: new Date('1/1/2012'),\n    endDate: new Date('6/15/2018'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][4],\n  },\n  {\n    selected: true,\n    name: 'Emily Johnson',\n    age: 41,\n    startDate: new Date('1/15/2014'),\n    department: SKY_DEPARTMENTS[0],\n    jobTitle: SKY_JOB_TITLES['Marketing'][2],\n  },\n  {\n    selected: false,\n    name: 'Nicole Davidson',\n    age: 22,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][0],\n  },\n  {\n    selected: false,\n    name: 'Carl Roberts',\n    age: 23,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][3],\n  },\n];\n"
+      "fileName": "data-grid-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/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 './data-grid-demo-data';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@Component({\n  selector: 'app-data-grid-demo',\n  templateUrl: './data-grid-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataGridDemoComponent {\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.#endDateFormatter,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n  ];\n\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  #agGridService: SkyAgGridService;\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    agGridService: SkyAgGridService,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#agGridService = agGridService;\n    this.#changeDetector = changeDetector;\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  #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-edit-modal-context.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal-context.ts",
-      "rawContents": "import { SkyAgGridDemoRow } from './data-manager-data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\n}\n"
+      "fileName": "data-grid-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/data-grid-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"
     },
     {
-      "fileName": "data-manager-data-entry-grid-docs-demo-edit-modal.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "fileName": "data-grid-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/data-grid-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  },\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-entry-grid-docs-demo-edit-modal.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridAutocompleteProperties,\n  SkyAgGridDatepickerProperties,\n  SkyAgGridService,\n  SkyCellType,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n  SkyAgGridDemoRow,\n} from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-edit-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        maxWidth: 60,\n        editable: true,\n      },\n      {\n        field: 'startDate',\n        headerName: 'Start date',\n        type: SkyCellType.Date,\n        sort: 'asc',\n      },\n      {\n        field: 'endDate',\n        headerName: 'End date',\n        type: SkyCellType.Date,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAgGridAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n      {\n        colId: 'validationCurrency',\n        field: 'validationCurrency',\n        headerName: 'Validation currency',\n        type: [SkyCellType.CurrencyValidator],\n        editable: true,\n      },\n      {\n        colId: 'validationDate',\n        field: 'validationDate',\n        headerName: 'Validation date',\n        type: [SkyCellType.Date, SkyCellType.Validator],\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: Date): boolean =>\n              !!value && value > new Date(1985, 9, 26),\n            validatorMessage: 'Enter a future date.',\n          },\n        },\n        editable: true,\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n    this.changeDetector.markForCheck();\n  }\n}\n"
+      "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-entry-grid-docs-demo-filter-modal.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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.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-data-entry-grid-docs-demo-filter-modal.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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-entry-grid-docs-demo-filter-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-filter-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoFiltersModalComponent {\n  public jobTitle = '';\n\n  public hideSales = false;\n\n  constructor(\n    public context: SkyDataManagerFilterModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    if (this.context.filterData && this.context.filterData.filters) {\n      const filters = this.context.filterData.filters;\n      this.jobTitle = filters.jobTitle || 'any';\n      this.hideSales = filters.hideSales || false;\n    }\n    this.changeDetector.markForCheck();\n  }\n\n  public applyFilters(): void {\n    const result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters(): void {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n    this.changeDetector.markForCheck();\n  }\n\n  public cancel(): void {\n    this.instance.cancel();\n  }\n}\n"
+      "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-data-entry-grid-docs-demo-view-grid.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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      [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\nimport { SkyAgGridDemoRow } from './data-manager-multiselect-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-data-manager-multiselect-data-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-multiselect-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerMultiselectDataGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public items: SkyAgGridDemoRow[] = [];\n\n  public viewId = 'dataGridMultiselectWithDataManagerView';\n\n  public columnDefinitions: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  private columnPickerOptions: SkyDataManagerColumnPickerOption[] = [\n    {\n      id: 'selected',\n      label: '',\n      alwaysDisplayed: true,\n    },\n    {\n      id: 'name',\n      label: 'Name',\n      description: 'The name of the employee.',\n    },\n    {\n      id: 'age',\n      label: 'Age',\n      description: 'The age of the employee.',\n    },\n    {\n      id: 'startDate',\n      label: 'Start date',\n      description: 'The start date of the employee.',\n    },\n    {\n      id: 'endDate',\n      label: 'End date',\n      description: 'The end date of the employee.',\n    },\n    {\n      id: 'department',\n      label: 'Department',\n      description: 'The department of the employee',\n    },\n    {\n      id: 'jobTitle',\n      label: 'Title',\n      description: 'The job title of the employee.',\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: SkyAgGridDemoRow[] = [];\n  public gridApi?: GridApi;\n  public isGridReadyForInitialization = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  public isViewActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: this.columnPickerOptions,\n  };\n\n  constructor(\n    private skyAgGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.skyAgGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefinitions,\n        rowSelection: 'multiple',\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.updateColumnOrder();\n        this.isGridReadyForInitialization = true;\n        this.updateDisplayedItems();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isViewActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateDisplayedItems();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateDisplayedItems();\n    }\n  }\n\n  private searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n        let property: keyof typeof item;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            property === 'name'\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  private filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: SkyAgGridDemoRow) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n\n  private updateColumnOrder(): void {\n    const viewState: SkyDataViewState | undefined =\n      this.dataState.getViewStateById(this.viewId);\n\n    if (viewState) {\n      this.columnDefinitions.sort((columnDefinition1, columnDefinition2) => {\n        const displayedColumnIdIndex1: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition1.field\n          );\n        const displayedColumnIdIndex2: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition2.field\n          );\n\n        if (displayedColumnIdIndex1 === -1) {\n          return 0;\n        } else if (displayedColumnIdIndex2 === -1) {\n          return 0;\n        } else {\n          return displayedColumnIdIndex1 - displayedColumnIdIndex2;\n        }\n      });\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  private updateDisplayedItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n  }\n}\n"
     },
     {
-      "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\nimport { SkyAgGridDemoRow } from './data-manager-data-entry-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public set items(value: SkyAgGridDemoRow[]) {\n    this._items = value;\n    this.changeDetector.markForCheck();\n    if (this.gridApi) {\n      this.gridApi.refreshCells();\n    }\n  }\n\n  public viewId = 'dataEntryGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date): boolean =>\n            !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: SkyAgGridDemoRow[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n      {\n        id: 'validationCurrency',\n        label: 'Validation currency',\n        description: 'An example column for currency validation.',\n      },\n      {\n        id: 'validationDate',\n        label: 'Validation date',\n        description: 'An example column for date validation.',\n      },\n    ],\n  };\n\n  private _items: SkyAgGridDemoRow[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this._items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this._items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState?.displayedColumnIds || [];\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n        let property: keyof typeof item;\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            property === 'name'\n          ) {\n            const propertyText = item[property]?.toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: SkyAgGridDemoRow) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "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-data-entry-grid-docs-demo.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.component.html",
-      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n  </sky-data-manager-toolbar>\n  <app-data-manager-data-entry-grid-docs-demo-view-grid\n    [items]=\"items\"\n  ></app-data-manager-data-entry-grid-docs-demo-view-grid>\n</sky-data-manager>\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-data-entry-grid-docs-demo.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo',\n  templateUrl: './data-manager-data-entry-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataEntryGridDemoComponent implements OnInit {\n  public items = SKY_AG_GRID_DEMO_DATA;\n\n  public activeViewId = 'dataEntryGridWithDataManagerView';\n\n  public dataState = new SkyDataManagerState({});\n\n  public dataManagerConfig = {\n    filterModalComponent: DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Name (A - Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Name (Z - A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n\n  public defaultDataState = new SkyDataManagerState({\n    filterData: {\n      filtersApplied: false,\n      filters: {\n        hideSales: false,\n      },\n    },\n    views: [\n      {\n        viewId: 'dataEntryGridWithDataManagerView',\n        displayedColumnIds: [\n          'selected',\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n          'validationCurrency',\n          'validationDate',\n        ],\n      },\n    ],\n  });\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService,\n    private modalService: SkyModalService\n  ) {\n    this.dataManagerService\n      .getDataStateUpdates('dataEntryGridDataManager')\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  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.items.slice();\n    this.changeDetector.markForCheck();\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataManagerDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.items = result.data;\n        alert('Saving data!');\n      }\n      this.changeDetector.markForCheck();\n    });\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-data-entry-grid-docs-demo.module.ts",
-      "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": "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-entry-grid-docs-demo-context-menu.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-context-menu.component.html",
-      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
+      "fileName": "data-manager-data-grid-docs-demo.module.ts",
+      "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": "data-entry-grid-docs-demo-context-menu.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-context-menu.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-context-menu',\n  templateUrl: './data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  #name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.#name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.#name}`);\n  }\n}\n"
+      "fileName": "data-manager-data-grid-docs-demo.component.ts",
+      "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-entry-grid-docs-demo-data.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-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"
+      "fileName": "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-entry-grid-docs-demo-edit-modal-context.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal-context.ts",
-      "rawContents": "import { SkyAgGridDemoRow } from './data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\n}\n"
+      "fileName": "data-manager-data-grid-docs-demo-view-grid.component.ts",
+      "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\nimport { SkyAgGridDemoRow } from './data-manager-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: SkyAgGridDemoRow[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\n\n  public columnDefinitions: ColDef[] = [\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  private columnPickerOptions: SkyDataManagerColumnPickerOption[] = [\n    {\n      id: 'name',\n      label: 'Name',\n      description: 'The name of the employee.',\n    },\n    {\n      id: 'age',\n      label: 'Age',\n      description: 'The age of the employee.',\n    },\n    {\n      id: 'startDate',\n      label: 'Start date',\n      description: 'The start date of the employee.',\n    },\n    {\n      id: 'endDate',\n      label: 'End date',\n      description: 'The end date of the employee.',\n    },\n    {\n      id: 'department',\n      label: 'Department',\n      description: 'The department of the employee',\n    },\n    {\n      id: 'jobTitle',\n      label: 'Title',\n      description: 'The job title of the employee.',\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: SkyAgGridDemoRow[] = [];\n  public gridApi?: GridApi;\n  public isGridReadyForInitialization = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  public isViewActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: this.columnPickerOptions,\n  };\n\n  constructor(\n    private skyAgGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.skyAgGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefinitions,\n        rowSelection: 'single',\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.updateColumnOrder();\n        this.isGridReadyForInitialization = true;\n        this.updateDisplayedItems();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isViewActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateDisplayedItems();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateDisplayedItems();\n    }\n  }\n\n  private searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n        let property: keyof typeof item;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            property === 'name'\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  private filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: SkyAgGridDemoRow) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n\n  private updateColumnOrder(): void {\n    const viewState: SkyDataViewState | undefined =\n      this.dataState.getViewStateById(this.viewId);\n\n    if (viewState) {\n      this.columnDefinitions.sort((columnDefinition1, columnDefinition2) => {\n        const displayedColumnIdIndex1: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition1.field\n          );\n        const displayedColumnIdIndex2: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition2.field\n          );\n\n        if (displayedColumnIdIndex1 === -1) {\n          return 0;\n        } else if (displayedColumnIdIndex2 === -1) {\n          return 0;\n        } else {\n          return displayedColumnIdIndex1 - displayedColumnIdIndex2;\n        }\n      });\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  private updateDisplayedItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n  }\n}\n"
     },
     {
-      "fileName": "data-entry-grid-docs-demo-edit-modal.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "fileName": "data-manager-data-grid-docs-demo-view-grid.component.html",
+      "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-entry-grid-docs-demo-edit-modal.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridAutocompleteProperties,\n  SkyAgGridDatepickerProperties,\n  SkyAgGridService,\n  SkyCellType,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n  SkyAgGridDemoRow,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-edit-modal',\n  templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  #gridApi: GridApi | undefined;\n  #agGridService: SkyAgGridService;\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    agGridService: SkyAgGridService,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#agGridService = agGridService;\n    this.#changeDetector = changeDetector;\n\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n        type: SkyCellType.Text,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: string): boolean => String(value).length <= 10,\n            validatorMessage: `Value exceeds maximum length`,\n          },\n        },\n        cellEditorParams: {\n          skyComponentProperties: {\n            maxlength: 10,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: number): boolean => value >= 18,\n            validatorMessage: `Age must be 18+`,\n          },\n        },\n        maxWidth: 60,\n        cellEditorParams: {\n          skyComponentProperties: {\n            min: 18,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'startDate',\n        headerName: 'Start date',\n        type: SkyCellType.Date,\n        sort: 'asc',\n      },\n      {\n        field: 'endDate',\n        headerName: 'End date',\n        type: SkyCellType.Date,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.#departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.#clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAgGridAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n      {\n        colId: 'validationCurrency',\n        field: 'validationCurrency',\n        headerName: 'Validation currency',\n        type: [SkyCellType.CurrencyValidator],\n        editable: true,\n      },\n      {\n        colId: 'validationDate',\n        field: 'validationDate',\n        headerName: 'Validation date',\n        type: [SkyCellType.Date, SkyCellType.Validator],\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: Date): boolean =>\n              !!value && value > new Date(1985, 9, 26),\n            validatorMessage: 'Please enter a future date',\n          },\n        },\n        editable: true,\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.#agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.#changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.#gridApi = gridReadyEvent.api;\n    this.#gridApi.sizeColumnsToFit();\n    this.#changeDetector.markForCheck();\n  }\n\n  #departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.#clearJobTitle(node);\n    }\n  }\n\n  #clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      this.#changeDetector.markForCheck();\n      if (this.#gridApi) {\n        this.#gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n  }\n}\n"
+      "fileName": "data-manager-data-grid-docs-demo-filter-modal.component.ts",
+      "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(): void {\n    const result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters(): void {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n  }\n\n  public cancel(): void {\n    this.instance.cancel();\n  }\n}\n"
     },
     {
-      "fileName": "data-entry-grid-docs-demo.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo.component.html",
-      "rawContents": "<div>\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search\n        [searchText]=\"searchText\"\n        [debounceTime]=\"250\"\n        (searchApply)=\"searchApplied($event)\"\n        (searchChange)=\"searchApplied($event)\"\n        (searchClear)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [rowData]=\"gridData\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
+      "fileName": "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-entry-grid-docs-demo.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/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';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo',\n  templateUrl: './data-entry-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      colId: 'context',\n      headerName: '',\n      maxWidth: 50,\n      sortable: false,\n      cellRenderer: SkyDataEntryGridContextMenuComponent,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n      type: SkyCellType.Text,\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: string): boolean => String(value).length <= 10,\n          validatorMessage: `Value exceeds maximum length`,\n        },\n      },\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: number): boolean => value >= 18,\n          validatorMessage: `Age must be 18+`,\n        },\n      },\n      maxWidth: 60,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.#endDateFormatter,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      colId: 'validationCurrency',\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      colId: 'validationDate',\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date): boolean =>\n            !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Enter a future date',\n        },\n      },\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n\n  #agGridService: SkyAgGridService;\n  #modalService: SkyModalService;\n  #changeDetection: ChangeDetectorRef;\n\n  constructor(\n    agGridService: SkyAgGridService,\n    modalService: SkyModalService,\n    changeDetection: ChangeDetectorRef\n  ) {\n    this.#agGridService = agGridService;\n    this.#modalService = modalService;\n    this.#changeDetection = changeDetection;\n\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n\n    this.gridOptions = this.#agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.#changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.#changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.#modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(this.searchText);\n      const displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\n  }\n\n  #endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "fileName": "data-manager-data-grid-docs-demo-data.ts",
+      "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-entry-grid-docs-demo.module.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo.module.ts",
-      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\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 { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyDataEntryGridDemoComponent } from './data-entry-grid-docs-demo.component';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@NgModule({\n  declarations: [\n    SkyDataEntryGridContextMenuComponent,\n    SkyDataEntryGridDemoComponent,\n    SkyDataEntryGridEditModalComponent,\n    InlineHelpComponent,\n  ],\n  imports: [\n    SkyToolbarModule,\n    SkySearchModule,\n    AgGridModule,\n    SkyAgGridModule,\n    SkyModalModule,\n    SkyDropdownModule,\n    SkyHelpInlineModule,\n  ],\n  exports: [SkyDataEntryGridDemoComponent],\n})\nexport class SkyDataEntryGridDocsDemoModule {}\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": "inline-help.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/inline-help.component.html",
-      "rawContents": "<sky-help-inline\n  (actionClick)=\"onHelpClick()\"\n  class=\"sky-control-help\"\n></sky-help-inline>\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): void => this.onGridReady(gridReadyEvent),\n      rowSelection: 'multiple',\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
-      "fileName": "inline-help.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/inline-help.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n  selector: 'app-inline-help',\n  templateUrl: './inline-help.component.html',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n  readonly #displayName: string | undefined;\n\n  constructor(headerInfo: SkyAgGridHeaderInfo) {\n    this.#displayName = headerInfo.displayName;\n  }\n\n  public onHelpClick(): void {\n    alert(`Help was clicked for ${this.#displayName}.`);\n  }\n}\n"
+      "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-data.ts",
@@ -5214,19 +5214,19 @@
       "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-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": "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): void => this.onGridReady(gridReadyEvent),\n      rowSelection: 'multiple',\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "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 { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-basic-data-grid-docs-demo',\n  templateUrl: './basic-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n  public columnDefs: ColDef[] = [\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public gridOptions: GridOptions;\n  public searchText = '';\n\n  constructor(private agGridService: SkyAgGridService) {\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n      rowSelection: 'single',\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
-      "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.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/basic/basic-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-data-grid-docs-demo-data.ts",
@@ -5234,169 +5234,169 @@
       "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-ag-grid-wrapper>\n    <ag-grid-angular [gridOptions]=\"gridOptions\" [rowData]=\"gridData\">\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
+      "fileName": "inline-help.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/inline-help.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n  selector: 'app-inline-help',\n  templateUrl: './inline-help.component.html',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n  readonly #displayName: string | undefined;\n\n  constructor(headerInfo: SkyAgGridHeaderInfo) {\n    this.#displayName = headerInfo.displayName;\n  }\n\n  public onHelpClick(): void {\n    alert(`Help was clicked for ${this.#displayName}.`);\n  }\n}\n"
     },
     {
-      "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 { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './basic-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-basic-data-grid-docs-demo',\n  templateUrl: './basic-data-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyBasicDataGridDemoComponent {\n  public columnDefs: ColDef[] = [\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public gridOptions: GridOptions;\n  public searchText = '';\n\n  constructor(private agGridService: SkyAgGridService) {\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n      rowSelection: 'single',\n    };\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
+      "fileName": "inline-help.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/inline-help.component.html",
+      "rawContents": "<sky-help-inline\n  (actionClick)=\"onHelpClick()\"\n  class=\"sky-control-help\"\n></sky-help-inline>\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-entry-grid-docs-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo.module.ts",
+      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\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 { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyDataEntryGridDemoComponent } from './data-entry-grid-docs-demo.component';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@NgModule({\n  declarations: [\n    SkyDataEntryGridContextMenuComponent,\n    SkyDataEntryGridDemoComponent,\n    SkyDataEntryGridEditModalComponent,\n    InlineHelpComponent,\n  ],\n  imports: [\n    SkyToolbarModule,\n    SkySearchModule,\n    AgGridModule,\n    SkyAgGridModule,\n    SkyModalModule,\n    SkyDropdownModule,\n    SkyHelpInlineModule,\n  ],\n  exports: [SkyDataEntryGridDemoComponent],\n})\nexport class SkyDataEntryGridDocsDemoModule {}\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-entry-grid-docs-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/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';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo',\n  templateUrl: './data-entry-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridDemoComponent {\n  public gridData = SKY_AG_GRID_DEMO_DATA;\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      colId: 'context',\n      headerName: '',\n      maxWidth: 50,\n      sortable: false,\n      cellRenderer: SkyDataEntryGridContextMenuComponent,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n      type: SkyCellType.Text,\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: string): boolean => String(value).length <= 10,\n          validatorMessage: `Value exceeds maximum length`,\n        },\n      },\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: number): boolean => value >= 18,\n          validatorMessage: `Age must be 18+`,\n        },\n      },\n      maxWidth: 60,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.#endDateFormatter,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      colId: 'validationCurrency',\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      colId: 'validationDate',\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date): boolean =>\n            !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Enter a future date',\n        },\n      },\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n\n  #agGridService: SkyAgGridService;\n  #modalService: SkyModalService;\n  #changeDetection: ChangeDetectorRef;\n\n  constructor(\n    agGridService: SkyAgGridService,\n    modalService: SkyModalService,\n    changeDetection: ChangeDetectorRef\n  ) {\n    this.#agGridService = agGridService;\n    this.#modalService = modalService;\n    this.#changeDetection = changeDetection;\n\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n\n    this.gridOptions = this.#agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.#changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.#changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.#modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(this.searchText);\n      const displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\n  }\n\n  #endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
-      "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-entry-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo.component.html",
+      "rawContents": "<div>\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search\n        [searchText]=\"searchText\"\n        [debounceTime]=\"250\"\n        (searchApply)=\"searchApplied($event)\"\n        (searchChange)=\"searchApplied($event)\"\n        (searchClear)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [rowData]=\"gridData\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
     },
     {
-      "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-entry-grid-docs-demo-edit-modal.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridAutocompleteProperties,\n  SkyAgGridDatepickerProperties,\n  SkyAgGridService,\n  SkyCellType,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n  SkyAgGridDemoRow,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-edit-modal',\n  templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  #gridApi: GridApi | undefined;\n  #agGridService: SkyAgGridService;\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    agGridService: SkyAgGridService,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#agGridService = agGridService;\n    this.#changeDetector = changeDetector;\n\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n        type: SkyCellType.Text,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: string): boolean => String(value).length <= 10,\n            validatorMessage: `Value exceeds maximum length`,\n          },\n        },\n        cellEditorParams: {\n          skyComponentProperties: {\n            maxlength: 10,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: number): boolean => value >= 18,\n            validatorMessage: `Age must be 18+`,\n          },\n        },\n        maxWidth: 60,\n        cellEditorParams: {\n          skyComponentProperties: {\n            min: 18,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'startDate',\n        headerName: 'Start date',\n        type: SkyCellType.Date,\n        sort: 'asc',\n      },\n      {\n        field: 'endDate',\n        headerName: 'End date',\n        type: SkyCellType.Date,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.#departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.#clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAgGridAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n      {\n        colId: 'validationCurrency',\n        field: 'validationCurrency',\n        headerName: 'Validation currency',\n        type: [SkyCellType.CurrencyValidator],\n        editable: true,\n      },\n      {\n        colId: 'validationDate',\n        field: 'validationDate',\n        headerName: 'Validation date',\n        type: [SkyCellType.Date, SkyCellType.Validator],\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: Date): boolean =>\n              !!value && value > new Date(1985, 9, 26),\n            validatorMessage: 'Please enter a future date',\n          },\n        },\n        editable: true,\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.#agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.#changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.#gridApi = gridReadyEvent.api;\n    this.#gridApi.sizeColumnsToFit();\n    this.#changeDetector.markForCheck();\n  }\n\n  #departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.#clearJobTitle(node);\n    }\n  }\n\n  #clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      this.#changeDetector.markForCheck();\n      if (this.#gridApi) {\n        this.#gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n  }\n}\n"
     },
     {
-      "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-entry-grid-docs-demo-edit-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\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\nimport { SkyAgGridDemoRow } from './data-manager-multiselect-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-data-manager-multiselect-data-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-multiselect-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerMultiselectDataGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public items: SkyAgGridDemoRow[] = [];\n\n  public viewId = 'dataGridMultiselectWithDataManagerView';\n\n  public columnDefinitions: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  private columnPickerOptions: SkyDataManagerColumnPickerOption[] = [\n    {\n      id: 'selected',\n      label: '',\n      alwaysDisplayed: true,\n    },\n    {\n      id: 'name',\n      label: 'Name',\n      description: 'The name of the employee.',\n    },\n    {\n      id: 'age',\n      label: 'Age',\n      description: 'The age of the employee.',\n    },\n    {\n      id: 'startDate',\n      label: 'Start date',\n      description: 'The start date of the employee.',\n    },\n    {\n      id: 'endDate',\n      label: 'End date',\n      description: 'The end date of the employee.',\n    },\n    {\n      id: 'department',\n      label: 'Department',\n      description: 'The department of the employee',\n    },\n    {\n      id: 'jobTitle',\n      label: 'Title',\n      description: 'The job title of the employee.',\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: SkyAgGridDemoRow[] = [];\n  public gridApi?: GridApi;\n  public isGridReadyForInitialization = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  public isViewActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: this.columnPickerOptions,\n  };\n\n  constructor(\n    private skyAgGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.skyAgGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefinitions,\n        rowSelection: 'multiple',\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.updateColumnOrder();\n        this.isGridReadyForInitialization = true;\n        this.updateDisplayedItems();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isViewActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateDisplayedItems();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateDisplayedItems();\n    }\n  }\n\n  private searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n        let property: keyof typeof item;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            property === 'name'\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  private filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: SkyAgGridDemoRow) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n\n  private updateColumnOrder(): void {\n    const viewState: SkyDataViewState | undefined =\n      this.dataState.getViewStateById(this.viewId);\n\n    if (viewState) {\n      this.columnDefinitions.sort((columnDefinition1, columnDefinition2) => {\n        const displayedColumnIdIndex1: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition1.field\n          );\n        const displayedColumnIdIndex2: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition2.field\n          );\n\n        if (displayedColumnIdIndex1 === -1) {\n          return 0;\n        } else if (displayedColumnIdIndex2 === -1) {\n          return 0;\n        } else {\n          return displayedColumnIdIndex1 - displayedColumnIdIndex2;\n        }\n      });\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  private updateDisplayedItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n  }\n}\n"
+      "fileName": "data-entry-grid-docs-demo-edit-modal-context.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-edit-modal-context.ts",
+      "rawContents": "import { SkyAgGridDemoRow } from './data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\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-entry-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-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"
     },
     {
-      "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-entry-grid-docs-demo-context-menu.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-context-menu.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-context-menu',\n  templateUrl: './data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  #name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.#name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.#name}`);\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-entry-grid-docs-demo-context-menu.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/inline-help/data-entry-grid-docs-demo-context-menu.component.html",
+      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
     },
     {
-      "fileName": "data-manager-data-grid-docs-demo-data.ts",
-      "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-entry-grid-docs-demo.module.ts",
+      "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": "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-entry-grid-docs-demo.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\nimport { SkyDataManagerDataEntryGridEditModalComponent } from './data-manager-data-entry-grid-docs-demo-edit-modal.component';\nimport { DataManagerDataEntryGridDocsDemoFiltersModalComponent } from './data-manager-data-entry-grid-docs-demo-filter-modal.component';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo',\n  templateUrl: './data-manager-data-entry-grid-docs-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [SkyDataManagerService],\n})\nexport class SkyDataManagerDataEntryGridDemoComponent implements OnInit {\n  public items = SKY_AG_GRID_DEMO_DATA;\n\n  public activeViewId = 'dataEntryGridWithDataManagerView';\n\n  public dataState = new SkyDataManagerState({});\n\n  public dataManagerConfig = {\n    filterModalComponent: DataManagerDataEntryGridDocsDemoFiltersModalComponent,\n    sortOptions: [\n      {\n        id: 'az',\n        label: 'Name (A - Z)',\n        descending: false,\n        propertyName: 'name',\n      },\n      {\n        id: 'za',\n        label: 'Name (Z - A)',\n        descending: true,\n        propertyName: 'name',\n      },\n    ],\n  };\n\n  public defaultDataState = new SkyDataManagerState({\n    filterData: {\n      filtersApplied: false,\n      filters: {\n        hideSales: false,\n      },\n    },\n    views: [\n      {\n        viewId: 'dataEntryGridWithDataManagerView',\n        displayedColumnIds: [\n          'selected',\n          'name',\n          'age',\n          'startDate',\n          'endDate',\n          'department',\n          'jobTitle',\n          'validationCurrency',\n          'validationDate',\n        ],\n      },\n    ],\n  });\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService,\n    private modalService: SkyModalService\n  ) {\n    this.dataManagerService\n      .getDataStateUpdates('dataEntryGridDataManager')\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  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.items.slice();\n    this.changeDetector.markForCheck();\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataManagerDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.items = result.data;\n        alert('Saving data!');\n      }\n      this.changeDetector.markForCheck();\n    });\n  }\n}\n"
     },
     {
-      "fileName": "data-manager-data-grid-docs-demo-filter-modal.component.ts",
-      "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(): void {\n    const result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters(): void {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n  }\n\n  public cancel(): void {\n    this.instance.cancel();\n  }\n}\n"
+      "fileName": "data-manager-data-entry-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo.component.html",
+      "rawContents": "<sky-data-manager>\n  <sky-data-manager-toolbar>\n    <sky-data-manager-toolbar-left-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-data-manager-toolbar-left-item>\n  </sky-data-manager-toolbar>\n  <app-data-manager-data-entry-grid-docs-demo-view-grid\n    [items]=\"items\"\n  ></app-data-manager-data-entry-grid-docs-demo-view-grid>\n</sky-data-manager>\n"
     },
     {
-      "fileName": "data-manager-data-grid-docs-demo-view-grid.component.html",
-      "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-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\nimport { SkyAgGridDemoRow } from './data-manager-data-entry-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-view-grid',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoViewGridComponent\n  implements OnInit\n{\n  @Input()\n  public set items(value: SkyAgGridDemoRow[]) {\n    this._items = value;\n    this.changeDetector.markForCheck();\n    if (this.gridApi) {\n      this.gridApi.refreshCells();\n    }\n  }\n\n  public viewId = 'dataEntryGridWithDataManagerView';\n\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date): boolean =>\n            !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Please enter a future date',\n        },\n      },\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: SkyAgGridDemoRow[] = [];\n  public gridApi?: GridApi;\n  public gridInitialized = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n  public isActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    multiselectToolbarEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: [\n      {\n        id: 'selected',\n        label: 'selected',\n        alwaysDisplayed: true,\n      },\n      {\n        id: 'name',\n        label: 'Name',\n        description: 'The name of the employee.',\n      },\n      {\n        id: 'age',\n        label: 'Age',\n        description: 'The age of the employee.',\n      },\n      {\n        id: 'startDate',\n        label: 'Start date',\n        description: 'The start date of the employee.',\n      },\n      {\n        id: 'endDate',\n        label: 'End date',\n        description: 'The end date of the employee.',\n      },\n      {\n        id: 'department',\n        label: 'Department',\n        description: 'The department of the employee',\n      },\n      {\n        id: 'jobTitle',\n        label: 'Title',\n        description: 'The job title of the employee.',\n      },\n      {\n        id: 'validationCurrency',\n        label: 'Validation currency',\n        description: 'An example column for currency validation.',\n      },\n      {\n        id: 'validationDate',\n        label: 'Validation date',\n        description: 'An example column for date validation.',\n      },\n    ],\n  };\n\n  private _items: SkyAgGridDemoRow[] = [];\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this._items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefs,\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.setInitialColumnOrder();\n        this.updateData();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public updateData(): void {\n    this.sortItems();\n    this.displayedItems = this.filterItems(this.searchItems(this._items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  public setInitialColumnOrder(): void {\n    const viewState = this.dataState.getViewStateById(this.viewId);\n    const visibleColumns = viewState?.displayedColumnIds || [];\n\n    this.columnDefs.sort((col1, col2) => {\n      const col1Index = visibleColumns.findIndex(\n        (colId: string) => colId === col1.colId\n      );\n      const col2Index = visibleColumns.findIndex(\n        (colId: string) => colId === col2.colId\n      );\n\n      if (col1Index === -1) {\n        col1.hide = true;\n        return 0;\n      } else if (col2Index === -1) {\n        col2.hide = true;\n        return 0;\n      } else {\n        return col1Index - col2Index;\n      }\n    });\n\n    this.gridInitialized = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateData();\n    this.changeDetector.markForCheck();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateData();\n    }\n  }\n\n  public sortItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n  }\n\n  public searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n        let property: keyof typeof item;\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            property === 'name'\n          ) {\n            const propertyText = item[property]?.toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n\n        return false;\n      });\n    }\n\n    return searchedItems;\n  }\n\n  public filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: SkyAgGridDemoRow) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
-      "fileName": "data-manager-data-grid-docs-demo-view-grid.component.ts",
-      "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\nimport { SkyAgGridDemoRow } from './data-manager-data-grid-docs-demo-data';\n\n@Component({\n  selector: 'app-data-manager-data-grid-docs-demo-view-grid',\n  templateUrl: './data-manager-data-grid-docs-demo-view-grid.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataGridDocsDemoViewGridComponent implements OnInit {\n  @Input()\n  public items: SkyAgGridDemoRow[] = [];\n\n  public viewId = 'dataGridWithDataManagerView';\n\n  public columnDefinitions: ColDef[] = [\n    {\n      field: 'name',\n      headerName: 'Name',\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n  ];\n\n  private columnPickerOptions: SkyDataManagerColumnPickerOption[] = [\n    {\n      id: 'name',\n      label: 'Name',\n      description: 'The name of the employee.',\n    },\n    {\n      id: 'age',\n      label: 'Age',\n      description: 'The age of the employee.',\n    },\n    {\n      id: 'startDate',\n      label: 'Start date',\n      description: 'The start date of the employee.',\n    },\n    {\n      id: 'endDate',\n      label: 'End date',\n      description: 'The end date of the employee.',\n    },\n    {\n      id: 'department',\n      label: 'Department',\n      description: 'The department of the employee',\n    },\n    {\n      id: 'jobTitle',\n      label: 'Title',\n      description: 'The job title of the employee.',\n    },\n  ];\n\n  public dataState = new SkyDataManagerState({});\n\n  public columnApi?: ColumnApi;\n  public displayedItems: SkyAgGridDemoRow[] = [];\n  public gridApi?: GridApi;\n  public isGridReadyForInitialization = false;\n  public gridOptions!: GridOptions;\n  public noRowsTemplate = `<div class=\"sky-deemphasized\">No results found.</div>`;\n  public isViewActive = false;\n\n  public viewConfig: SkyDataViewConfig = {\n    id: this.viewId,\n    name: 'Data Grid View',\n    icon: 'table',\n    searchEnabled: true,\n    sortEnabled: true,\n    columnPickerEnabled: true,\n    filterButtonEnabled: true,\n    columnOptions: this.columnPickerOptions,\n  };\n\n  constructor(\n    private skyAgGridService: SkyAgGridService,\n    private changeDetector: ChangeDetectorRef,\n    private dataManagerService: SkyDataManagerService\n  ) {}\n\n  public ngOnInit(): void {\n    this.displayedItems = this.items;\n\n    this.dataManagerService.initDataView(this.viewConfig);\n\n    this.gridOptions = this.skyAgGridService.getGridOptions({\n      gridOptions: {\n        columnDefs: this.columnDefinitions,\n        rowSelection: 'single',\n        onGridReady: this.onGridReady.bind(this),\n      },\n    });\n\n    this.dataManagerService\n      .getDataStateUpdates(this.viewId)\n      .subscribe((state) => {\n        this.dataState = state;\n        this.updateColumnOrder();\n        this.isGridReadyForInitialization = true;\n        this.updateDisplayedItems();\n        this.changeDetector.detectChanges();\n      });\n\n    this.dataManagerService.getActiveViewIdUpdates().subscribe((id) => {\n      this.isViewActive = id === this.viewId;\n      this.changeDetector.detectChanges();\n    });\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.columnApi = gridReadyEvent.columnApi;\n    this.updateDisplayedItems();\n  }\n\n  public onRowSelected(rowSelectedEvent: RowSelectedEvent): void {\n    if (!rowSelectedEvent.data.selected) {\n      this.updateDisplayedItems();\n    }\n  }\n\n  private searchItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let searchedItems = items;\n    const searchText = this.dataState && this.dataState.searchText;\n\n    if (searchText) {\n      searchedItems = items.filter(function (item: SkyAgGridDemoRow) {\n        let property: keyof typeof item;\n\n        for (property in item) {\n          if (\n            Object.prototype.hasOwnProperty.call(item, property) &&\n            property === 'name'\n          ) {\n            const propertyText = item[property].toLowerCase();\n            if (propertyText.indexOf(searchText) > -1) {\n              return true;\n            }\n          }\n        }\n        return false;\n      });\n    }\n    return searchedItems;\n  }\n\n  private filterItems(items: SkyAgGridDemoRow[]): SkyAgGridDemoRow[] {\n    let filteredItems = items;\n    const filterData = this.dataState && this.dataState.filterData;\n\n    if (filterData && filterData.filters) {\n      const filters = filterData.filters;\n      filteredItems = items.filter((item: SkyAgGridDemoRow) => {\n        return (\n          ((filters.hideSales && item.department.name !== 'Sales') ||\n            !filters.hideSales) &&\n          ((filters.jobTitle !== 'any' &&\n            item.jobTitle?.name === filters.jobTitle) ||\n            !filters.jobTitle ||\n            filters.jobTitle === 'any')\n        );\n      });\n    }\n\n    return filteredItems;\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n\n  private updateColumnOrder(): void {\n    const viewState: SkyDataViewState | undefined =\n      this.dataState.getViewStateById(this.viewId);\n\n    if (viewState) {\n      this.columnDefinitions.sort((columnDefinition1, columnDefinition2) => {\n        const displayedColumnIdIndex1: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition1.field\n          );\n        const displayedColumnIdIndex2: number =\n          viewState.displayedColumnIds.findIndex(\n            (aDisplayedColumnId: string) =>\n              aDisplayedColumnId === columnDefinition2.field\n          );\n\n        if (displayedColumnIdIndex1 === -1) {\n          return 0;\n        } else if (displayedColumnIdIndex2 === -1) {\n          return 0;\n        } else {\n          return displayedColumnIdIndex1 - displayedColumnIdIndex2;\n        }\n      });\n      this.changeDetector.markForCheck();\n    }\n  }\n\n  private updateDisplayedItems(): void {\n    const sortOption = this.dataState.activeSortOption;\n    if (this.columnApi && sortOption) {\n      this.columnApi.applyColumnState({\n        state: [\n          {\n            colId: sortOption.propertyName,\n            sort: sortOption.descending ? 'desc' : 'asc',\n          },\n        ],\n      });\n    }\n\n    this.displayedItems = this.filterItems(this.searchItems(this.items));\n\n    if (this.dataState.onlyShowSelected) {\n      this.displayedItems = this.displayedItems.filter((item) => item.selected);\n    }\n\n    if (this.displayedItems.length > 0) {\n      this.gridApi?.hideOverlay();\n    } else {\n      this.gridApi?.showNoRowsOverlay();\n    }\n  }\n}\n"
+      "fileName": "data-manager-data-entry-grid-docs-demo-view-grid.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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      [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.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-entry-grid-docs-demo-filter-modal.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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-entry-grid-docs-demo-filter-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-filter-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataManagerDataEntryGridDocsDemoFiltersModalComponent {\n  public jobTitle = '';\n\n  public hideSales = false;\n\n  constructor(\n    public context: SkyDataManagerFilterModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    if (this.context.filterData && this.context.filterData.filters) {\n      const filters = this.context.filterData.filters;\n      this.jobTitle = filters.jobTitle || 'any';\n      this.hideSales = filters.hideSales || false;\n    }\n    this.changeDetector.markForCheck();\n  }\n\n  public applyFilters(): void {\n    const result: SkyDataManagerFilterData = {};\n\n    result.filtersApplied = this.jobTitle !== 'any' || this.hideSales;\n    result.filters = {\n      jobTitle: this.jobTitle,\n      hideSales: this.hideSales,\n    };\n    this.changeDetector.markForCheck();\n\n    this.instance.save(result);\n  }\n\n  public clearAllFilters(): void {\n    this.hideSales = false;\n    this.jobTitle = 'any';\n    this.changeDetector.markForCheck();\n  }\n\n  public cancel(): void {\n    this.instance.cancel();\n  }\n}\n"
     },
     {
-      "fileName": "data-manager-data-grid-docs-demo.component.ts",
-      "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-entry-grid-docs-demo-filter-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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.module.ts",
-      "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": "data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridAutocompleteProperties,\n  SkyAgGridDatepickerProperties,\n  SkyAgGridService,\n  SkyCellType,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n  SkyAgGridDemoRow,\n} from './data-manager-data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-manager-data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-edit-modal',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        maxWidth: 60,\n        editable: true,\n      },\n      {\n        field: 'startDate',\n        headerName: 'Start date',\n        type: SkyCellType.Date,\n        sort: 'asc',\n      },\n      {\n        field: 'endDate',\n        headerName: 'End date',\n        type: SkyCellType.Date,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAgGridAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n      {\n        colId: 'validationCurrency',\n        field: 'validationCurrency',\n        headerName: 'Validation currency',\n        type: [SkyCellType.CurrencyValidator],\n        editable: true,\n      },\n      {\n        colId: 'validationDate',\n        field: 'validationDate',\n        headerName: 'Validation date',\n        type: [SkyCellType.Date, SkyCellType.Validator],\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: Date): boolean =>\n              !!value && value > new Date(1985, 9, 26),\n            validatorMessage: 'Enter a future date.',\n          },\n        },\n        editable: true,\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n    this.changeDetector.markForCheck();\n  }\n}\n"
     },
     {
-      "fileName": "data-grid-demo-data.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/data-grid-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  },\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-entry-grid-docs-demo-edit-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
-      "fileName": "data-grid-demo.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/data-grid-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"
+      "fileName": "data-manager-data-entry-grid-docs-demo-edit-modal-context.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-edit-modal-context.ts",
+      "rawContents": "import { SkyAgGridDemoRow } from './data-manager-data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\n}\n"
     },
     {
-      "fileName": "data-grid-demo.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/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 './data-grid-demo-data';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@Component({\n  selector: 'app-data-grid-demo',\n  templateUrl: './data-grid-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataGridDemoComponent {\n  public columnDefs: ColDef[] = [\n    {\n      field: 'selected',\n      type: SkyCellType.RowSelector,\n    },\n    {\n      field: 'name',\n      headerName: 'Name',\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      maxWidth: 60,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.#endDateFormatter,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n      headerComponentParams: {\n        inlineHelpComponent: InlineHelpComponent,\n      },\n    },\n  ];\n\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  #agGridService: SkyAgGridService;\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    agGridService: SkyAgGridService,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#agGridService = agGridService;\n    this.#changeDetector = changeDetector;\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  #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-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-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: SkyAgGridDemoRow[] = [\n  {\n    selected: true,\n    name: 'Billy Bob',\n    age: 55,\n    startDate: new Date('12/1/1994'),\n    department: SKY_DEPARTMENTS[3],\n    jobTitle: SKY_JOB_TITLES['Customer Support'][1],\n  },\n  {\n    selected: false,\n    name: 'Jane Deere',\n    age: 33,\n    startDate: new Date('7/15/2009'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][2],\n  },\n  {\n    selected: false,\n    name: 'John Doe',\n    age: 38,\n    startDate: new Date('9/1/2017'),\n    endDate: new Date('9/30/2017'),\n    department: SKY_DEPARTMENTS[1],\n    jobTitle: SKY_JOB_TITLES['Sales'][1],\n  },\n  {\n    selected: false,\n    name: 'David Smith',\n    age: 51,\n    startDate: new Date('1/1/2012'),\n    endDate: new Date('6/15/2018'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][4],\n  },\n  {\n    selected: true,\n    name: 'Emily Johnson',\n    age: 41,\n    startDate: new Date('1/15/2014'),\n    department: SKY_DEPARTMENTS[0],\n    jobTitle: SKY_JOB_TITLES['Marketing'][2],\n  },\n  {\n    selected: false,\n    name: 'Nicole Davidson',\n    age: 22,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][0],\n  },\n  {\n    selected: false,\n    name: 'Carl Roberts',\n    age: 23,\n    startDate: new Date('11/1/2019'),\n    department: SKY_DEPARTMENTS[2],\n    jobTitle: SKY_JOB_TITLES['Engineering'][3],\n  },\n];\n"
     },
     {
-      "fileName": "data-grid-demo.module.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/data-grid-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 { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyToolbarModule } from '@skyux/layout';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataGridDemoComponent } from './data-grid-demo.component';\nimport { InlineHelpComponent } from './inline-help.component';\n\n@NgModule({\n  declarations: [DataGridDemoComponent, InlineHelpComponent],\n  exports: [DataGridDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyHelpInlineModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class DataGridDemoModule {}\n"
+      "fileName": "data-manager-data-entry-grid-docs-demo-context-menu.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-context-menu.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-manager-data-entry-grid-docs-demo-context-menu',\n  templateUrl:\n    './data-manager-data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataManagerDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
     },
     {
-      "fileName": "inline-help.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/inline-help.component.html",
-      "rawContents": "<sky-help-inline\n  (actionClick)=\"onHelpClick()\"\n  class=\"sky-control-help\"\n></sky-help-inline>\n"
+      "fileName": "data-manager-data-entry-grid-docs-demo-context-menu.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/data-manager-added/data-manager-data-entry-grid-docs-demo-context-menu.component.html",
+      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
     },
     {
-      "fileName": "inline-help.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/inline-help/inline-help.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyAgGridHeaderInfo } from '@skyux/ag-grid';\n\n@Component({\n  selector: 'app-inline-help',\n  templateUrl: './inline-help.component.html',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InlineHelpComponent {\n  readonly #displayName: string | undefined;\n\n  constructor(headerInfo: SkyAgGridHeaderInfo) {\n    this.#displayName = headerInfo.displayName;\n  }\n\n  public onHelpClick(): void {\n    alert(`Help was clicked for ${this.#displayName}.`);\n  }\n}\n"
+      "fileName": "data-entry-grid-docs-demo.module.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.module.ts",
+      "rawContents": "import { NgModule } from '@angular/core';\nimport { SkyAgGridModule } from '@skyux/ag-grid';\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 { SkyDataEntryGridContextMenuComponent } from './data-entry-grid-docs-demo-context-menu.component';\nimport { SkyDataEntryGridEditModalComponent } from './data-entry-grid-docs-demo-edit-modal.component';\nimport { SkyDataEntryGridDemoComponent } from './data-entry-grid-docs-demo.component';\n\n@NgModule({\n  declarations: [\n    SkyDataEntryGridContextMenuComponent,\n    SkyDataEntryGridDemoComponent,\n    SkyDataEntryGridEditModalComponent,\n  ],\n  imports: [\n    SkyToolbarModule,\n    SkySearchModule,\n    AgGridModule,\n    SkyAgGridModule,\n    SkyModalModule,\n    SkyDropdownModule,\n  ],\n  exports: [SkyDataEntryGridDemoComponent],\n})\nexport class SkyDataEntryGridDocsDemoModule {}\n"
     },
     {
-      "fileName": "data-grid-paging-demo-data.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-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  },\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-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: string): boolean => String(value).length <= 10,\n          validatorMessage: `Value exceeds maximum length`,\n        },\n      },\n    },\n    {\n      field: 'age',\n      headerName: 'Age',\n      type: SkyCellType.Number,\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: number): boolean => value >= 18,\n          validatorMessage: `Age must be 18+`,\n        },\n      },\n      maxWidth: 60,\n    },\n    {\n      field: 'startDate',\n      headerName: 'Start date',\n      type: SkyCellType.Date,\n      sort: 'asc',\n    },\n    {\n      field: 'endDate',\n      headerName: 'End date',\n      type: SkyCellType.Date,\n      valueFormatter: this.endDateFormatter,\n    },\n    {\n      field: 'department',\n      headerName: 'Department',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      field: 'jobTitle',\n      headerName: 'Title',\n      type: SkyCellType.Autocomplete,\n    },\n    {\n      colId: 'validationCurrency',\n      field: 'validationCurrency',\n      headerName: 'Validation currency',\n      type: [SkyCellType.CurrencyValidator],\n    },\n    {\n      colId: 'validationDate',\n      field: 'validationDate',\n      headerName: 'Validation date',\n      type: [SkyCellType.Date, SkyCellType.Validator],\n      cellRendererParams: {\n        skyComponentProperties: {\n          validator: (value: Date): boolean =>\n            !!value && value > new Date(1985, 9, 26),\n          validatorMessage: 'Enter a future date',\n        },\n      },\n    },\n  ];\n\n  public gridApi: GridApi | undefined;\n  public gridOptions: GridOptions;\n  public searchText = '';\n  public noRowsTemplate = `<div class=\"sky-font-deemphasized\">No results found.</div>`;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    private modalService: SkyModalService,\n    private changeDetection: ChangeDetectorRef\n  ) {\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n\n    this.gridOptions = this.agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetection.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetection.markForCheck();\n  }\n\n  public openModal(): void {\n    const context = new SkyDataEntryGridEditModalContext();\n    context.gridData = this.gridData;\n\n    const options = {\n      providers: [\n        { provide: SkyDataEntryGridEditModalContext, useValue: context },\n      ],\n      ariaDescribedBy: 'docs-edit-grid-modal-content',\n      size: 'large',\n    };\n\n    const modalInstance = this.modalService.open(\n      SkyDataEntryGridEditModalComponent,\n      options\n    );\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel' || result.reason === 'close') {\n        alert('Edits canceled!');\n      } else {\n        this.gridData = result.data;\n        if (this.gridApi) {\n          this.gridApi.refreshCells();\n        }\n        alert('Saving data!');\n      }\n    });\n  }\n\n  public searchApplied(searchText: string | void): void {\n    if (searchText) {\n      this.searchText = searchText;\n    } else {\n      this.searchText = '';\n    }\n    if (this.gridApi) {\n      this.gridApi.setQuickFilter(this.searchText);\n      const displayedRowCount = this.gridApi.getDisplayedRowCount();\n      if (displayedRowCount > 0) {\n        this.gridApi.hideOverlay();\n      } else {\n        this.gridApi.showNoRowsOverlay();\n      }\n    }\n  }\n\n  private endDateFormatter(params: ValueFormatterParams): string {\n    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return params.value\n      ? params.value.toLocaleDateString('en-us', dateConfig)\n      : 'N/A';\n  }\n}\n"
     },
     {
-      "fileName": "data-grid-paging-demo.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-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<sky-paging\n  [itemCount]=\"gridData.length\"\n  [pageSize]=\"pageSize\"\n  [currentPage]=\"currentPage\"\n  (currentPageChange)=\"onPageChange($event)\"\n>\n</sky-paging>\n"
+      "fileName": "data-entry-grid-docs-demo.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo.component.html",
+      "rawContents": "<div>\n  <sky-toolbar>\n    <sky-toolbar-item>\n      <button\n        class=\"sky-btn sky-btn-primary\"\n        id=\"edit-btn\"\n        (click)=\"openModal()\"\n      >\n        Edit\n      </button>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-search\n        [searchText]=\"searchText\"\n        [debounceTime]=\"250\"\n        (searchApply)=\"searchApplied($event)\"\n        (searchChange)=\"searchApplied($event)\"\n        (searchClear)=\"searchApplied($event)\"\n      >\n      </sky-search>\n    </sky-toolbar-item>\n  </sky-toolbar>\n  <sky-ag-grid-wrapper>\n    <ag-grid-angular\n      [gridOptions]=\"gridOptions\"\n      [rowData]=\"gridData\"\n      [overlayNoRowsTemplate]=\"noRowsTemplate\"\n    >\n    </ag-grid-angular>\n  </sky-ag-grid-wrapper>\n</div>\n"
     },
     {
-      "fileName": "data-grid-paging-demo.component.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-demo.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnDestroy,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { ActivatedRoute, NavigationEnd, Router } from '@angular/router';\nimport { SkyAgGridService, SkyCellType } from '@skyux/ag-grid';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ValueFormatterParams,\n} from 'ag-grid-community';\nimport { Subscription } from 'rxjs';\nimport { filter, map } from 'rxjs/operators';\n\nimport { SKY_AG_GRID_DEMO_DATA } from './data-grid-paging-demo-data';\n\n@Component({\n  selector: 'app-data-grid-paging-demo',\n  templateUrl: './data-grid-paging-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataGridPagingDemoComponent implements OnInit, OnDestroy {\n  public currentPage = 1;\n\n  public readonly pageSize = 3;\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  #activatedRoute = inject(ActivatedRoute);\n  #agGridService = inject(SkyAgGridService);\n  #changeDetector = inject(ChangeDetectorRef);\n  #router = inject(Router);\n  #subscriptions = new Subscription();\n\n  constructor() {\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n      rowSelection: 'single',\n      pagination: true,\n      suppressPaginationPanel: true,\n      paginationPageSize: this.pageSize,\n    };\n    this.gridOptions = this.#agGridService.getGridOptions({\n      gridOptions: this.gridOptions,\n    });\n  }\n\n  public ngOnInit(): void {\n    this.#subscriptions.add(\n      this.#activatedRoute.queryParamMap\n        .pipe(map((params) => params.get('page') || '1'))\n        .subscribe((page) => {\n          this.currentPage = Number(page);\n          this.gridApi?.paginationGoToPage(this.currentPage - 1);\n          this.#changeDetector.detectChanges();\n        })\n    );\n    this.#subscriptions.add(\n      this.#router.events\n        .pipe(filter((event) => event instanceof NavigationEnd))\n        .subscribe(() => {\n          const page = this.#activatedRoute.snapshot.paramMap.get('page');\n          if (page) {\n            this.currentPage = Number(page);\n          }\n          this.gridApi?.paginationGoToPage(this.currentPage - 1);\n          this.#changeDetector.detectChanges();\n        })\n    );\n  }\n\n  public ngOnDestroy(): void {\n    this.#subscriptions.unsubscribe();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.gridApi.paginationGoToPage(this.currentPage - 1);\n  }\n\n  public onPageChange(page: number): void {\n    this.#router\n      .navigate(['.'], {\n        relativeTo: this.#activatedRoute,\n        queryParams: { page: page.toString(10) },\n        queryParamsHandling: 'merge',\n      })\n      .then();\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-edit-modal.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n} from '@angular/core';\nimport {\n  SkyAgGridAutocompleteProperties,\n  SkyAgGridDatepickerProperties,\n  SkyAgGridService,\n  SkyCellType,\n} from '@skyux/ag-grid';\nimport { SkyAutocompleteSelectionChange } from '@skyux/lookup';\nimport { SkyModalInstance } from '@skyux/modals';\n\nimport {\n  ColDef,\n  GridApi,\n  GridOptions,\n  GridReadyEvent,\n  ICellEditorParams,\n  NewValueParams,\n  RowNode,\n} from 'ag-grid-community';\n\nimport {\n  SKY_DEPARTMENTS,\n  SKY_JOB_TITLES,\n  SkyAgGridDemoRow,\n} from './data-entry-grid-docs-demo-data';\nimport { SkyDataEntryGridEditModalContext } from './data-entry-grid-docs-demo-edit-modal-context';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-edit-modal',\n  templateUrl: './data-entry-grid-docs-demo-edit-modal.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridEditModalComponent {\n  public columnDefs: ColDef[];\n  private gridApi: GridApi | undefined;\n  public gridData: SkyAgGridDemoRow[];\n  public gridOptions: GridOptions;\n\n  constructor(\n    private agGridService: SkyAgGridService,\n    public context: SkyDataEntryGridEditModalContext,\n    public instance: SkyModalInstance,\n    private changeDetector: ChangeDetectorRef\n  ) {\n    this.columnDefs = [\n      {\n        field: 'name',\n        headerName: 'Name',\n        type: SkyCellType.Text,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: string): boolean => String(value).length <= 10,\n            validatorMessage: `Value exceeds maximum length`,\n          },\n        },\n        cellEditorParams: {\n          skyComponentProperties: {\n            maxlength: 10,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'age',\n        headerName: 'Age',\n        type: SkyCellType.Number,\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: number): boolean => value >= 18,\n            validatorMessage: `Age must be 18+`,\n          },\n        },\n        maxWidth: 60,\n        cellEditorParams: {\n          skyComponentProperties: {\n            min: 18,\n          },\n        },\n        editable: true,\n      },\n      {\n        field: 'startDate',\n        headerName: 'Start date',\n        type: SkyCellType.Date,\n        sort: 'asc',\n      },\n      {\n        field: 'endDate',\n        headerName: 'End date',\n        type: SkyCellType.Date,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {\n          return { skyComponentProperties: { minDate: params.data.startDate } };\n        },\n      },\n      {\n        field: 'department',\n        headerName: 'Department',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          return {\n            skyComponentProperties: {\n              data: SKY_DEPARTMENTS,\n              selectionChange: (\n                change: SkyAutocompleteSelectionChange\n              ): void => {\n                this.departmentSelectionChange(change, params.node);\n              },\n            },\n          };\n        },\n        onCellValueChanged: (event: NewValueParams): void => {\n          if (event.newValue !== event.oldValue) {\n            this.clearJobTitle(event.node);\n          }\n        },\n      },\n      {\n        field: 'jobTitle',\n        headerName: 'Title',\n        type: SkyCellType.Autocomplete,\n        editable: true,\n        cellEditorParams: (\n          params: ICellEditorParams\n        ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {\n          const selectedDepartment: string =\n            params.data &&\n            params.data.department &&\n            params.data.department.name;\n          const editParams: {\n            skyComponentProperties: SkyAgGridAutocompleteProperties;\n          } = { skyComponentProperties: { data: [] } };\n\n          if (selectedDepartment) {\n            editParams.skyComponentProperties.data =\n              SKY_JOB_TITLES[selectedDepartment];\n          }\n          return editParams;\n        },\n      },\n      {\n        colId: 'validationCurrency',\n        field: 'validationCurrency',\n        headerName: 'Validation currency',\n        type: [SkyCellType.CurrencyValidator],\n        editable: true,\n      },\n      {\n        colId: 'validationDate',\n        field: 'validationDate',\n        headerName: 'Validation date',\n        type: [SkyCellType.Date, SkyCellType.Validator],\n        cellRendererParams: {\n          skyComponentProperties: {\n            validator: (value: Date): boolean =>\n              !!value && value > new Date(1985, 9, 26),\n            validatorMessage: 'Please enter a future date',\n          },\n        },\n        editable: true,\n      },\n    ];\n    this.gridData = this.context.gridData;\n    this.gridOptions = {\n      columnDefs: this.columnDefs,\n      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),\n    };\n    this.gridOptions = this.agGridService.getEditableGridOptions({\n      gridOptions: this.gridOptions,\n    });\n    this.changeDetector.markForCheck();\n  }\n\n  public onGridReady(gridReadyEvent: GridReadyEvent): void {\n    this.gridApi = gridReadyEvent.api;\n    this.gridApi.sizeColumnsToFit();\n    this.changeDetector.markForCheck();\n  }\n\n  private departmentSelectionChange(\n    change: SkyAutocompleteSelectionChange,\n    node: RowNode\n  ): void {\n    if (change.selectedItem && change.selectedItem !== node.data.department) {\n      this.clearJobTitle(node);\n    }\n  }\n\n  private clearJobTitle(node: RowNode | null): void {\n    if (node) {\n      node.data.jobTitle = undefined;\n      this.changeDetector.markForCheck();\n      if (this.gridApi) {\n        this.gridApi.refreshCells({ rowNodes: [node] });\n      }\n    }\n  }\n}\n"
     },
     {
-      "fileName": "data-grid-paging-demo.module.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/paging/data-grid-paging-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 { SkyPagingModule } from '@skyux/lists';\nimport { SkySearchModule } from '@skyux/lookup';\n\nimport { AgGridModule } from 'ag-grid-angular';\n\nimport { DataGridPagingDemoComponent } from './data-grid-paging-demo.component';\n\n@NgModule({\n  declarations: [DataGridPagingDemoComponent],\n  exports: [DataGridPagingDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n    SkyPagingModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class DataGridPagingDemoModule {}\n"
+      "fileName": "data-entry-grid-docs-demo-edit-modal.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header> Edit employee information </sky-modal-header>\n  <sky-modal-content>\n    <div id=\"docs-edit-grid-modal-content\">\n      <sky-ag-grid-wrapper>\n        <ag-grid-angular\n          class=\"sky-ag-grid-editable\"\n          [gridOptions]=\"gridOptions\"\n          [rowData]=\"gridData\"\n        >\n        </ag-grid-angular>\n      </sky-ag-grid-wrapper>\n    </div>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"instance.save(gridData)\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"instance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
-      "fileName": "top-scroll-data-grid-demo-data.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-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"
+      "fileName": "data-entry-grid-docs-demo-edit-modal-context.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-edit-modal-context.ts",
+      "rawContents": "import { SkyAgGridDemoRow } from './data-entry-grid-docs-demo-data';\n\nexport class SkyDataEntryGridEditModalContext {\n  public gridData: SkyAgGridDemoRow[] = [];\n}\n"
     },
     {
-      "fileName": "top-scroll-data-grid-demo.component.html",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-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"
+      "fileName": "data-entry-grid-docs-demo-data.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-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"
     },
     {
-      "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 { 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": "data-entry-grid-docs-demo-context-menu.component.ts",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-context-menu.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ICellRendererAngularComp } from 'ag-grid-angular';\nimport { ICellRendererParams } from 'ag-grid-community';\n\n@Component({\n  selector: 'app-data-entry-grid-docs-demo-context-menu',\n  templateUrl: './data-entry-grid-docs-demo-context-menu.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyDataEntryGridContextMenuComponent\n  implements ICellRendererAngularComp\n{\n  private name = '';\n\n  public agInit(params: ICellRendererParams): void {\n    this.name = params.data && params.data.name;\n  }\n\n  public refresh(): boolean {\n    return false;\n  }\n\n  public actionClicked(action: string): void {\n    alert(`${action} clicked for ${this.name}`);\n  }\n}\n"
     },
     {
-      "fileName": "top-scroll-data-grid-demo.module.ts",
-      "filePath": "/projects/ag-grid/documentation/code-examples/data-grid/top-scroll/top-scroll-data-grid-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 { SkyTopScrollDataGridDemoComponent } from './top-scroll-data-grid-demo.component';\n\n@NgModule({\n  declarations: [SkyTopScrollDataGridDemoComponent],\n  exports: [SkyTopScrollDataGridDemoComponent],\n  imports: [\n    CommonModule,\n    SkyToolbarModule,\n    SkySearchModule,\n    SkyDataManagerModule,\n    SkyAgGridModule,\n    AgGridModule,\n  ],\n  providers: [SkyDataManagerService],\n})\nexport class SkyTopScrollDataGridDemoModule {}\n"
+      "fileName": "data-entry-grid-docs-demo-context-menu.component.html",
+      "filePath": "/projects/ag-grid/documentation/code-examples/data-entry-grid/basic/data-entry-grid-docs-demo-context-menu.component.html",
+      "rawContents": "<sky-dropdown buttonType=\"context-menu\">\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Delete')\">Delete</button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('Mark inactive')\">\n        Mark inactive\n      </button>\n    </sky-dropdown-item>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"actionClicked('More info')\">\n        More info\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n"
     }
   ]
 }