IgxGrid primaryKey Specification

Overview

In order for the igx-grid component to accommodate additional features while still using data virtualization, a new way to select data rows needs to be introduced. Currently, the selection happens per row index:

public get_row(id: string, index: number): IgxGridRowComponent {
    return this.get(id).rowList.find((row) => row.index === index);
}

The passed arguments are the grid unique id (in order to have multiple grids on a page and have independent row-selections) and the index of the row in the currently visualized data. This is a quick and easy way to get the row that is currently being focused and/or edited, but it creates a few roadblocks for implementing features, for instance persistent row selection. The row index argument searches in the grid data that is currently used by the igx-grid and if that data were to change (for instance filtering), the row index would change as well and row selection would not behave as expected.

To tackle the above setbacks, selecting data rows can now happen by field as well as by index. The primaryKey attribute of the igx-grid is where you can specify the data property you would like to use as an unique identifier for the data rows used in the grid. The values in the column specified as primaryKey must be unique in order to get consistent and expected behavior. With a primaryKey specified, the selection changes as follows:

    public get_primary_key(grid: string) {
        return this.state.get(grid).primaryKey || false;
    }

    public get_row(id: string, index: any): IgxGridRowComponent {
        const primaryKey = get_primary_key(id);
        if(primaryKey){
            return this.get(id).rowList.find((row) => row.rowData[primaryKey] === index);
        }
        return this.get(id).rowList.find((row) => row.index === index);
    }

In short, if primaryKey is specified, the selection of the row happens by passing the row's unique value for the property specified as primary key.

Input

When creating an igx-grid, a primaryKey must be specified in order to be able to identify the property of the rowData object that should be used as an unique identifier. The data in the column specified as primaryKey has to be unique - if there are duplicate values, the grid will not behave as expected.

<igx-grid #grid1 data=[localData] [primaryKey]="'ID'"></igx-grid>

localData = [
    {
        ID: "A1",
        ProductName: "ExampleProduct_1",
        ProductPrice: 999,
        ...
    },
    {
        ID: "A2",
        ProductName: "ExampleProduct_2",
        ProductPrice: 999,
        ...
    },
    {
        ID: "A3",
        ProductName: "ExampleProduct_3",
        ProductPrice: 555,
        ...
    },
    ...
]

Expectations

When a primaryKey is specified, row selection happens using the unique value for the primaryKey property.

    grid1.updateCell(888, "A2", "ProductName");

instead of

    grid1.updateCell(888, 1, "ProductName");

---

    this.gridAPI.get_row(this.gridID,"A2")

instead of

    this.gridAPI.get_row(this.gridID, 1)

With the primaryKey feature being implemented, all other functionality is expected to function as previously defined:

• Rows should still be able to be selected using rowIndex (only if a primaryKey is not specified)
• If the primaryKey is defined, but is missing from the rowData, the grid should throw an error.
• If any features (future or present) that require the use of primaryKey are used in a grid without a defined primaryKey, the grid should throw an error

User stories

As a developer, I want to have the option to wrtie code that addresses and directly
influences rows that are outside of the view port when using grid virtualization

---

As a developer, I want to be able to easily reference of a row (regardless whether
it is in the viewport or not, e.g. the grid might be filtered to exclude it) that
matches an outside condition, e.g. get a reference for a user entered ID

---

As an end user, I would like to have persistent row selection that is not influenced
with the row entering or exiting the viewport.