# AdvanceGridComponent

**Kind:** Class

**Source:** `Frontend/src/app/components/shared/advance-grid/advance-grid.component.ts` (line 21)

**Part of:** [Frontend](subsystem-frontend-src-app)

`AdvanceGridComponent` is an Angular shared component that manages grid pagination, page visibility, and grid update handling. It initializes paging state, responds to Angular change detection, and exposes methods for moving between pages or checking grid-related callbacks.

**Implements:** `OnInit`, `DoCheck`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `ngDoCheck` | `ngDoCheck()` | `void` |
| `ngOnInit` | `ngOnInit()` | `void` |
| `setPages` | `setPages(goToLastPage: boolean)` | `void` |
| `checkFullPage` | `checkFullPage(index: undefined)` | `boolean` |
| `goToPage` | `goToPage(index: number)` | `void` |
| `prevPage` | `prevPage()` | `void` |
| `nextPage` | `nextPage()` | `void` |
| `visibleAddNew` | `visibleAddNew()` | `void` |
| `checkCallback` | `checkCallback(button: PopOverButtonData)` | `void` |
| `cellUpdated_Handler` | `cellUpdated_Handler(e: undefined)` | `void` |
| `CallisProcessActive` | `CallisProcessActive(accessList: undefined, acessStatusId: undefined)` | `void` |
| `onDocumentKeyUp` | `onDocumentKeyUp(event: undefined)` | `void` |
| `onDocumentClick` | `onDocumentClick(event: undefined)` | `void` |
| `closeAllRequest_Handler` | `closeAllRequest_Handler(e: undefined)` | `void` |
| `selectAllRows` | `selectAllRows(e: undefined)` | `void` |
| `rowSelectedRequest_Handler` | `rowSelectedRequest_Handler(row: undefined)` | `void` |
| `rowOutputPopOverClicked_Handler` | `rowOutputPopOverClicked_Handler(e: undefined)` | `void` |
| `customizeSelect_allbutton` | `customizeSelect_allbutton()` | `void` |
| `PopoverSingleRowClick` | `PopoverSingleRowClick(e: undefined)` | `void` |
| `Popover_Click` | `Popover_Click(status: undefined, bool: undefined)` | `void` |
| `IsUnitized` | `IsUnitized()` | `void` |
| `unitizedRequested_Click` | `unitizedRequested_Click()` | `void` |
| `packageRequested_Click` | `packageRequested_Click()` | `void` |
| `splitRequested_Click` | `splitRequested_Click()` | `void` |
| `splitSingleClick` | `splitSingleClick(e: undefined)` | `void` |
| `unitizedSingleClick` | `unitizedSingleClick(e: undefined)` | `void` |
| `packageSingleClick` | `packageSingleClick(e: undefined)` | `void` |
| `findColumn` | `findColumn(columFieldName: string)` | `AdvColumn` |
| `selectedHasPackage` | `selectedHasPackage()` | `boolean` |
| `selectedHasItemized` | `selectedHasItemized()` | `boolean` |
| `showPackageUnitizeDependOnSelectedRows` | `showPackageUnitizeDependOnSelectedRows(checkType: string)` | `void` |
| `deleteRowRequest_Handler` | `deleteRowRequest_Handler(rowIndex: number)` | `void` |
| `deleteMultiRows` | `deleteMultiRows()` | `void` |
| `deleteItemConfirmation` | `deleteItemConfirmation(rowIndex: number)` | `void` |
| `deleteItemsConfirmation` | `deleteItemsConfirmation()` | `void` |
| `closeDeleteModal` | `closeDeleteModal()` | `void` |
| `getDeleteModalMessage` | `getDeleteModalMessage()` | `string` |
| `confirmDelete` | `confirmDelete()` | `void` |
| `saveRowManually_Handler` | `saveRowManually_Handler(row: undefined)` | `void` |
| `addNewRow` | `addNewRow(e: CellItemEvent)` | `void` |
| `nextCellRequest_Handler` | `nextCellRequest_Handler(e: CellItemEvent)` | `void` |
| `isColumnDisabledOnValue` | `isColumnDisabledOnValue(rowIndex: number, index: number)` | `void` |
| `getNextRowNumber` | `getNextRowNumber(rowIndex: number, index: number)` | `void` |
| `rowHovered_Handler` | `rowHovered_Handler(rowIndex: number)` | `void` |
| `setFocusedRow` | `setFocusedRow(rowIndex: number)` | `void` |
| `openEdit` | `openEdit(rowIndex: number)` | `void` |
| `closeEdit` | `closeEdit()` | `void` |
| `colSpanCount` | `colSpanCount()` | `void` |
| `ngOnDestroy` | `ngOnDestroy()` | `void` |
| `OnOpenedPopup` | `OnOpenedPopup()` | `void` |

## Properties

