selecting row after refresh does not work? JS2, Angular, TypeScript, Grid

[Laurens Albers]

Hi,

I'm trying to select the same row after refreshing the grid, but this doesn't seem to work?

//grid simple sample

               

                          [columns]='columns1'

                          [dataSource]='dataSource1'

                          [editSettings]='editSettings'

                          (keydown)="changeValue($event)"

                          [selectionSettings]='selectionOptions'

                          (rowSelected)="onRowSelectChange($event)">

               

  index: number;

  columns1: object[] = [{ field: 'order'}];

  dataSource1: object[] = [    { name: 'test1',  order: '' }]

  selectionOptions: SelectionSettingsModel = { type: 'Single', mode: 'Row' };

//functions

  onRowSelectChange(event: RowSelectEventArgs) {

      this.index = event.rowIndex; 

  }

 changeValue(ev: KeyboardEvent) {

    if (ev.keyCode === 32) { //spacebar

      this.dataSource1[this.index]['order']++;

      this.grid1.refreshColumns(); < in order to "see" the value it needs to be refreshed

// focus/selection is lost(duh!), so now I want to reselect.

}

Tried things like:

this.grid1.selectRow(this.index,true); <-- this should work, but doesnt do anything.

this.grid1.rowSelected.call(event:RowSelectEventArgs); <-- calling the property

->The goal is to go up in value till the required number is reached using ONLY the spacebar

greetings,

Laurens 

[Madhu Sudhanan P]

Hi Laurens Albers, 

 

Thanks for contacting Syncfusion support. 

 

Query 1: I'm trying to select the same row after refreshing the grid, but this doesn't seem to work? 

 

We have checked your query and you can achieve your requirement by using dataBound event. We have prepared a sample in which same row is selected after refreshing the grid. Please refer the below code example, sample link and documentation link. 

 

[app.component.ts] 

@Component({ 

  selector: 'app-root', 

  template: `<ejs-grid id="grid" #grid [columns]='columns1' 

  [dataSource]='dataSource1' [allowPaging]='true' [selectionSettings]='selectionOptions' 

  (rowSelected)='rowSelected($event)' (keydown)='changeValue($event)'    (dataBound)='dataBound($event)'> 

</ejs-grid>`, 

  .  .  .  . 

}) 

export class AppComponent implements OnInit { 

  public data: Object[]; 

  columns1: object[] = [{ field: 'Order'}, { field: 'Name'}, { field: 'Country'}]; 

  dataSource1: object[] = [ 

    { name: 'test1',  Order: '10', Name: 'HANAR', Country: 'France' }, 

    .  .  .  . 

]; 

  public selectionOptions: SelectionSettingsModel; 

  public index: number = null; 

  @ViewChild('grid') 

    public grid: GridComponent; 

  ngOnInit(): void { 

   .  .  .  . 

  } 

  rowSelected(e) { 

    this.index = e.rowIndex; 

} 

changeValue(ev: KeyboardEvent) { 

  if (ev.keyCode === 32) { 

    this.dataSource1[this.index]['Order']++; 

    this.grid.refreshColumns(); 

} 

} 

dataBound(args) { 

  if (this.index !== null) { 

    this.grid.selectRow(this.index); 

  } 

} 

} 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/rowSelected-1570242808  

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#databound  

Regards, 

Madhu Sudhanan P