DkGrid
  • Overview
  • Getting Started
    • Quick Start Tutorial
  • Fundamentals
    • Grid Structure
      • Grid Size
      • Header
      • Row Filter
      • Rows
      • Panels
      • Gutters
      • Edition Toolbar
      • Paginator
      • Borders
      • Column Context Menu
      • Waiting Indicator
    • DataSource
      • In-Memory DataSource
      • Custom DataSource
    • Theming
  • Columns
    • Column Definitions
    • Column Grouping
    • Column Sizing
    • Column Moving
    • Column Pinning
  • Rows
    • Row Sorting
    • Row Selection
    • Row Grouping
    • Row Pagination
  • Filtering
    • Column Filters
    • Filter types
    • In-line Filters
  • Editing
    • Row Edition
    • Edition templates
    • Edition validation
    • Multiple rows edition
  • Reference
    • DkGrid API
      • DkGridColumnDef
      • DkGridSorting
      • DkGridSelection
      • DkGridRowGrouping
      • DkGridPagination
      • DkGridWaitingIndicator
      • DkGridFactoryDataSource
      • DkGridFilter
      • DkGridEdition
    • Components
      • DkGridComponent
      • DkGridColumnComponent
    • Classes
      • DataSource
      • Columns
      • Rows
      • Filtering
      • Editing
    • Interfaces
      • Columns
      • Sorting
      • Row Grouping
      • Filtering
      • Editing
    • Injection Tokens
      • Grid Structure
      • Filtering
      • Editing
      • Theming
    • Type aliases
      • DataSource
      • Columns
      • Selection
      • Filtering
      • Editing
    • Type Guards
Powered by GitBook
On this page
  • Component metadata
  • Class
  • Definition
  1. Reference
  2. Components

DkGridComponent

This class creates a DkGrid instance through the HTML definition.

Component metadata

selector: dk-grid

export as: dkgGrid

Class

DkGridComponent<T>

<T> represents the object's shape coming from the data source.

Definition

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;
}
PreviousComponentsNextDkGridColumnComponent

Last updated 2 years ago