How to select the first row of the Grid, after the grid refreshed in Angular Grid

[Collin Barrett]

I have some logic as follows to try to select the first row of the grid by default after the grid refreshes. However, the grid doesn't seem to finish refreshing until after the selection happens, so I see the first row selected then immediately deselected.

                ...

                .subscribe({

                    next: alert => {

                        (this.grid.dataSource as Alert[]).push(alert);

                    },

                    complete: () => {

                        this.grid.refresh();

                        this.grid.selectRow(0);

                    }

                });

                ...

Is there a way to subscribe to when the refresh() completes? Or is there another way I might select the first row by default after the grid refreshes?

Thanks.

[Manivel Sellamuthu]

Hi Collin, 

Greetings from Syncfusion support. 

From your query we can understand that you want to select the first row of the Grid, after the grid refreshed. You can achieve that requirement using datBound event of the Grid, which will trigger after the 

Data bound to the Grid. 

Please find the below code example and sample for more information. In the below sample we have selected the first row in the dataBound event of the Grid by invoking the selectRow method of the Grid. 

[App.component.html] 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageOptions' allowSorting= 'true' (dataStateChange)= 'dataStateChange($event)' 

 (dataBound)='dataBound($event)' > 

        <e-columns> 

            <e-column field= "OrderID" headerText="Order ID" width="130" ></e-column> 

            <e-column field= "CustomerID" headerText="Customer Name" width="150"></e-column> 

            <e-column field= "ShipName" headerText="Ship Name" width="200"></e-column> 

            <e-column field= "ShipCity" headerText="Ship City" width="150"></e-column> 

        </e-columns> 

    </ejs-grid> 

</div>` 

[App.component.ts] 

 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

    provider:[OrdersService] 

}) 

export class AppComponent { 

    public data: Observable<DataStateChangeEventArgs>; 

    public pageOptions: Object; 

    @ViewChild('grid') 

    public grid: GridComponent; 

    public state: DataStateChangeEventArgs; 

 

    constructor( private service: OrdersService) { 

         

        this.data = service; 

    } 

 

    public dataStateChange(state: DataStateChangeEventArgs): void { 

        this.service.execute(state); 

    } 

 

    public dataBound () { 

// here we are selecting the row after the refresh Complete 

      this.grid.selectRow(0); 

    } 

 

    public ngOnInit(): void { 

        this.pageOptions = { pageSize: 10, pageCount: 4 }; 

        let state = { skip: 0, take: 10 }; 

        this.service.execute(state); 

    } 

} 

Sample: https://stackblitz.com/edit/angular-152715-selectrow?file=app.component.ts 

Please get back to us, if you need further assistance. 

Regards, 

Manivel