| Property | Type |
|---|---|
| `advancedGridTbody` | `ElementRef` |
| `rowComponents` | `QueryList<AdvRowComponent>` |
| `sharedPopup` | `SharedPopupComponent` |
| `splitRowComponent` | `SplitRowComponent` |
| `focusedRow` | `AdvRowComponent` |
| `focusedRowIndex` | `number` |
| `_columns` | `BehaviorSubject<AdvColumn[]>` |
| `_dataSource` | `BehaviorSubject<any[]>` |
| `readOnly` | `boolean` |
| `maxRows` | `number` |
| `highlightedRowIndex` | `number` |
| `colWidth` | `string` |
| `rowHeight` | `string` |
| `serialEnabled` | `boolean` |
| `selectEnabled` | `boolean` |
| `selectAllEnabled` | `boolean` |
| `deleteColumnEnabled` | `boolean` |
| `actionsDropdownEnabled` | `boolean` |
| `deleteManuallyHandled` | `boolean` |
| `allowDeleteRow` | `boolean` |
| `saveColumnEnabled` | `boolean` |
| `headerVisible` | `boolean` |
| `handlerEnabled` | `boolean` |
| `statusEnabled` | `boolean` |
| `addButton` | `addButton` |
| `serialField` | `string` |
| `splittedEnabled` | `boolean` |
| `splittedSerialField` | `string` |
| `selectField` | `string` |
| `keyField` | `string` |
| `cssClass` | `string` |
| `isProcessActive` | `boolean` |
| `disabledTriggerField` | `string` |
| `hidePackageUnitizeSwitch` | `boolean` |
| `ImportOption` | `any` |
| `_PopOverButtons` | `BehaviorSubject<PopOverButtonData[]>` |
| `newRowRequested` | `EventEmitter<any>` |
| `unitizedRequested` | `EventEmitter<any>` |
| `packageRequested` | `EventEmitter<any>` |
| `splitRequested` | `EventEmitter<any>` |
| `RowChecked` | `EventEmitter<any>` |
| `OutputPopOverArray` | `EventEmitter<any[]>` |
| `OutputPopOverClicked` | `EventEmitter<any[]>` |
| `parameterOfisProcessActive` | `EventEmitter<any>` |
| `cellUpdated` | `EventEmitter<any>` |
| `selectedLiveDatasourceValue` | `EventEmitter<any>` |
| `deleteRowRequest` | `any` |
| `deleteMultiRowsRequest` | `any` |
| `deleteRowConfirmed` | `any` |
| `saveRowRequest` | `any` |

## Where it refuses work

- `AdvanceGridComponent` stops the work with an early return when `this.isColumnDisabledOnValue(rowIndex, index)`, in 2 places.
- `AdvanceGridComponent` stops the work with an early return when `!this.tempCellItemEvent`.
- `AdvanceGridComponent` stops the work with an early return when `event.row >= value.length`.
- `AdvanceGridComponent` stops the work with an early return when `this.datasourcePages[index].length > this.pageSize`.
- `AdvanceGridComponent` stops the work with an early return when `!this.addButton`.
- `AdvanceGridComponent` stops the work with an early return when `this.addButton.displayLogic`.

## Diagram

```mermaid
graph LR
  A[AdvanceGridComponent] --> B[ngOnInit]
  A --> C[ngDoCheck]
  B --> D[setPages]
  C --> E[checkFullPage]
  A --> F[goToPage]
  A --> G[prevPage]
  A --> H[nextPage]
  A --> I[visibleAddNew]
  A --> J[checkCallback]
  A --> K[cellUpdated_Handler]
```

## Usage

```ts
import { Component, ViewChild } from '@angular/core';
import { AdvanceGridComponent } from './components/shared/advance-grid/advance-grid.component';

@Component({
  selector: 'app-grid-page',
  template: `
    <app-advance-grid #grid></app-advance-grid>

    <button type="button" (click)="previousPage()">Previous</button>
    <button type="button" (click)="nextPage()">Next</button>
  `,
})
export class GridPageComponent {
  @ViewChild('grid') grid?: AdvanceGridComponent;

  previousPage(): void {
    this.grid?.prevPage();
  }

  nextPage(): void {
    this.grid?.nextPage();
  }

  refreshPagination(): void {
    this.grid?.setPages();

    if (this.grid?.checkFullPage()) {
      this.grid.goToPage();
    }
  }
}
```

## AI Coding Instructions

- Keep paging state changes inside `setPages`, `goToPage`, `prevPage`, and `nextPage` rather than duplicating page calculations in parent components.
- Do not call `ngOnInit` or `ngDoCheck` directly; Angular invokes lifecycle hooks.
- Call `setPages` after changing the grid data source or conditions that affect page availability.
- Use `checkFullPage` before page-navigation behavior that depends on whether the current page is full.
- Preserve callback and cell-update handling through `checkCallback` and `cellUpdated_Handler` when extending grid event behavior.

## Used by

6 references from 6 files. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

### Imported by (6)

- `ProcurementOfferComponent` — `Frontend/src/app/components/procurement/procurement-details/procurement-offer/procurement-offer.component.ts`:1
- `ProcurementOrderComponent` — `Frontend/src/app/components/procurement/procurement-details/procurement-order/procurement-order.component.ts`:1
- `PurchasingOfferComponent` — `Frontend/src/app/components/purchasing/purchasing-details/purchasing-offer/purchasing-offer.component.ts`:1
- `OrderPanelDetailsComponent` — `Frontend/src/app/components/sales/new-job/order-panel-details/order-panel-details.component.ts`:1
- `TranslateHandler` — `Frontend/src/app/components/shared/shared.module.ts`:1
- `ReceivedPurchaseOrderComponent` — `Frontend/src/app/components/warehouse/receiving-shipment-details/received-purchase-order/received-purchase-order.component.ts`:1