# DkGridComponent

## Component metadata

selector: <mark style="color:red;">`dk-grid`</mark>

export as: <mark style="color:red;">`dkgGrid`</mark>

## Class

<mark style="color:green;">`DkGridComponent<T>`</mark>

<mark style="color:green;">`<T>`</mark> represents the object's shape coming from the data source.

## Definition

```typescript
class DkGridComponent<T extends object> implements OnInit, OnChanges, AfterContentInit, AfterViewInit, OnDestroy {

  @HostBinding('attr.id')
  @Input() id: string;

  @Input() height: string;
  @Input() width: string;

  @Input()
  get displayRowId(): boolean;
  set displayRowId(value: any);
  static ngAcceptInputType_displayRowId: BooleanInput;

  @Input()
  get rowIdWidth(): number;
  set rowIdWidth(value: any);
  static ngAcceptInputType_rowIdWidth: NumberInput;

  @Input()
  get gridElevation(): boolean;
  set gridElevation(value: any);
  static ngAcceptInputType_gridElevation: BooleanInput;

  @Input()
  get gridElevationValue(): number;
  set gridElevationValue(value: any);
  static ngAcceptInputType_gridElevationValue: NumberInput;

  @Input()
  get verticalRowLines(): boolean;
  set verticalRowLines(value: any);
  static ngAcceptInputType_verticalRowLines: BooleanInput;

  @Input()
  get striped(): boolean;
  set striped(value: any);
  static ngAcceptInputType_striped: BooleanInput;

  @Input()
  get headerRowHeight(): number;
  set headerRowHeight(value: any);
  static ngAcceptInputType_headerRowHeight: NumberInput;

  @Input()
  get contentRowHeight(): number;
  set contentRowHeight(value: any);
  static ngAcceptInputType_contentRowHeight: NumberInput;

  @Input()
  get allowRowGrouping(): boolean;
  set allowRowGrouping(value: any);
  static ngAcceptInputType_allowRowGrouping: BooleanInput;

  @Input()
  get rowGroupingRowHeight(): number;
  set rowGroupingRowHeight(value: any);
  static ngAcceptInputType_rowGroupingRowHeight: NumberInput;

  @Input()
  get rowGroupingColumnHeight(): number;
  set rowGroupingColumnHeight(value: any);
  static ngAcceptInputType_rowGroupingColumnHeight: NumberInput;

  @Input()
  get displayRowGroupingIndent(): boolean;
  set displayRowGroupingIndent(value: any);
  static ngAcceptInputType_displayRowGroupingIndent: BooleanInput;

  @Input()
  get rowGroupingIndentWidth(): number;
  set rowGroupingIndentWidth(value: any);
  static ngAcceptInputType_rowGroupingIndentWidth: NumberInput;

  // Row Grouping events:
  @Output() readonly groupPanelColumnsChange: EventEmitter<DkColumnDef[]>;
  @Output() readonly collapseGroupRowChange: EventEmitter<DkGroupRowCollapseEvent<T>>;

  @Input()
  get allowPagination(): boolean;
  set allowPagination(value: any);
  static ngAcceptInputType_allowPagination: BooleanInput;

  @Input()
  get pageSize(): number;
  set pageSize(value: any);
  static ngAcceptInputType_pageSize: NumberInput;

  @Input()
  get paginationRowHeight(): number;
  set paginationRowHeight(value: any);
  static ngAcceptInputType_paginationRowHeight: NumberInput;

  // Pagination events:
  @Output() readonly pageChange: EventEmitter<PageEvent>;
  @Output() readonly paginatorChange: EventEmitter<MatPaginator>;

  @Input()
  get onDemandFilter(): boolean;
  set onDemandFilter(value: any);
  static ngAcceptInputType_onDemandFilter: BooleanInput;

  @Input()
  get allowRowFiltering(): boolean;
  set allowRowFiltering(value: any);
  static ngAcceptInputType_allowRowFiltering: BooleanInput;

  @Input()
  get filterRowHeight(): number;
  set filterRowHeight(value: any);
  static ngAcceptInputType_filterRowHeight: NumberInput;

  @Input() gridCustomFilterConditions: DkGridCustomFilterConditions<T>;

  // Filter events:
  @Output() readonly registerFilterableChange: EventEmitter<DkFilterable<T>>;
  @Output() readonly deregisterFilterableChange: EventEmitter<DkFilterable<T>>;
  @Output() readonly filterChange: EventEmitter<DkFilterable<T>>;
  @Output() readonly editionFilterChange: EventEmitter<DkFilterable<T>>;
  @Output() readonly clearFilterChange: EventEmitter<void>;
  @Output() readonly clearEditionFilterChange: EventEmitter<void>;

  @Input()
  get allowEdition(): boolean;
  set allowEdition(value: any);
  static ngAcceptInputType_allowEdition: BooleanInput;

  @Input()
  get editionMode(): boolean;
  set editionMode(value: any);
  static ngAcceptInputType_editionMode: BooleanInput;

  @Input()
  get editionToolbar(): boolean;
  set editionToolbar(value: any);
  static ngAcceptInputType_editionToolbar: BooleanInput;

  @Input() editionToolbarPosition: EditionToolbarPosition;
  @Input() editionToolbarAlignment: EditionToolbarAlignment;

  @Input()
  get editionToolbarRowHeight(): number;
  set editionToolbarRowHeight(value: any);
  static ngAcceptInputType_editionToolbarRowHeight: NumberInput;

  @Input()
  get editionToolbarItemHeight(): number;
  set editionToolbarItemHeight(value: any);
  static ngAcceptInputType_editionToolbarItemHeight: NumberInput;

  @Input() gridEditionSettings: DkGridEditionSettings<T>;

  // Edition events:
  @Output() readonly editionRowChange: EventEmitter<DkGridDataRowEntry<T>>;
  @Output() readonly updateRowChange: EventEmitter<DkGridDataRowEntry<T> | DkGridDataRowEntry<T>[]>;
  @Output() readonly cancelRowEditionChange: EventEmitter<DkGridDataRowEntry<T> | DkGridDataRowEntry<T>[]>;
  @Output() readonly removeRowChange: EventEmitter<DkGridDataRowEntry<T> | DkGridDataRowEntry<T>[]>;
  @Output() readonly restoreRowChange: EventEmitter<DkGridDataRowEntry<T> | DkGridDataRowEntry<T>[]>;
  @Output() readonly editionFilterStateChange: EventEmitter<boolean>;

  @Input()
  get allowSelection(): boolean;
  set allowSelection(value: any);
  static ngAcceptInputType_allowSelection: BooleanInput;

  @Input() selectableRows: SelectableFn<T>;

  // Selection events:
  @Output() readonly selectionChange: EventEmitter<DkGridDataRowEntry<T>[]>;
  @Output() readonly selectedRowChange: EventEmitter<DkGridDataRowEntry<T>>;
  @Output() readonly deselectedRowChange: EventEmitter<DkGridDataRowEntry<T>>;

  @Input() datasource: DkGridDataSourceInput<T>;
  @Input() decoratorFn: DataSourceDecoratorFn<T>;

  // DataSource events:
  @Output() readonly dataDeliveryIdChange: EventEmitter<string>;

  @Input()
  get allowColumnContextMenu(): boolean;
  set allowColumnContextMenu(value: any);
  static ngAcceptInputType_allowColumnContextMenu: BooleanInput;

  @Input()
  get allowColumnDragging(): boolean;
  set allowColumnDragging(value: any);
  static ngAcceptInputType_allowColumnDragging: BooleanInput;

  // DkGridColumnDef service:
  @Output() readonly gridColumnDefInstance: EventEmitter<DkGridColumnDef<T>>;

  @Input()
  get allowSorting(): boolean;
  set allowSorting(value: any);
  static ngAcceptInputType_allowSorting: BooleanInput;

  // Sorting event:
  @Output() readonly sortChange: EventEmitter<DkColumnSortEvent<T>>;

  // Column events:
  @Output() readonly columnSizeChange: EventEmitter<DkDataColumnDef<T, string | number | Date | boolean>>;
  @Output() readonly columnGroupStatusChange: EventEmitter<DkGroupColumnDef>;
  @Output() readonly columnLockedChange: EventEmitter<DkColumnDef>;
  @Output() readonly columnUnLockedChange: EventEmitter<DkColumnDef>;
  @Output() readonly columnVisibleChange: EventEmitter<DkColumnDef>;
  @Output() readonly columnMove: EventEmitter<DkColumnMoveEvent>;
  @Output() readonly columnsChange: EventEmitter<DkColumnDef[]>;
  @Output() readonly contentPanelsColumnsChange: EventEmitter<DkColumnDef[]>;
  @Output() readonly columnsRemovedChange: EventEmitter<DkColumnDef[]>;

  // Public properties:
  readonly filter: DkGridFilter<T>;
  readonly columnDef: DkGridColumnDef<T>;
  readonly edition: DkGridEdition<T>;
  readonly selection: DkGridSelection<T>;
  readonly sorting: DkGridSorting<T>;
  readonly pagination: DkGridPagination;
  readonly rowGrouping: DkGridRowGrouping<T>;
  readonly dataSourceFactory: DkGridFactoryDataSource<T>;
  readonly waitingIndicator: DkGridWaitingIndicator;

  get initialized(): boolean;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dikesoft.com/reference/components/dkgridcomponent.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.