Public Row API Specification

Public Row API Specification

Contents

1. Task
2. Overview
3. Implementation

Revision History

Version	User	Date	Notes
0.1	Hristo Anastasov	March 18, 2021	Initial Draft
0.2	Hristo Anastasov	March 25, 2021	API polishing, implementation without injecting row

1. Task

Currently, grid APIs which return "row objects" are returning the actual row component from current state of the DOM. However this is far from useful as with the current implementation virtualization state is not taken into account (#6158) as well as exposing API which should not be usable by users of the grid.

As a solution, a new row-like interface should be exposed by the grids as the type returned from certain public API calls. This new interface will act as a façade for the core row API (while also taking the current virtualization state into account.

1. Overview

IgxGridRow, IgxTreeGridRow and IgxHierarchicalGridRow are the new classes, which implement the new interface. These classes act as a façade for the corresponding row components: IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalGridRowComponent. (see below).

1. Implementation

1. Declare the public RowType interface, which defines the public properties/methods to be exposed in the public API.

export interface RowType {
    key: any;
    data: any;
    disabled: boolean;
    index: number;
    pinned: boolean;
    selected: boolean;
    expanded: boolean;
    deleted: boolean;
    inEditMode: boolean;
    // Always returns null for IgxGridRow
    children?: ITreeGridRecord[];
    // Always returns false for IgxGridRow
    parent?: ITreeGridRecord;
    hasChildren: boolean;
    update: (value: any) => void;
    delete: () => any;
    pin: () => void;
    unpin: () => void;
}

2. Implement the new façade classes, which should implement the interface. This façade class takes the index of the row as parameter in the constructor, along with the corresponding grid component. Those are the only two needed to initialize the facade class instance - the index of the row and the grid.

IgxGridRow and IgxTreeGridRow implement the same interface. Define a new interface if needed for the IgxHierarchicalGridRow.

API calls happen over the grid api and grid services and nothing depends on the actual row component anymore.

export class IgxGridRow implements RowType { 
    public get pinned(): boolean {
        return this.grid.isRecordPinned(this.data);
    }

    public set pinned(val: boolean) {
        if (val) {
            this.grid.pinRow(this.key);
        } else {
            this.grid.unpinRow(this.key);
        }
    }
    /**
     * @hidden
     */
    constructor(index: number, private _grid: IgxGridBaseDirective) {
        this.index = index;
    }
}

export class IgxTreeGridRow extends IgxGridRow implements RowType {
    public get treeRow(): ITreeGridRecord {
        return this._tgrid.records.get(this.key);
    }

    /**
     * Returns the child rows.
     */
    public get children(): ITreeGridRecord[] {
        return this.treeRow.children;
    }

    /**
     * Returns the parent row.
     */
    public get parent(): ITreeGridRecord {
        return this.treeRow.parent;
    }

    /**
     * @hidden
     */
    constructor(index: number, private _tgrid: IgxTreeGridComponent) {
        super(index, _tgrid);
    }
}

3. Cell instances continue to take the IgxRowDirective as intRow input for internal use. row exposed by the cell component returns an instance of the corresponding row class.

/** @hidden @internal */
@Input()
public intRow: IgxRowDirective<IgxGridBaseDirective & GridType>;

/**
 * Gets the row of the cell.
 row: RowType = cell.row;
 */
@Input()
public get row(): RowType {
    return new IgxGridRow(this.intRow.index, this.grid);     // grid-base.directive.ts
    return new IgxTreeGridRow(this.intRow.index, this.grid); // tree-grid.component.ts
}

3. Make the public row API’s work with instances of the new classes. Those instances are created on demand in corresponding calls:

// grid-base.directive.ts 
public getRowByIndex(index: number): RowType {
    if (index < 0 || index >= this.filteredSortedData.length) {
        return undefined;
    }
    return new IgxGridRow(index, this);
}

// tree-grid.component.ts
public getRowByIndex(index: number): RowType {
    if (index < 0 || index >= this.filteredSortedData.length) {
        return undefined;
    }
    return new IgxTreeGridRow(index, this);
}