Hierarchy

Hierarchy

  • EventEmitterInterface<IgcGridBaseDirectiveEventMap, this> & LitElement<this>
    • IgrGridBaseDirective

Constructors

Accessors

Methods

Constructors

  • Parameters

    • ...args: any[]

    Returns IgrGridBaseDirective

Accessors

  • get actionStripComponents(): IgcActionStripToken[]

    Returns IgcActionStripToken[]

  • get addRowEmptyTemplate(): IgcRenderFunction<void>

    Returns IgcRenderFunction<void>

  • set addRowEmptyTemplate(value: IgcRenderFunction<void>): void

    Gets/Sets a custom template for adding row UI when grid is empty.

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [addRowEmptyTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: IgcRenderFunction<void>

    Returns void

  • get advancedFilteringExpressionsTree(): IgrFilteringExpressionsTree

    Returns IgrFilteringExpressionsTree

  • set advancedFilteringExpressionsTree(value: IgrFilteringExpressionsTree): void

    Gets/Sets the advanced filtering state.

    let advancedFilteringExpressionsTree = this.grid.advancedFilteringExpressionsTree;
    this.grid.advancedFilteringExpressionsTree = logic;

    Parameters

    Returns void

  • get allowAdvancedFiltering(): boolean

    Returns boolean

  • set allowAdvancedFiltering(value: boolean): void

    Gets/Sets a value indicating whether the advanced filtering is enabled.

    <igx-grid #grid [data]="localData" [allowAdvancedFiltering]="true" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get allowFiltering(): boolean

    Returns boolean

  • set allowFiltering(value: boolean): void

    Gets/Sets if the filtering is enabled.

    <igx-grid #grid [data]="localData" [allowFiltering]="true" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get autoGenerate(): boolean

    Returns boolean

  • set autoGenerate(value: boolean): void

    Gets/Sets whether to auto-generate the columns.

    The default value is false. When set to true, it will override all columns declared through code or in markup.

    <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get autoGenerateExclude(): string[]

    Returns string[]

  • set autoGenerateExclude(value: string[]): void

    Gets/Sets a list of property keys to be excluded from the generated column collection

    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 property.

    <igx-grid data=[Data] [autoGenerate]="true" [autoGenerateExclude]="['ProductName', 'Count']"></igx-grid>
    
    const Data = [{ 'Id': '1', 'ProductName': 'name1', 'Description': 'description1', 'Count': 5 }]
    

    Parameters

    • value: string[]

    Returns void

  • get batchEditing(): boolean

    Returns boolean

  • set batchEditing(value: boolean): void

    Gets/Sets whether the grid has batch editing enabled. When batch editing is enabled, changes are not made directly to the underlying data. Instead, they are stored as transactions, which can later be committed w/ the commit method.

    <igx-grid [batchEditing]="true" [data]="someData">
    </igx-grid>

    Parameters

    • value: boolean

    Returns void

  • get cellSelection(): GridSelectionMode

    Returns GridSelectionMode

  • set cellSelection(value: GridSelectionMode): void

    Gets/Sets cell selection mode.

    By default the cell selection mode is multiple

    Parameters

    Returns void

  • get clipboardOptions(): IgrClipboardOptions

    Returns IgrClipboardOptions

  • set clipboardOptions(value: IgrClipboardOptions): void

    Controls the copy behavior of the grid.

    Parameters

    Returns void

  • get columnList(): IgrColumn[]

    Returns IgrColumn[]

  • get columns(): IgrColumn[]

    Gets an array of IgxColumnComponents.

    const colums = this.grid.columns.
    

    Returns IgrColumn[]

  • get columnSelection(): GridSelectionMode

    Returns GridSelectionMode

  • set columnSelection(value: GridSelectionMode): void

    Gets/Sets column selection mode

    By default the row selection mode is none

    Parameters

    Returns void

  • get columnWidth(): string

    Returns string

  • set columnWidth(value: string): void

    Gets/Sets the default width of the columns.

    <igx-grid #grid [data]="localData" [columnWidth]="100" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: string

    Returns void

  • get dataCloneStrategy(): IgrDataCloneStrategy

    Returns IgrDataCloneStrategy

  • set dataCloneStrategy(value: IgrDataCloneStrategy): void

    Gets/Sets the data clone strategy of the grid when in edit mode.

     <igx-grid #grid [data]="localData" [dataCloneStrategy]="customCloneStrategy"></igx-grid>
    

    Parameters

    Returns void

  • get dataRowList(): IgrRowDirective[]

    A list of currently rendered IgxGridRowComponent's.

    const dataList = this.grid.dataRowList;
    

    Returns IgrRowDirective[]

  • get dataView(): any[]

    Returns the currently transformed paged/filtered/sorted/grouped/pinned/unpinned row data, displayed in the grid.

         const dataView = this.grid.dataView;
    

    Returns any[]

  • get defaultHeaderGroupMinWidth(): number

    Returns the IgxGridHeaderGroupComponent's minimum allowed width.

    Used internally for restricting header group component width. The values below depend on the header cell default right/left padding values.

    Returns number

  • get defaultRowHeight(): number

    Gets the default row height.

    const rowHeigh = this.grid.defaultRowHeight;
    

    Returns number

  • get dragGhostCustomTemplate(): IgcRenderFunction<IgrGridRowDragGhostContext>

    Returns IgcRenderFunction<IgrGridRowDragGhostContext>

  • set dragGhostCustomTemplate(
        value: IgcRenderFunction<IgrGridRowDragGhostContext>,
    ): void

    Gets the custom template, if any, used for row drag ghost.

    Parameters

    Returns void

  • get dragIndicatorIconTemplate(): IgcRenderFunction<IgrGridEmptyTemplateContext>

    Returns IgcRenderFunction<IgrGridEmptyTemplateContext>

  • set dragIndicatorIconTemplate(
        value: IgcRenderFunction<IgrGridEmptyTemplateContext>,
    ): void

    The custom template, if any, that should be used when rendering the row drag indicator icon

    Parameters

    Returns void

  • get emptyFilteredGridMessage(): string

    Returns string

  • set emptyFilteredGridMessage(value: string): void

    Gets/Sets the message displayed when there are no records and the grid is filtered.

    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: string

    Returns void

  • get emptyGridMessage(): string

    Returns string

  • set emptyGridMessage(value: string): void

    Get/Sets the message displayed when there are no records.

    <igx-grid #grid [data]="Data" [emptyGridMessage]="'The grid is empty'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: string

    Returns void

  • get emptyGridTemplate(): IgcRenderFunction<IgrGridTemplateContext>

    Returns IgcRenderFunction<IgrGridTemplateContext>

  • set emptyGridTemplate(value: IgcRenderFunction<IgrGridTemplateContext>): void

    Gets/Sets a custom template when empty.

    <ng-template igxGridEmpty>
    <!-- content to show when the grid is empty -->
    </ng-template>

    Or

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
    

    Parameters

    Returns void

  • get expansionStates(): Map<any, boolean>

    Returns Map<any, boolean>

  • set expansionStates(value: Map<any, boolean>): void

    Gets/Sets a list of key-value pairs [row ID, expansion state].

    Includes only states that differ from the default one. Supports two-way binding.

    <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
    </igx-grid>

    Parameters

    • value: Map<any, boolean>

    Returns void

  • get filteredData(): any

    Returns an array of objects containing the filtered data.

    let filteredData = this.grid.filteredData;
    

    Returns any

  • get filteredSortedData(): any[]

    Returns an array containing the filtered sorted data.

    const filteredSortedData = this.grid1.filteredSortedData;
    

    Returns any[]

  • get filteringExpressionsTree(): IgrFilteringExpressionsTree

    Returns IgrFilteringExpressionsTree

  • set filteringExpressionsTree(value: IgrFilteringExpressionsTree): void

    Gets/Sets the filtering state.

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(filteringExpressionsTree)]="model.filteringExpressions"></igx-grid>
    

    Supports two-way binding.

    Parameters

    Returns void

  • get filteringLogic(): FilteringLogic

    Returns FilteringLogic

  • set filteringLogic(value: FilteringLogic): void

    Gets/Sets the filtering logic of the IgxGridComponent.

    The default is AND.

    <igx-grid [data]="Data" [autoGenerate]="true" [filteringLogic]="filtering"></igx-grid>
    

    Parameters

    Returns void

  • get filterMode(): FilterMode

    Returns FilterMode

  • set filterMode(value: FilterMode): void

    Gets/Sets the filter mode.

    <igx-grid #grid [data]="localData" [filterMode]="'quickFilter'" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    

    By default it's set to FilterMode.quickFilter.

    Parameters

    Returns void

  • get filterStrategy(): IgrFilteringStrategy

    Returns IgrFilteringStrategy

  • set filterStrategy(value: IgrFilteringStrategy): void

    Gets/Sets the filtering strategy of the grid.

     <igx-grid #grid [data]="localData" [filterStrategy]="filterStrategy"></igx-grid>
    

    Parameters

    Returns void

  • get headerCollapsedIndicatorTemplate(): IgcRenderFunction<
        IgrGridTemplateContext,
    >

    Returns IgcRenderFunction<IgrGridTemplateContext>

  • set headerCollapsedIndicatorTemplate(
        value: IgcRenderFunction<IgrGridTemplateContext>,
    ): void

    Gets the row collapse indicator template.

    Parameters

    Returns void

  • get headerExpandedIndicatorTemplate(): IgcRenderFunction<IgrGridTemplateContext>

    Returns IgcRenderFunction<IgrGridTemplateContext>

  • set headerExpandedIndicatorTemplate(
        value: IgcRenderFunction<IgrGridTemplateContext>,
    ): void

    Gets the header expand indicator template.

    Parameters

    Returns void

  • get height(): string

    Returns string

  • set height(value: string): void

    Gets/Sets the height.

    <igx-grid #grid [data]="Data" [height]="'305px'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: string

    Returns void

  • get hiddenColumnsCount(): number

    Gets the number of hidden columns.

    const hiddenCol = this.grid.hiddenColumnsCount;

    Returns number

  • get hideRowSelectors(): boolean

    Returns boolean

  • set hideRowSelectors(value: boolean): void

    Gets/Sets if the row selectors are hidden.

    By default row selectors are shown

    Parameters

    • value: boolean

    Returns void

  • get isLoading(): boolean

    Returns boolean

  • set isLoading(value: boolean): void

    Gets/Sets whether the grid is going to show a loading indicator.

    <igx-grid #grid [data]="Data" [isLoading]="true" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get lastSearchInfo(): IgrSearchInfo

    Represents the last search information.

    Returns IgrSearchInfo

  • get loadingGridTemplate(): IgcRenderFunction<IgrGridTemplateContext>

    Returns IgcRenderFunction<IgrGridTemplateContext>

  • set loadingGridTemplate(value: IgcRenderFunction<IgrGridTemplateContext>): void

    Gets/Sets a custom template when loading.

    <ng-template igxGridLoading>
    <!-- content to show when the grid is loading -->
    </ng-template>

    Or

    <igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
    

    Parameters

    Returns void

  • get locale(): string

    Returns string

  • set locale(value: string): void

    Gets/Sets the locale.

    If not set, returns browser's language.

    Parameters

    • value: string

    Returns void

  • get moving(): boolean

    Returns boolean

  • set moving(value: boolean): void

    Controls whether columns moving is enabled in the grid.

    Parameters

    • value: boolean

    Returns void

  • Returns IgrOverlayOutletDirective

  • set outlet(value: IgrOverlayOutletDirective): void

    Gets/Sets the outlet used to attach the grid's overlays to.

    If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.

    Parameters

    Returns void

  • get paginationComponents(): IgrPaginator[]

    Returns IgrPaginator[]

  • get pagingMode(): GridPagingMode

    Returns GridPagingMode

  • set pagingMode(value: GridPagingMode): void

    Parameters

    Returns void

  • get pinnedColumns(): IgrColumn[]

    Gets an array of the pinned IgxColumnComponents.

    const pinnedColumns = this.grid.pinnedColumns.
    

    Returns IgrColumn[]

  • get pinnedColumnsCount(): number

    Gets the number of pinned columns.

    Returns number

  • get pinnedRows(): IgrGridRowComponent[]

    Gets an array of the pinned IgxRowComponents.

    const pinnedRow = this.grid.pinnedRows;
    

    Returns IgrGridRowComponent[]

  • get pinning(): IgrPinningConfig

    Returns IgrPinningConfig

  • set pinning(value: IgrPinningConfig): void

    Gets/Sets the initial pinning configuration.

    Allows to apply pinning the columns to the start or the end. Note that pinning to both sides at a time is not allowed.

    <igx-grid [pinning]="pinningConfig"></igx-grid>
    

    Parameters

    Returns void

  • get primaryKey(): string

    Returns string

  • set primaryKey(value: string): void

    Gets/Sets the primary key.

    <igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: string

    Returns void

  • get resourceStrings(): IgrGridResourceStrings

    Returns IgrGridResourceStrings

  • set resourceStrings(value: IgrGridResourceStrings): void

    Gets/Sets the resource strings.

    By default it uses EN resources.

    Parameters

    Returns void

  • get rowClasses(): any

    Returns any

  • set rowClasses(value: any): void

    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:

    callback = (row: RowType) => { return row.selected > 6; }
    rowClasses = { 'className' : this.callback };
    <igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
    

    IgxColumnComponent

    Parameters

    • value: any

    Returns void

  • get rowCollapsedIndicatorTemplate(): IgcRenderFunction<
        IgrGridRowTemplateContext,
    >

    Returns IgcRenderFunction<IgrGridRowTemplateContext>

  • set rowCollapsedIndicatorTemplate(
        value: IgcRenderFunction<IgrGridRowTemplateContext>,
    ): void

    Gets the row collapse indicator template.

    Parameters

    Returns void

  • get rowDraggable(): boolean

    Returns boolean

  • set rowDraggable(value: boolean): void

    Gets/Sets whether rows can be moved.

    <igx-grid #grid [rowDraggable]="true"></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get rowEditable(): boolean

    Returns boolean

  • set rowEditable(value: boolean): void

    Gets/Sets whether the rows are editable.

    By default it is set to false.

    <igx-grid #grid [rowEditable]="true" [primaryKey]="'ProductID'" ></igx-grid>
    

    Parameters

    • value: boolean

    Returns void

  • get rowExpandedIndicatorTemplate(): IgcRenderFunction<IgrGridRowTemplateContext>

    Returns IgcRenderFunction<IgrGridRowTemplateContext>

  • set rowExpandedIndicatorTemplate(
        value: IgcRenderFunction<IgrGridRowTemplateContext>,
    ): void

    Gets the row expand indicator template.

    Parameters

    Returns void

  • get rowHeight(): number

    Returns number

  • set rowHeight(value: number): void

    Gets/Sets the row height.

    <igx-grid #grid [data]="localData" [rowHeight]="100" [autoGenerate]="true"></igx-grid>
    

    Parameters

    • value: number

    Returns void

  • get rowList(): IgrRowDirective[]

    A list of IgxGridRowComponent.

    const rowList = this.grid.rowList;
    

    Returns IgrRowDirective[]

  • get rowSelection(): GridSelectionMode

    Returns GridSelectionMode

  • set rowSelection(value: GridSelectionMode): void

    Gets/Sets row selection mode

    By default the row selection mode is 'none' Note that in IgxGrid and IgxHierarchicalGrid 'multipleCascade' behaves like 'multiple'

    Parameters

    Returns void

  • get rowStyles(): any

    Returns any

  • set rowStyles(value: any): void

    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.

    styles = {
    background: 'yellow',
    color: (row: RowType) => row.selected : 'red': 'white'
    }
    <igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
    

    IgxColumnComponent

    Parameters

    • value: any

    Returns void

  • get selectedRows(): any[]

    Returns any[]

  • set selectedRows(value: any[]): void

    Gets/Sets the current selection state.

    Represents the selected rows' IDs (primary key or rowData)

    <igx-grid [data]="localData" primaryKey="ID" rowSelection="multiple" [selectedRows]="[0, 1, 2]"><igx-grid>
    

    Parameters

    • value: any[]

    Returns void

  • get selectRowOnClick(): boolean

    Returns boolean

  • set selectRowOnClick(value: boolean): void

    Gets/Sets whether clicking over a row should select/deselect it

    By default it is set to true

    Parameters

    • value: boolean

    Returns void

  • get shouldGenerate(): boolean

    Returns boolean

  • set shouldGenerate(value: boolean): void

    Gets/Sets whether the columns should be auto-generated once again after the initialization of the grid

    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.

     this.grid.shouldGenerate = true;
    

    Column re-creation now relies on autoGenerate instead.

    Parameters

    • value: boolean

    Returns void

  • get showSummaryOnCollapse(): boolean

    Returns boolean

  • set showSummaryOnCollapse(value: boolean): void

    Controls whether the summary row is visible when groupBy/parent row is collapsed.

    <igx-grid #grid [data]="localData" [showSummaryOnCollapse]="true" [autoGenerate]="true"></igx-grid>
    

    By default showSummaryOnCollapse is set to 'false' which means that the summary row is not visible when the groupBy/parent row is collapsed.

    Parameters

    • value: boolean

    Returns void

  • get snackbarDisplayTime(): number

    Returns number

  • set snackbarDisplayTime(value: number): void

    Gets/Sets the display time for the row adding snackbar notification.

    By default it is 6000ms.

    Parameters

    • value: number

    Returns void

  • get sortAscendingHeaderIconTemplate(): IgcRenderFunction<
        IgrGridHeaderTemplateContext,
    >

    Returns IgcRenderFunction<IgrGridHeaderTemplateContext>

  • set sortAscendingHeaderIconTemplate(
        value: IgcRenderFunction<IgrGridHeaderTemplateContext>,
    ): void

    The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.

    Parameters

    Returns void

  • get sortDescendingHeaderIconTemplate(): IgcRenderFunction<
        IgrGridHeaderTemplateContext,
    >

    Returns IgcRenderFunction<IgrGridHeaderTemplateContext>

  • set sortDescendingHeaderIconTemplate(
        value: IgcRenderFunction<IgrGridHeaderTemplateContext>,
    ): void

    The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.

    Parameters

    Returns void

  • get sortHeaderIconTemplate(): IgcRenderFunction<IgrGridHeaderTemplateContext>

    Returns IgcRenderFunction<IgrGridHeaderTemplateContext>

  • set sortHeaderIconTemplate(
        value: IgcRenderFunction<IgrGridHeaderTemplateContext>,
    ): void

    Gets custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.

    Parameters

    Returns void

  • get sortingExpressions(): IgrSortingExpression[]

    Returns IgrSortingExpression[]

  • set sortingExpressions(value: IgrSortingExpression[]): void

    Gets/Sets the sorting state.

    Supports two-way data binding.

    <igx-grid #grid [data]="Data" [autoGenerate]="true" [(sortingExpressions)]="model.sortingExpressions"></igx-grid>
    

    Parameters

    Returns void

  • get sortingOptions(): IgrSortingOptions

    Returns IgrSortingOptions

  • set sortingOptions(value: IgrSortingOptions): void

    Gets/Sets the sorting options - single or multiple sorting. Accepts an ISortingOptions object with any of the mode properties.

    const _sortingOptions: ISortingOptions = {
    mode: 'single'
    }
    ```html
    <igx-grid [sortingOptions]="sortingOptions"><igx-grid>

    Parameters

    Returns void

  • get sortStrategy(): IgrGridSortingStrategy

    Returns IgrGridSortingStrategy

  • set sortStrategy(value: IgrGridSortingStrategy): void

    Gets/Sets the sorting strategy of the grid.

     <igx-grid #grid [data]="localData" [sortStrategy]="sortStrategy"></igx-grid>
    

    Parameters

    Returns void

  • get summaryCalculationMode(): GridSummaryCalculationMode

    Returns GridSummaryCalculationMode

  • set summaryCalculationMode(value: GridSummaryCalculationMode): void

    Gets/Sets the summary calculation mode.

    <igx-grid #grid [data]="localData" summaryCalculationMode="rootLevelOnly" [autoGenerate]="true"></igx-grid>
    

    By default it is rootAndChildLevels which means the summaries are calculated for the root level and each child level.

    Parameters

    Returns void

  • get summaryPosition(): GridSummaryPosition

    Returns GridSummaryPosition

  • set summaryPosition(value: GridSummaryPosition): void

    Gets/Sets the summary position.

    <igx-grid #grid [data]="localData" summaryPosition="top" [autoGenerate]="true"></igx-grid>
    

    By default it is bottom.

    Parameters

    Returns void

  • get summaryRowHeight(): number

    Returns number

  • set summaryRowHeight(value: number): void

    Get/Set IgxSummaryRow height

    Parameters

    • value: number

    Returns void

  • get toolbar(): IgrGridToolbar[]

    Returns IgrGridToolbar[]

  • get totalRecords(): number

    Returns number

  • set totalRecords(value: number): void

    Returns the total number of records.

    Only functions when paging is enabled.

    const totalRecords = this.grid.totalRecords;
    

    Parameters

    • value: number

    Returns void

  • get unpinnedColumns(): IgrColumn[]

    Gets an array of unpinned IgxColumnComponents.

    const unpinnedColumns = this.grid.unpinnedColumns.
    

    Returns IgrColumn[]

  • get validationTrigger(): GridValidationTrigger

    Returns GridValidationTrigger

  • set validationTrigger(value: GridValidationTrigger): void

    Gets/Sets the trigger for validators used when editing the grid.

    <igx-grid #grid validationTrigger='blur'></igx-grid>
    

    Parameters

    Returns void

  • get virtualizationState(): IgrForOfState

    Returns the state of the grid virtualization.

    Includes the start index and how many records are rendered.

    const gridVirtState = this.grid1.virtualizationState;
    

    Returns IgrForOfState

  • get visibleColumns(): IgrColumn[]

    Returns an array of visible IgxColumnComponents.

    const visibleColumns = this.grid.visibleColumns.
    

    Returns IgrColumn[]

  • get width(): string

    Returns string

  • set width(value: string): void

    Gets/Sets the width of the grid.

    let gridWidth = this.grid.width;
    

    Parameters

    • value: string

    Returns void

Methods

  • Creates a new IgxGridRowComponent and adds the data record to the end of the data source.

    this.grid1.addRow(record);
    

    Parameters

    • data: any

    Returns void

  • Enters add mode by spawning the UI under the specified row by rowID.

    If null is passed as rowID, the row adding UI is spawned as the first record in the data view

    this.grid.beginAddRowById('ALFKI');
    this.grid.beginAddRowById('ALFKI', true);
    this.grid.beginAddRowById(null);

    Parameters

    • rowID: any

      The rowID to spawn the add row UI for, or null to spawn it as the first record in the data view

    • asChild: boolean

      Whether the record should be added as a child. Only applicable to igxTreeGrid.

    Returns void

  • Enters add mode by spawning the UI at the specified index.

    Accepted values for index are integers from 0 to this.grid.dataView.length

    this.grid.beginAddRowByIndex(0);
    

    Parameters

    • index: number

      The index to spawn the UI at. Accepts integers from 0 to this.grid.dataView.length

    Returns void

  • Deselect selected cells.

    this.grid.clearCellSelection();
    

    Returns void

  • If name is provided, clears the filtering state of the corresponding IgxColumnComponent.

    Otherwise clears the filtering state of all IgxColumnComponents.

    this.grid.clearFilter();
    

    Parameters

    • name: string

    Returns void

  • Removes all the highlights in the cell.

    this.grid.clearSearch();
    

    Returns void

  • If name is provided, clears the sorting state of the corresponding IgxColumnComponent.

    otherwise clears the sorting state of all IgxColumnComponent.

    this.grid.clearSort();
    

    Parameters

    • name: string

    Returns void

  • Closes the advanced filtering dialog.

    Parameters

    • applyChanges: boolean

      indicates whether the changes should be applied

    Returns void

  • Collapses all rows.

    this.grid.collapseAll();
    

    Returns void

  • Collapses the row by its id.

    ID is either the primaryKey value or the data record instance.

    this.grid.collapseRow(rowID);
    

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    Returns void

  • Removes the IgxGridRowComponent and the corresponding data record by primary key.

    Requires that the primaryKey property is set. The method accept rowSelector as a parameter, which is the rowID.

    this.grid1.deleteRow(0);
    

    Parameters

    • rowSelector: any

    Returns any

  • Deselects all columns

    this.grid.deselectAllColumns();
    

    Returns void

  • Deselects all rows

    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.

    this.grid.deselectAllRows();
    

    Parameters

    • onlyFilterData: boolean

    Returns void

  • Deselect specified columns by field.

    this.grid.deselectColumns(['ID','Name']);
    

    Parameters

    Returns void

  • Deselect specified rows by ID.

    this.grid.deselectRows([1,2,5]);
    

    Parameters

    • rowIDs: any[]

    Returns void

  • Disable summaries for the specified column.

    grid.disableSummaries('ProductName');
    

    Disable summaries for the listed columns.

    grid.disableSummaries([{ fieldName: 'ProductName' }]);
    

    Parameters

    • rest: any[]

    Returns void

  • Enables summaries for the specified column and applies your customSummary.

    If you do not provide the customSummary, then the default summary for the column data type will be applied.

    grid.enableSummaries([{ fieldName: 'ProductName' }, { fieldName: 'ID' }]);
    

    Enable summaries for the listed columns.

    grid.enableSummaries('ProductName');
    

    Parameters

    • rest: any[]

    Returns void

  • Finishes the row transactions on the current row and returns whether the grid editing was canceled.

    If commit === true, passes them from the pending state to the data (or transaction service)

    <button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button>
    

    Parameters

    • commit: boolean
    • evt: any

    Returns boolean

  • Expands all rows.

    this.grid.expandAll();
    

    Returns void

  • Expands the row by its id.

    ID is either the primaryKey value or the data record instance.

    this.grid.expandRow(rowID);
    

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    Returns void

  • Filters a single IgxColumnComponent.

    public filter(term) {
    this.grid.filter("ProductName", term, IgxStringFilteringOperand.instance().condition("contains"));
    }

    Parameters

    Returns void

  • Filters all the IgxColumnComponent in the IgxGridComponent with the same condition.

    grid.filterGlobal('some', IgxStringFilteringOperand.instance().condition('contains'));
    

    Parameters

    • value: any
    • condition: any
    • ignoreCase: any

    Returns void

  • Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

    Returns how many times the grid contains the string.

    this.grid.findNext("financial");
    

    Parameters

    • text: string

      the string to search.

    • caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • exactMatch: boolean

      optionally, if the text should match the entire value (defaults to false).

    Returns number

  • Finds the previous occurrence of a given string in the grid and scrolls to the cell if it isn't visible.

    Returns how many times the grid contains the string.

    this.grid.findPrev("financial");
    

    Parameters

    • text: string

      the string to search.

    • caseSensitive: boolean

      optionally, if the search should be case sensitive (defaults to false).

    • exactMatch: boolean

      optionally, if the text should match the entire value (defaults to false).

    Returns number

  • Returns the IgxColumnComponent by field name.

    const myCol = this.grid1.getColumnByName("ID");
    

    Parameters

    • name: string

    Returns IgrColumn

  • Parameters

    • index: number

    Returns IgrColumn

  • Gets the width to be set on IgxGridHeaderGroupComponent.

    Parameters

    Returns string

  • Returns ICellPosition which defines the next cell, according to the current position, that match specific criteria.

    You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

     const nextEditableCellPosition = this.grid.getNextCell(0, 3, (column) => column.editable);
    

    Parameters

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: any

    Returns IgrCellPosition

  • Gets calculated width of the pinned area.

    const pinnedWidth = this.grid.getPinnedWidth();
    

    Parameters

    • takeHidden: boolean

      If we should take into account the hidden columns in the pinned area.

    Returns void

  • Returns ICellPosition which defines the previous cell, according to the current position, that match specific criteria.

    You can pass callback function as a third parameter of getPreviousCell method. The callback function accepts IgxColumnComponent as a param

     const previousEditableCellPosition = this.grid.getPreviousCell(0, 3, (column) => column.editable);
    

    Parameters

    • currRowIndex: number
    • curVisibleColIndex: number
    • callback: any

    Returns IgrCellPosition

  • Returns the data that is contained in the row component.

    If the primary key is not specified the row selector match the row data.

    const data = grid.getRowData(94741);
    

    Parameters

    • rowSelector: any

      correspond to rowID

    Returns any

  • Returns an array of the current columns selection in the form of [{ column.field: cell.value }, ...].

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean
    • headers: boolean

    Returns void

  • Returns an array of the current cell selection in the form of [{ column.field: cell.value }, ...].

    If formatters is enabled, the cell value will be formatted by its respective column formatter (if any). If headers is enabled, it will use the column header (if any) instead of the column field.

    Parameters

    • formatters: boolean
    • headers: boolean

    Returns void

  • Get the currently selected ranges in the grid.

    Returns IgrGridSelectionRange[]

  • Returns whether the record is pinned or not.

    Parameters

    • rowIndex: number

      Index of the record in the filteredSortedData collection.

    Returns 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:

    // 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();
    grid.markForCheck();
    

    Returns void

  • Places a column before or after the specified target column.

    grid.moveColumn(column, target);
    

    Parameters

    Returns void

  • Navigates to a position in the grid based on provided rowindex and visibleColumnIndex.

    Also can execute a custom logic over the target element, through a callback function that accepts { targetType: GridKeydownTargetType, target: Object }

     this.grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });
    

    Parameters

    • rowIndex: number
    • visibleColIndex: number
    • cb: any

    Returns void

  • Opens the advanced filtering dialog.

    Parameters

    Returns void

  • Pins a column by field name.

    Returns whether the operation is successful.

    this.grid.pinColumn("ID");
    

    Parameters

    • columnName: string
    • index: number

    Returns boolean

  • Pin the row by its id.

    ID is either the primaryKey value or the data record instance.

    this.grid.pinRow(rowID);
    

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    • index: number

      The index at which to insert the row in the pinned collection.

    • row: IgrRowType

    Returns boolean

  • Recalculates all widths of columns that have size set to auto.

    this.grid1.recalculateAutoSizes();
    

    Returns void

  • Recalculates grid width/height dimensions.

    Should be run when changing DOM elements dimentions manually that affect the grid's size.

    this.grid.reflow();
    

    Returns void

  • Reapplies the existing search.

    Returns how many times the grid contains the last search.

    this.grid.refreshSearch();
    

    Parameters

    • updateActiveInfo: boolean
    • endEdit: boolean

    Returns number

  • Selects all columns

    this.grid.deselectAllColumns();
    

    Returns void

  • Selects all rows

    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.

    this.grid.selectAllRows();
    this.grid.selectAllRows(false);

    Parameters

    • onlyFilterData: boolean

    Returns void

  • Select specified columns.

    this.grid.selectColumns(['ID','Name'], true);
    

    Parameters

    • columns: string[] | IgrColumn[]
    • clearCurrentSelection: boolean

      if true clears the current selection

    Returns void

  • Get current selected columns.

    Returns an array with selected columns

    const selectedColumns = this.grid.selectedColumns();
    

    Returns IgrColumn[]

  • Select range(s) of cells between certain rows and columns of the grid.

    Parameters

    Returns void

  • Select specified rows by ID.

    this.grid.selectRows([1,2,5], true);
    

    Parameters

    • rowIDs: any[]
    • clearCurrentSelection: boolean

      if true clears the current selection

    Returns void

  • Sort a single IgxColumnComponent.

    Sort the IgxGridComponent's IgxColumnComponent based on the provided array of sorting expressions.

    this.grid.sort({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
    

    Parameters

    Returns void

  • Toggles the row by its id.

    ID is either the primaryKey value or the data record instance.

    this.grid.toggleRow(rowID);
    

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    Returns void

  • Unpins a column by field name. Returns whether the operation is successful.

    this.grid.pinColumn("ID");
    

    Parameters

    • columnName: string
    • index: number

    Returns boolean

  • Unpin the row by its id.

    ID is either the primaryKey value or the data record instance.

    this.grid.unpinRow(rowID);
    

    Parameters

    • rowID: any

      The row id - primaryKey value or the data record instance.

    • row: IgrRowType

    Returns boolean

  • Updates the IgxGridRowComponent and the corresponding data record by primary key.

    Requires that the primaryKey property is set.

    this.gridWithPK.updateCell('Updated', 1, 'ProductName');
    

    Parameters

    • value: any

      the new value which is to be set.

    • rowSelector: any

      corresponds to rowID.

    • column: string

      corresponds to column field.

    Returns void

  • Updates the IgxGridRowComponent

    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.

    grid.updateRow({
    ProductID: 1, ProductName: 'Spearmint', InStock: true, UnitsInStock: 1, OrderDate: new Date('2005-03-21')
    }, 1);

    Parameters

    • value: any
    • rowSelector: any

      correspond to rowID

    Returns void