DataGridComponent selectRow method not working with virtualScoll set to true

[Swany]

If I have a virtualScroll set to true for a DataGridComponent and call selectRow it does not work.

I load a grid with data.
I scroll half way down the grid.
I edit the row by passing the row to a dialog. Before I open the dialog I assign the row to a public variable.
I save the save data and call service to get the data and reload the grid.
I now call selectRow by passing in the saved row variable.
The grid does not scroll to the selected row or even select that row.

If I am not using the method correctly please provide an example.

[stworthy]

Please look at this code:

Code:

<eui-datagrid style="height:250px"
[virtualScroll]="true"
[data]="data"
[total]="total"
idField="inv"
selectionMode="single"
[(selection)]="selectedRow"
[pageNumber]="pageNumber"
[pageSize]="pageSize"
[rowHeight]="rowHeight">
<eui-grid-column field="inv" title="Inv No"></eui-grid-column>
<eui-grid-column field="name" title="Name"></eui-grid-column>
<eui-grid-column field="amount" title="Amount" align="right"></eui-grid-column>
<eui-grid-column field="price" title="Price" align="right"></eui-grid-column>
<eui-grid-column field="cost" title="Cost" align="right"></eui-grid-column>
<eui-grid-column field="note" title="Note"></eui-grid-column>
</eui-datagrid>

If you reload the data, the current 'selectedRow' record is different from the new loaded data. So you will lose the selected information. To solve this issue, please reset the 'selectedRow' after reloading the data, or set the 'idField' property for the datagrid component.

[Swany]

I have the idField set but it still does not work.

Code:

   <eui-datagrid #uiBeHoldsGrid [data]="data" style="height:calc(100vh - 290px); " [loading]="loading" loadMsg="Loading Please Wait"
            [filterable]="true" [sorts]="[{field:'createDateFormated',order:'desc'}]" [virtualScroll]="true"
            [pageNumber]="pageNumber" [pageSize]="pageSize" idField="id" selectionMode="row">

Code:

    LoadData() {
        this.data = [];
        this.loading = true;
        var zone = GqConfigService.timeZone;
        this.sblBeHoldsService.getData((msg) => {
            this.data = msg;
            this.loading = false;
            this.RowCount = this.uiBeHoldsGrid.rows.length;
            setTimeout(() => {
                if(!isNullOrUndefined(this.selectedRow)){
                    var selected = this.uiBeHoldsGrid.rows.find(x => x.id.trim() === this.selectedRow.id);
                    this.uiBeHoldsGrid.selectRow(selected);
                    this.selectedRow = null;
                }             
            }, 100);
            this.gqTabsService.ShowSpinner(false);
        },
            (status, statusText, error) => {
                console.log("Status: " + status);
                console.log("StatusText: " + statusText);
                console.log("Server Error: " + error);
                this.gqTabsService.ShowSpinner(false);
                this.loading = false;
                this.messager.ErrorAlert("Failed", "Failed to load data: " + error)
            },
            zone
        );
    };

[stworthy]

Please bind the 'selection' to the datagrid.

Code:

<eui-datagrid
...
[(selection)]="selectedRow"
</eui-datagrid>

[Swany]

stworthy thank you for your help. It is selecting the row now, but the grid does not scroll to that row.