Print Page - DataGridComponent selectRow method not working with virtualScoll set to true

Title: DataGridComponent selectRow method not working with virtualScoll set to true
Post by: Swany on November 30, 2018, 02:44:13 PM

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.

Title: Re: DataGridComponent selectRow method not working with virtualScoll set to true
Post by: stworthy on December 01, 2018, 12:25:58 AM

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.

Title: Re: DataGridComponent selectRow method not working with virtualScoll set to true
Post by: Swany on December 03, 2018, 01:50:43 PM

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
        );
    };

Title: Re: DataGridComponent selectRow method not working with virtualScoll set to true
Post by: stworthy on December 03, 2018, 06:33:30 PM

Please bind the 'selection' to the datagrid.

Code:

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

Title: Re: DataGridComponent selectRow method not working with virtualScoll set to true
Post by: Swany on December 04, 2018, 09:20:56 AM

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

EasyUI Forum

General Category => EasyUI for Angular => Topic started by: Swany on November 30, 2018, 02:44:13 PM