Selected first row

I am new in to the igx grid, so don't no how to selected first row  by default. So please help me into that.

Hello,

Thank you for contacting us!

To be able to apply initial row selection, first you have to set the primaryKey and the rowSelectable property for the IgxGrid.

The initial selection is made through the IgxGrid API:

    ngAfterViewInit(){
      this.grid.selectRows([1]);
      this.grid.markForCheck();
    }

The row indexes start from 0.

Keep in mind that the IgxGrid ChangeDetectionStrategy is OnPush, so when you apply changes to the Grid, you have notify it, which is done with the markForCheck() method.

I made a StackBlitz sample, based on your requirement.

Please, take a look at the sample and let me know if you have any questions.

Thanks for your replay.

Actually its working for me but i didn't need [rowSelectable]. When grid load it will select first row and service call there. So after select first row data fetch and it will bind to other component.

In your case it will select first row but it will not throw any event. Below my code for your reference:

 handleRowSelection(event) {
    const targetCell = event.cell as IgxGridCellComponent;
    console.log(targetCell.row.rowData);
}

Hello Mahesh,

I think you resolved your issue, but since I have a live sample of what you need, I'll post it here anyway – https://stackblitz.com/edit/igx-grid-preselected-first-row.

Please let us know if you need further assistance.

Hi,

   using below code i am able to select the row but i am not able to bind its value.

<igx-grid #grid [data]="data" width="100%" height="500px" [primaryKey]="'ProductID'" [rowSelectable]="true">

ngAfterViewInit(){
this.grid.selectRows([1]);
this.grid.markForCheck();
}

can you please help with this.