igniteui-react-grids
Version:
Ignite UI React grid components.
1,690 lines (1,313 loc) • 78 kB
TypeScript
import { IgcGridCreatedEventArgs } from './igc-grid-created-event-args';
import { IgcForOfState } from './igc-for-of-state';
import { IgcFilteringExpressionsTree } from './igc-filtering-expressions-tree';
import { IgcGridScrollEventArgs } from './igc-grid-scroll-event-args';
import { IgcGridCellEventArgs } from './igc-grid-cell-event-args';
import { IgcGridRowEventArgs } from './igc-grid-row-event-args';
import { IgcGridFormGroupCreatedEventArgs } from './igc-grid-form-group-created-event-args';
import { IgcGridValidationStatusEventArgs } from './igc-grid-validation-status-event-args';
import { IgcRowSelectionEventArgs } from './igc-row-selection-event-args';
import { IgcColumnSelectionEventArgs } from './igc-column-selection-event-args';
import { IgcPinColumnCancellableEventArgs } from './igc-pin-column-cancellable-event-args';
import { IgcPinColumnEventArgs } from './igc-pin-column-event-args';
import { IgcGridEditEventArgs } from './igc-grid-edit-event-args';
import { IgcGridEditDoneEventArgs } from './igc-grid-edit-done-event-args';
import { IgcColumnComponent } from './igc-column-component';
import { IgcColumnsAutoGeneratedEventArgs } from './igc-columns-auto-generated-event-args';
import { IgcSortingEventArgs } from './igc-sorting-event-args';
import { IgcSortingExpression } from './igc-sorting-expression';
import { IgcFilteringEventArgs } from './igc-filtering-event-args';
import { IgcRowDataEventArgs } from './igc-row-data-event-args';
import { IgcRowDataCancelableEventArgs } from './igc-row-data-cancelable-event-args';
import { IgcColumnResizeEventArgs } from './igc-column-resize-event-args';
import { IgcGridContextMenuEventArgs } from './igc-grid-context-menu-event-args';
import { IgcColumnVisibilityChangingEventArgs } from './igc-column-visibility-changing-event-args';
import { IgcColumnVisibilityChangedEventArgs } from './igc-column-visibility-changed-event-args';
import { IgcColumnMovingStartEventArgs } from './igc-column-moving-start-event-args';
import { IgcColumnMovingEventArgs } from './igc-column-moving-event-args';
import { IgcColumnMovingEndEventArgs } from './igc-column-moving-end-event-args';
import { IgcGridKeydownEventArgs } from './igc-grid-keydown-event-args';
import { IgcRowDragStartEventArgs } from './igc-row-drag-start-event-args';
import { IgcRowDragEndEventArgs } from './igc-row-drag-end-event-args';
import { IgcGridClipboardEvent } from './igc-grid-clipboard-event';
import { IgcRowToggleEventArgs } from './igc-row-toggle-event-args';
import { IgcPinRowEventArgs } from './igc-pin-row-event-args';
import { IgcActiveNodeChangeEventArgs } from './igc-active-node-change-event-args';
import { IgcGridToolbarExportEventArgs } from './igc-grid-toolbar-export-event-args';
import { IgcGridSelectionRange } from './igc-grid-selection-range';
import { IgcForOfDataChangingEventArgs } from './igc-for-of-data-changing-event-args';
import { IgcGridToolbarTemplateContext } from './igc-grid-toolbar-template-context';
import { IgcRenderFunction } from './common';
import { IgcGridPaginatorTemplateContext } from './igc-grid-paginator-template-context';
import { IgcActionStripToken } from './igc-action-strip-token';
import { IgcDataCloneStrategy } from './igc-data-clone-strategy';
import { IgcClipboardOptions } from './igc-clipboard-options';
import { IgcGridRowDragGhostContext } from './igc-grid-row-drag-ghost-context';
import { IgcGridRowEditTextTemplateContext } from './igc-grid-row-edit-text-template-context';
import { IgcGridEmptyTemplateContext } from './igc-grid-empty-template-context';
import { IgcGridRowEditActionsTemplateContext } from './igc-grid-row-edit-actions-template-context';
import { IgcGridRowTemplateContext } from './igc-grid-row-template-context';
import { IgcGridTemplateContext } from './igc-grid-template-context';
import { IgcGridHeaderTemplateContext } from './igc-grid-header-template-context';
import { IgcGridToolbarComponent } from './igc-grid-toolbar-component';
import { IgcPaginatorComponent } from './igc-paginator-component';
import { IgcGridResourceStrings } from './igc-grid-resource-strings';
import { FilteringLogic } from './filtering-logic';
import { GridPagingMode } from './grid-paging-mode';
import { GridValidationTrigger } from './grid-validation-trigger';
import { IgcPinningConfig } from './igc-pinning-config';
import { FilterMode } from './filter-mode';
import { GridSummaryPosition } from './grid-summary-position';
import { GridSummaryCalculationMode } from './grid-summary-calculation-mode';
import { IgcFilteringStrategy } from './igc-filtering-strategy';
import { IgcGridSortingStrategy } from './igc-grid-sorting-strategy';
import { IgcSortingOptions } from './igc-sorting-options';
import { IgcRowDirective } from './igc-row-directive';
import { IgcHeadSelectorTemplateContext } from './igc-head-selector-template-context';
import { IgcRowSelectorTemplateContext } from './igc-row-selector-template-context';
import { GridSelectionMode } from './grid-selection-mode';
import { IgcGridRowComponent } from './igc-grid-row-component';
import { DropPosition } from './drop-position';
import { IgcFilteringOperation } from './igc-filtering-operation';
import { IgcRowType } from './igc-row-type';
import { IgcCellPosition } from './igc-cell-position';
import { IgcOverlaySettings } from './igc-overlay-settings';
import { EventEmitterMixin, LitElement, Constructor, AbstractConstructor } from './common';
/* blazorCopyInheritedMembers */
/* blazorElement */
/* wcElementTag: igc-row-island */
/* blazorIndirectRender */
/* jsonAPIManageCollectionInMarkup */
/* jsonAPIManageItemInMarkup */
/* mustUseNGParentAnchor */
/* additionalIdentifier: ChildDataKey */
/* contentParent: RowIsland */
/* contentParent: HierarchicalGrid */
/**
* Row island
*
* @igxModule IgxHierarchicalGridModule
* @igxParent IgxHierarchicalGridComponent, IgxRowIslandComponent
*
*/
export declare class IgcRowIslandComponent extends EventEmitterMixin<IgcRowIslandComponentEventMap, Constructor<LitElement>>(LitElement)
{
/* blazorSuppress */
static readonly tagName: string;
/* blazorSuppress */
static register(): void;
/* blazorInclude,wcInclude TODO: Move to Elements-only component */
/**
* Sets the key of the row island by which child data would be taken from the row data if such is provided.
*/
public set childDataKey(value: string);
public get childDataKey(): string;
/* contentChildren */
/* blazorInclude */
/* blazorTreatAsCollection */
/* blazorCollectionName: RowIslandCollection */
/**
* @hidden @internal
*/
public set childLayoutList(value: IgcRowIslandComponent[]);
public get childLayoutList(): IgcRowIslandComponent[];
/* csSuppress */
/**
* Sets/Gets the toolbar template for each child grid created from this row island.
*/
public set toolbarTemplate(value: IgcRenderFunction<IgcGridToolbarTemplateContext>);
public get toolbarTemplate(): IgcRenderFunction<IgcGridToolbarTemplateContext>;
/* csSuppress */
/**
* Sets/Gets the paginator template for each child grid created from this row island.
*/
public set paginatorTemplate(value: IgcRenderFunction<IgcGridPaginatorTemplateContext>);
public get paginatorTemplate(): IgcRenderFunction<IgcGridPaginatorTemplateContext>;
// TODO(api-analyzer): Shouldn't need all tags to copy from base or hidden/internal due to include tag
/* contentChildren */
/* blazorInclude */
/* blazorTreatAsCollection */
/* blazorCollectionName: ActionStripCollection */
/* blazorCollectionItemName: ActionStrip */
/* ngQueryListName: actionStripComponents */
/** @hidden @internal */
public set actionStripComponents(value: IgcActionStripToken[]);
public get actionStripComponents(): IgcActionStripToken[];
/**
* Sets if all immediate children of the grids for this `IgxRowIslandComponent` should be expanded/collapsed.
* ```html
* <igx-hierarchical-grid [data]="Data" [autoGenerate]="true">
* <igx-row-island [key]="'childData'" [expandChildren]="true" #rowIsland>
* <!-- ... -->
* </igx-row-island>
* </igx-hierarchical-grid>
* ```
*
* @memberof IgxRowIslandComponent
*/
public set expandChildren(value: boolean);
public get expandChildren(): boolean;
/**
* Gets/Sets the key indicating whether a row has children. If row has no children it does not render an expand indicator.
*
* @example
* ```html
* <igx-hierarchical-grid #grid [data]="localData" [hasChildrenKey]="'hasEmployees'">
* </igx-hierarchical-grid>
* ```
*/
public set hasChildrenKey(value: string);
public get hasChildrenKey(): string;
/**
* Gets/Sets whether the expand/collapse all button in the header should be rendered.
*
* @remarks
* The default value is false.
* @example
* ```html
* <igx-hierarchical-grid #grid [data]="localData" [showExpandAll]="true">
* </igx-hierarchical-grid>
* ```
*/
public set showExpandAll(value: boolean);
public get showExpandAll(): boolean;
public set batchEditing(value: boolean);
public get batchEditing(): boolean;
/**
* Gets/Sets the display time for the row adding snackbar notification.
*
* @remarks
* By default it is 6000ms.
*/
public set snackbarDisplayTime(value: number);
public get snackbarDisplayTime(): number;
/**
* Gets/Sets whether to auto-generate the columns.
*
* @remarks
* The default value is false. When set to true, it will override all columns declared through code or in markup.
* @example
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
* ```
*/
public set autoGenerate(value: boolean);
public get autoGenerate(): boolean;
/**
* Gets/Sets a list of property keys to be excluded from the generated column collection
* @remarks
* The collection is only used during initialization and changing it will not cause any changes in the generated columns at runtime
* unless the grid is destroyed and recreated. To modify the columns visible in the UI at runtime, please use their
* [hidden](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxColumnComponent.html#hidden) property.
* @example
* ```html
* <igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>
* ```
* ```typescript
* const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]
* ```
*/
public set autoGenerateExclude(value: string[]);
public get autoGenerateExclude(): string[];
/**
* Controls whether columns moving is enabled in the grid.
*
*/
public set moving(value: boolean);
public get moving(): boolean;
/**
* Gets/Sets a custom template when empty.
*
* @example
* ```html
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
* ```
*/
public set emptyGridTemplate(value: IgcRenderFunction<void>);
public get emptyGridTemplate(): IgcRenderFunction<void>;
/**
* Gets/Sets a custom template for adding row UI when grid is empty.
*
* @example
* ```html
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
* ```
*/
public set addRowEmptyTemplate(value: IgcRenderFunction<void>);
public get addRowEmptyTemplate(): IgcRenderFunction<void>;
/**
* Gets/Sets a custom template when loading.
*
* @example
* ```html
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
* ```
*/
public set loadingGridTemplate(value: IgcRenderFunction<void>);
public get loadingGridTemplate(): IgcRenderFunction<void>;
/**
* Get/Set IgxSummaryRow height
*/
public set summaryRowHeight(value: number);
public get summaryRowHeight(): number;
/**
* Gets/Sets the data clone strategy of the grid when in edit mode.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
* ```
*/
public set dataCloneStrategy(value: IgcDataCloneStrategy);
public get dataCloneStrategy(): IgcDataCloneStrategy;
/**
* Controls the copy behavior of the grid.
*/
public set clipboardOptions(value: IgcClipboardOptions);
public get clipboardOptions(): IgcClipboardOptions;
/* treatAsRef */
/**
* Sets a conditional class selector to the grid's row element.
* Accepts an object literal, containing key-value pairs,
* where the key is the name of the CSS class and the value is
* either a callback function that returns a boolean, or boolean, like so:
* ```typescript
* callback = (row: RowType) => { return row.selected > 6; }
* rowClasses = { 'className' : this.callback };
* ```
* ```html
* <igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
* ```
*
* @memberof IgxColumnComponent
*/
public set rowClasses(value: any);
public get rowClasses(): any;
/* treatAsRef */
/**
* Sets conditional style properties on the grid row element.
* It accepts an object literal where the keys are
* the style properties and the value is an expression to be evaluated.
* ```typescript
* styles = {
* background: 'yellow',
* color: (row: RowType) => row.selected : 'red': 'white'
* }
* ```
* ```html
* <igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
* ```
*
* @memberof IgxColumnComponent
*/
public set rowStyles(value: any);
public get rowStyles(): any;
/**
* Gets/Sets the primary key.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
* ```
*/
public set primaryKey(value: string);
public get primaryKey(): string;
/* reactContentChildren */
/* blazorInclude */
/* blazorTreatAsCollection */
/* blazorCollectionName: ColumnCollection */
/* ngQueryListName: columnList */
/**
* @hidden @internal
*/
public set columnList(value: IgcColumnComponent[]);
public get columnList(): IgcColumnComponent[];
/**
* Gets the custom template, if any, used for row drag ghost.
*/
public set dragGhostCustomTemplate(value: IgcRenderFunction<IgcGridRowDragGhostContext>);
public get dragGhostCustomTemplate(): IgcRenderFunction<IgcGridRowDragGhostContext>;
/**
* Gets the row edit text template.
*/
public set rowEditTextTemplate(value: IgcRenderFunction<IgcGridRowEditTextTemplateContext>);
public get rowEditTextTemplate(): IgcRenderFunction<IgcGridRowEditTextTemplateContext>;
/**
* Gets the row add text template.
*/
public set rowAddTextTemplate(value: IgcRenderFunction<IgcGridEmptyTemplateContext>);
public get rowAddTextTemplate(): IgcRenderFunction<IgcGridEmptyTemplateContext>;
/**
* Gets the row edit actions template.
*/
public set rowEditActionsTemplate(value: IgcRenderFunction<IgcGridRowEditActionsTemplateContext>);
public get rowEditActionsTemplate(): IgcRenderFunction<IgcGridRowEditActionsTemplateContext>;
/**
* Gets the row expand indicator template.
*/
public set rowExpandedIndicatorTemplate(value: IgcRenderFunction<IgcGridRowTemplateContext>);
public get rowExpandedIndicatorTemplate(): IgcRenderFunction<IgcGridRowTemplateContext>;
/**
* Gets the row collapse indicator template.
*/
public set rowCollapsedIndicatorTemplate(value: IgcRenderFunction<IgcGridRowTemplateContext>);
public get rowCollapsedIndicatorTemplate(): IgcRenderFunction<IgcGridRowTemplateContext>;
/**
* Gets the header expand indicator template.
*/
public set headerExpandedIndicatorTemplate(value: IgcRenderFunction<IgcGridTemplateContext>);
public get headerExpandedIndicatorTemplate(): IgcRenderFunction<IgcGridTemplateContext>;
/**
* Gets the row collapse indicator template.
*/
public set headerCollapsedIndicatorTemplate(value: IgcRenderFunction<IgcGridTemplateContext>);
public get headerCollapsedIndicatorTemplate(): IgcRenderFunction<IgcGridTemplateContext>;
/**
* Gets the excel style header icon.
*/
public set excelStyleHeaderIconTemplate(value: IgcRenderFunction<IgcGridHeaderTemplateContext>);
public get excelStyleHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>;
/**
* The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
*/
public set sortAscendingHeaderIconTemplate(value: IgcRenderFunction<IgcGridHeaderTemplateContext>);
public get sortAscendingHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>;
/**
* The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
*/
public set sortDescendingHeaderIconTemplate(value: IgcRenderFunction<IgcGridHeaderTemplateContext>);
public get sortDescendingHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>;
/**
* Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
*/
public set sortHeaderIconTemplate(value: IgcRenderFunction<IgcGridHeaderTemplateContext>);
public get sortHeaderIconTemplate(): IgcRenderFunction<IgcGridHeaderTemplateContext>;
/* contentChildren */
/* blazorInclude */
/* blazorTreatAsCollection */
/* blazorCollectionName: GridToolbarCollection */
/* ngQueryListName: toolbar */
/** @hidden @internal */
public set toolbar(value: IgcGridToolbarComponent[]);
public get toolbar(): IgcGridToolbarComponent[];
/* contentChildren */
/* blazorInclude */
/* blazorTreatAsCollection */
/* blazorCollectionName: PaginatorCollection */
/* ngQueryListName: paginationComponents */
/** @hidden @internal */
public set paginationComponents(value: IgcPaginatorComponent[]);
public get paginationComponents(): IgcPaginatorComponent[];
/**
* Gets/Sets the resource strings.
*
* @remarks
* By default it uses EN resources.
*/
public set resourceStrings(value: IgcGridResourceStrings);
public get resourceStrings(): IgcGridResourceStrings;
/**
* Gets/Sets the filtering logic of the `IgxGridComponent`.
*
* @remarks
* The default is AND.
* @example
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
* ```
*/
public set filteringLogic(value: FilteringLogic);
public get filteringLogic(): FilteringLogic;
/* mustSetInCodePlatforms: WebComponents;Blazor */
/**
* Gets/Sets the filtering state.
*
* @example
* ```html
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
* ```
* @remarks
* Supports two-way binding.
*/
public set filteringExpressionsTree(value: IgcFilteringExpressionsTree);
public get filteringExpressionsTree(): IgcFilteringExpressionsTree;
/**
* Gets/Sets the advanced filtering state.
*
* @example
* ```typescript
* let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
* this.grid.advancedFilteringExpressionsTree = logic;
* ```
*/
public set advancedFilteringExpressionsTree(value: IgcFilteringExpressionsTree);
public get advancedFilteringExpressionsTree(): IgcFilteringExpressionsTree;
/**
* Gets/Sets the locale.
*
* @remarks
* If not set, returns browser's language.
*/
public set locale(value: string);
public get locale(): string;
public set pagingMode(value: GridPagingMode);
public get pagingMode(): GridPagingMode;
/**
* Gets/Sets if the row selectors are hidden.
*
* @remarks
* By default row selectors are shown
*/
public set hideRowSelectors(value: boolean);
public get hideRowSelectors(): boolean;
/**
* Gets/Sets whether rows can be moved.
*
* @example
* ```html
* <igx-grid #grid [rowDraggable]="true"></igx-grid>
* ```
*/
public set rowDraggable(value: boolean);
public get rowDraggable(): boolean;
/**
* Gets/Sets the trigger for validators used when editing the grid.
*
* @example
* ```html
* <igx-grid #grid validationTrigger='blur'></igx-grid>
* ```
*/
public set validationTrigger(value: GridValidationTrigger);
public get validationTrigger(): GridValidationTrigger;
/**
* Gets/Sets whether the rows are editable.
*
* @remarks
* By default it is set to false.
* @example
* ```html
* <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
* ```
*/
public set rowEditable(value: boolean);
public get rowEditable(): boolean;
/**
* Gets/Sets the height.
*
* @example
* ```html
* <igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
*/
public set height(value: string);
public get height(): string;
/**
* Gets/Sets the width of the grid.
*
* @example
* ```typescript
* let gridWidth = this.grid.width;
* ```
*/
public set width(value: string);
public get width(): string;
/**
* Gets/Sets the row height.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
* ```
*/
public set rowHeight(value: number);
public get rowHeight(): number;
/**
* Gets/Sets the default width of the columns.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
* ```
*/
public set columnWidth(value: string);
public get columnWidth(): string;
/**
* Get/Sets the message displayed when there are no records.
*
* @example
* ```html
* <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
* ```
*/
public set emptyGridMessage(value: string);
public get emptyGridMessage(): string;
/**
* Gets/Sets whether the grid is going to show a loading indicator.
*
* @example
* ```html
* <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
* ```
*/
public set isLoading(value: boolean);
public get isLoading(): boolean;
/**
* Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid
*
* @remarks
* This will allow to bind the grid to remote data and having auto-generated columns at the same time.
* Note that after generating the columns, this property would be disabled to avoid re-creating
* columns each time a new data is assigned.
* @example
* ```typescript
* this.grid.shouldGenerate = true;
* ```
* @deprecated Column re-creation now relies on `autoGenerate` instead.
*/
public set shouldGenerate(value: boolean);
public get shouldGenerate(): boolean;
/**
* Gets/Sets the message displayed when there are no records and the grid is filtered.
*
* @example
* ```html
* <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
* ```
*/
public set emptyFilteredGridMessage(value: string);
public get emptyFilteredGridMessage(): string;
/* mustSetInCodePlatforms: WebComponents;Blazor;React */
/**
* Gets/Sets the initial pinning configuration.
*
* @remarks
* Allows to apply pinning the columns to the start or the end.
* Note that pinning to both sides at a time is not allowed.
* @example
* ```html
* <igx-grid [pinning]="pinningConfig"></igx-grid>
* ```
*/
public set pinning(value: IgcPinningConfig);
public get pinning(): IgcPinningConfig;
/**
* Gets/Sets if the filtering is enabled.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
*/
public set allowFiltering(value: boolean);
public get allowFiltering(): boolean;
/**
* Gets/Sets a value indicating whether the advanced filtering is enabled.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
* ```
*/
public set allowAdvancedFiltering(value: boolean);
public get allowAdvancedFiltering(): boolean;
/**
* Gets/Sets the filter mode.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
* ```
* @remarks
* By default it's set to FilterMode.quickFilter.
*/
public set filterMode(value: FilterMode);
public get filterMode(): FilterMode;
/**
* Gets/Sets the summary position.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
* ```
* @remarks
* By default it is bottom.
*/
public set summaryPosition(value: GridSummaryPosition);
public get summaryPosition(): GridSummaryPosition;
/**
* Gets/Sets the summary calculation mode.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
* ```
* @remarks
* By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.
*/
public set summaryCalculationMode(value: GridSummaryCalculationMode);
public get summaryCalculationMode(): GridSummaryCalculationMode;
/**
* Controls whether the summary row is visible when groupBy/parent row is collapsed.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>
* ```
* @remarks
* By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible
* when the groupBy/parent row is collapsed.
*/
public set showSummaryOnCollapse(value: boolean);
public get showSummaryOnCollapse(): boolean;
/**
* Gets/Sets the filtering strategy of the grid.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
* ```
*/
public set filterStrategy(value: IgcFilteringStrategy);
public get filterStrategy(): IgcFilteringStrategy;
/**
* Gets/Sets the sorting strategy of the grid.
*
* @example
* ```html
* <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
* ```
*/
public set sortStrategy(value: IgcGridSortingStrategy);
public get sortStrategy(): IgcGridSortingStrategy;
/**
* Gets/Sets the sorting options - single or multiple sorting.
* Accepts an `ISortingOptions` object with any of the `mode` properties.
*
* @example
* ```typescript
* const _sortingOptions: ISortingOptions = {
* mode: 'single'
* }
* ```html
* <igx-grid [sortingOptions]="sortingOptions"><igx-grid>
* ```
*/
public set sortingOptions(value: IgcSortingOptions);
public get sortingOptions(): IgcSortingOptions;
/* blazorByValueArray */
/* blazorAlwaysWriteback */
/* @tsTwoWayProperty (true, "SelectedRowsChange", "Detail", false) */
/* blazorPrimitiveValue */
/**
* Gets/Sets the current selection state.
*
* @remarks
* Represents the selected rows' IDs (primary key or rowData)
* @example
* ```html
* <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
* ```
*/
/* @tsTwoWayProperty (true, "SelectedRowsChange", "Detail", false) */
/* @blazorSynthesizeTwoWayBind */
public set selectedRows(value: any[]);
public get selectedRows(): any[];
/* csSuppress */
/**
* A list of `IgxGridRowComponent`.
*
* @example
* ```typescript
* const rowList = this.grid.rowList;
* ```
*/
public get rowList(): IgcRowDirective[];
/* csSuppress */
/**
* A list of currently rendered `IgxGridRowComponent`'s.
*
* @example
* ```typescript
* const dataList = this.grid.dataRowList;
* ```
*/
public get dataRowList(): IgcRowDirective[];
/**
* Gets the header row selector template.
*/
public set headSelectorTemplate(value: IgcRenderFunction<IgcHeadSelectorTemplateContext>);
public get headSelectorTemplate(): IgcRenderFunction<IgcHeadSelectorTemplateContext>;
/**
* Gets the row selector template.
*/
public set rowSelectorTemplate(value: IgcRenderFunction<IgcRowSelectorTemplateContext>);
public get rowSelectorTemplate(): IgcRenderFunction<IgcRowSelectorTemplateContext>;
/**
* The custom template, if any, that should be used when rendering the row drag indicator icon
*/
public set dragIndicatorIconTemplate(value: IgcRenderFunction<IgcGridEmptyTemplateContext>);
public get dragIndicatorIconTemplate(): IgcRenderFunction<IgcGridEmptyTemplateContext>;
/* mustSetInCodePlatforms: WebComponents;Blazor;React */
/**
* Gets/Sets the sorting state.
*
* @remarks
* Supports two-way data binding.
* @example
* ```html
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
* ```
*/
public set sortingExpressions(value: IgcSortingExpression[]);
public get sortingExpressions(): IgcSortingExpression[];
/**
* Gets/Sets cell selection mode.
*
* @remarks
* By default the cell selection mode is multiple
* @param selectionMode: GridSelectionMode
*/
public set cellSelection(value: GridSelectionMode);
public get cellSelection(): GridSelectionMode;
/**
* Gets/Sets row selection mode
*
* @remarks
* By default the row selection mode is 'none'
* Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'
*/
public set rowSelection(value: GridSelectionMode);
public get rowSelection(): GridSelectionMode;
/**
* Gets/Sets column selection mode
*
* @remarks
* By default the row selection mode is none
* @param selectionMode: GridSelectionMode
*/
public set columnSelection(value: GridSelectionMode);
public get columnSelection(): GridSelectionMode;
/**
* Gets the default row height.
*
* @example
* ```typescript
* const rowHeigh = this.grid.defaultRowHeight;
* ```
*/
public get defaultRowHeight(): number;
/**
* Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width.
*
* @remarks
* Used internally for restricting header group component width.
* The values below depend on the header cell default right/left padding values.
*/
public get defaultHeaderGroupMinWidth(): number;
/**
* Gets an array of `IgxColumnComponent`s.
*
* @example
* ```typescript
* const colums = this.grid.columns.
* ```
*/
public get columns(): IgcColumnComponent[];
/* csSuppress */
/**
* Gets an array of the pinned `IgxRowComponent`s.
*
* @example
* ```typescript
* const pinnedRow = this.grid.pinnedRows;
* ```
*/
public get pinnedRows(): IgcGridRowComponent[];
/**
* Returns the total number of records.
*
* @remarks
* Only functions when paging is enabled.
* @example
* ```typescript
* const totalRecords = this.grid.totalRecords;
* ```
*/
public set totalRecords(value: number);
public get totalRecords(): number;
/**
* Gets/Sets whether clicking over a row should select/deselect it
*
* @remarks
* By default it is set to true
* @param enabled: boolean
*/
public set selectRowOnClick(value: boolean);
public get selectRowOnClick(): boolean;
/**
* Returns whether the record is pinned or not.
*
* @param rowIndex Index of the record in the `filteredSortedData` collection.
*/
public isRecordPinnedByIndex(rowIndex: number): void;
/**
* Toggles the specified column's visibility.
*
* @example
* ```typescript
* this.grid1.toggleColumnVisibility({
* column: this.grid1.columns[0],
* newValue: true
* });
* ```
*/
public toggleColumnVisibility(args: IgcColumnVisibilityChangedEventArgs): void;
/**
* Expands all rows.
*
* @example
* ```typescript
* this.grid.expandAll();
* ```
*/
public expandAll(): void;
/**
* Collapses all rows.
*
* @example
* ```typescript
* this.grid.collapseAll();
* ```
*/
public collapseAll(): void;
/**
* Expands the row by its id.
*
* @remarks
* ID is either the primaryKey value or the data record instance.
* @example
* ```typescript
* this.grid.expandRow(rowID);
* ```
* @param rowID The row id - primaryKey value or the data record instance.
*/
public expandRow(rowID: any): void;
/**
* Collapses the row by its id.
*
* @remarks
* ID is either the primaryKey value or the data record instance.
* @example
* ```typescript
* this.grid.collapseRow(rowID);
* ```
* @param rowID The row id - primaryKey value or the data record instance.
*/
public collapseRow(rowID: any): void;
/**
* Toggles the row by its id.
*
* @remarks
* ID is either the primaryKey value or the data record instance.
* @example
* ```typescript
* this.grid.toggleRow(rowID);
* ```
* @param rowID The row id - primaryKey value or the data record instance.
*/
public toggleRow(rowID: any): void;
/**
* Gets the `width` to be set on `IgxGridHeaderGroupComponent`.
*/
public getHeaderGroupWidth(column: IgcColumnComponent): string;
/**
* Returns the `IgxColumnComponent` by field name.
*
* @example
* ```typescript
* const myCol = this.grid1.getColumnByName("ID");
* ```
* @param name
*/
public getColumnByName(name: string): IgcColumnComponent;
public getColumnByVisibleIndex(index: number): IgcColumnComponent;
/**
* Recalculates all widths of columns that have size set to `auto`.
*
* @example
* ```typescript
* this.grid1.recalculateAutoSizes();
* ```
*/
public recalculateAutoSizes(): void;
/**
* Places a column before or after the specified target column.
*
* @example
* ```typescript
* grid.moveColumn(column, target);
* ```
*/
public moveColumn(column: IgcColumnComponent, target: IgcColumnComponent, pos?: DropPosition): void;
/**
* Triggers change detection for the `IgxGridComponent`.
* Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.
* May degrade performance if used when not needed, or if misused:
* ```typescript
* // DON'Ts:
* // don't call markForCheck from inside a loop
* // don't call markForCheck when a primitive has changed
* grid.data.forEach(rec => {
* rec = newValue;
* grid.markForCheck();
* });
*
* // DOs
* // call markForCheck after updating a nested property
* grid.data.forEach(rec => {
* rec.nestedProp1.nestedProp2 = newValue;
* });
* grid.markForCheck();
* ```
*
* @example
* ```typescript
* grid.markForCheck();
* ```
*/
public markForCheck(): void;
/* csSuppress */
/**
* Creates a new `IgxGridRowComponent` and adds the data record to the end of the data source.
*
* @example
* ```typescript
* this.grid1.addRow(record);
* ```
* @param data
*/
public addRow(data: any): void;
/* blazorCSSuppress */
/**
* Removes the `IgxGridRowComponent` and the corresponding data record by primary key.
*
* @remarks
* Requires that the `primaryKey` property is set.
* The method accept rowSelector as a parameter, which is the rowID.
* @example
* ```typescript
* this.grid1.deleteRow(0);
* ```
* @param rowSelector
*/
public deleteRow(rowSelector: any): any;
/* blazorCSSuppress */
/**
* Updates the `IgxGridRowComponent` and the corresponding data record by primary key.
*
* @remarks
* Requires that the `primaryKey` property is set.
* @example
* ```typescript
* this.gridWithPK.updateCell('Updated', 1, 'ProductName');
* ```
* @param value the new value which is to be set.
* @param rowSelector corresponds to rowID.
* @param column corresponds to column field.
*/
public updateCell(value: any, rowSelector: any, column: string): void;
/* blazorCSSuppress */
/**
* Updates the `IgxGridRowComponent`
*
* @remarks
* The row is specified by
* rowSelector parameter and the data source record with the passed value.
* This method will apply requested update only if primary key is specified in the grid.
* @example
* ```typescript
* grid.updateRow({
* ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
* }, 1);
* ```
* @param value–
* @param rowSelector correspond to rowID
*/
// TODO: prevent event invocation
public updateRow(value: any, rowSelector: any): void;
/**
* Returns the data that is contained in the row component.
*
* @remarks
* If the primary key is not specified the row selector match the row data.
* @example
* ```typescript
* const data = grid.getRowData(94741);
* ```
* @param rowSelector correspond to rowID
*/
public getRowData(rowSelector: any): any;
/**
* Sort a single `IgxColumnComponent`.
*
* @remarks
* Sort the `IgxGridComponent`'s `IgxColumnComponent` based on the provided array of sorting expressions.
* @example
* ```typescript
* this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
* ```
*/
public sort(expression: IgcSortingExpression[]): void;
/**
* Filters a single `IgxColumnComponent`.
*
* @example
* ```typescript
* public filter(term) {
* this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
* }
* ```
* @param name
* @param value
* @param conditionOrExpressionTree
* @param ignoreCase
*/
public filter(name: string, value: any, conditionOrExpressionTree?: IgcFilteringExpressionsTree | IgcFilteringOperation, ignoreCase?: boolean): void;
/**
* Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition.
*
* @example
* ```typescript
* grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));
* ```
* @param value
* @param condition
* @param ignoreCase
* @deprecated
*/
public filterGlobal(value: any, condition: any, ignoreCase?: any): void;
/**
* Enables summaries for the specified column and applies your customSummary.
*
* @remarks
* If you do not provide the customSummary, then the default summary for the column data type will be applied.
* @example
* ```typescript
* grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);
* ```
* Enable summaries for the listed columns.
* @example
* ```typescript
* grid.enableSummaries('ProductName');
* ```
* @param rest
*/
public enableSummaries(rest: any[]): void;
/**
* Disable summaries for the specified column.
*
* @example
* ```typescript
* grid.disableSummaries('ProductName');
* ```
* @remarks
* Disable summaries for the listed columns.
* @example
* ```typescript
* grid.disableSummaries([{ fieldName: 'ProductName' }]);
* ```
*/
public disableSummaries(rest: any[]): void;
/**
* If name is provided, clears the filtering state of the corresponding `IgxColumnComponent`.
*
* @remarks
* Otherwise clears the filtering state of all `IgxColumnComponent`s.
* @example
* ```typescript
* this.grid.clearFilter();
* ```
* @param name
*/
public clearFilter(name?: string): void;
/**
* If name is provided, clears the sorting state of the corresponding `IgxColumnComponent`.
*
* @remarks
* otherwise clears the sorting state of all `IgxColumnComponent`.
* @example
* ```typescript
* this.grid.clearSort();
* ```
* @param name
*/
public clearSort(name?: string): void;
// TODO: We have return values here. Move them to event args ??
/**
* Pins a column by field name.
*
* @remarks
* Returns whether the operation is successful.
* @example
* ```typescript
* this.grid.pinColumn("ID");
* ```
* @param columnName
* @param index
*/
public pinColumn(columnName: string, index?: number): boolean;
/**
* Unpins a column by field name. Returns whether the operation is successful.
*
* @example
* ```typescript
* this.grid.pinColumn("ID");
* ```
* @param columnName
* @param index
*/
public unpinColumn(columnName: string, index?: number): boolean;
/* csSuppress */
/**
* Pin the row by its id.
*
* @remarks
* ID is either the primaryKey value or the data record instance.
* @example
* ```typescript
* this.grid.pinRow(rowID);
* ```
* @param rowID The row id - primaryKey value or the data record instance.
* @param index The index at which to insert the row in the pinned collection.
*/
public pinRow(rowID: any, index?: number, row?: IgcRowType): boolean;
/* csSuppress */
/**
* Unpin the row by its id.
*
* @remarks
* ID is either the primaryKey value or the data record instance.
* @example
* ```typescript
* this.grid.unpinRow(rowID);
* ```
* @param rowID The row id - primaryKey value or the data record instance.
*/
public unpinRow(rowID: any, row?: IgcRowType): boolean;
/**
* Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
*
* @remarks
* Returns how many times the grid contains the string.
* @example
* ```typescript
* this.grid.findNext("financial");
* ```
* @param text the string to search.
* @param caseSensitive optionally, if the search should be case sensitive (defaults to false).
* @param exactMatch optionally, if the text should match the entire value (defaults to false).
*/
public findNext(text: string, caseSensitive?: boolean, exactMatch?: boolean): number;
/**
* Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
*
* @remarks
* Returns how many times the grid contains the string.
* @example
* ```typescript
* this.grid.findPrev("financial");
* ```
* @param text the string to search.
* @param caseSensitive optionally, if the search should be case sensitive (defaults to false).
* @param exactMatch optionally, if the text should match the entire value (defaults to false).
*/
public findPrev(text: string, caseSensitive?: boolean, exactMatch?: boolean): number;
/**
* Reapplies the existing search.
*
* @remarks
* Returns how many times the grid contains the last search.
* @example
* ```typescript
* this.grid.refreshSearch();
* ```
* @param updateActiveInfo
*/
public refreshSearch(updateActiveInfo?: boolean, endEdit?: boolean): number;
/**
* Removes all the highlights in the cell.
*
* @example
* ```typescript
* this.grid.clearSearch();
* ```
*/
public clearSearch(): void;
/**
* Gets calculated width of the pinned area.
*
* @example
* ```typescript
* const pinnedWidth = this.grid.getPinnedWidth();
* ```
* @param takeHidden If we should take into account the hidden columns in the pinned area.
*/
public getPinnedWidth(takeHidden?: boolean): void;
/**
* Select specified rows by ID.
*
* @example
* ```typescript
* this.grid.selectRows([1,2,5], true);
* ```
* @param rowIDs
* @param clearCurrentSelection if true clears the current selection
*/
public selectRows(rowIDs: any[], clearCurrentSelection?: boolean): void;
/**
* Deselect specified rows by ID.
*
* @example
* ```typescript
* this.grid.deselectRows([1,2,5]);
* ```
* @param rowIDs
*/
public deselectRows(rowIDs: any[]): void;
/**
* Selects all rows
*
* @remarks
* By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.
* If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows.
* @example
* ```typescript
* this.grid.selectAllRows();
* this.grid.selectAllRows(false);
* ```
* @param onlyFilterData
*/
public selectAllRows(onlyFilterData?: boolean): void;
/**
* Deselects all rows
*
* @remarks
* By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.
* If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows.
* @example
* ```typescript
* this.grid.deselectAllRows();
* ```
* @param onlyFilterData
*/
public deselectAllRows(onlyFilterData?: boolean): void;
/**
* Deselect selected cells.
* @example
* ```typescript
* this.grid.clearCellSelection();
* ```
*/
public clearCellSelection(): void;
/**