getSelectedRecords() is empty on rowSelected event when you set persistSelection: true

[Dayakar Reddy]

we are using syncfusion angular version 18.1.52,

query 1 ) grid view selectionSettings  = { persistSelection: true, type: 'Single' };

we selected one row in the gridview, if we navigate to different page and come back to grid 

when we try to get the last selected row(persisted row) we are getting empty array for this.grid.getSelectedRecords() = [] in rowSelected event,

but we are getting row indexes in this.grid.getSelectedRowIndexes() = [2]  in rowSelected event.

can you look into this issue?

 

query 2) grid view  selectionSettings  = { persistSelection: false, type: 'Single' };

when we set persistSelection: false when we trigger  this.grid.refresh() 

the selected rows in the grid are getting unselected, is this expected behavior?

is there any option to skip the unselection of selected rows when we trigger this.grid.refresh() with persistSelection: false.

Note : if we navigate and comeback to grid, we are getting the selected rows(persisted) this.grid.getSelectedRecords()  in rowSelected event with persistSelection: false.

Thanks,

Dayakar Reddy.

[Rajapandi Ravi]

Hi Dayakar, 

Greetings from syncfusion support 

Query#: grid view selectionSettings  = { persistSelection: true, type: 'Single' }; 

We have analyzed your query and we could see that, you like to maintain selection in your Grid while performing paging action. 

By default, the EJ2 Grid having persistSelection feature support. In which, the row Selections are maintained when navigating the pages. You can achieve your requirement by enabling persistSelection as true in the Grid’s selectionSettings. 

 

If ‘persistSelection’ set to true, then the Grid selection is persisted on all operations. For persisting selection in the Grid, any one of the column should be enabled as a primaryKey. Refer to the below code example and sample for your reference. 

 

persistSelection: https://ej2.syncfusion.com/angular/documentation/api/grid/selectionSettings/#persistselection 

 

Based on your query we have prepared a sample with 18.1.52v and tried to reproduce your reported problem. But its working fine from our end. Please refer the below code example, sample and video demo. 

 

App.component.ts 

export class AppComponent { 

  public data: Object[]; 

  public selectOptions: Object; 

  public pageSettings: Object; 

 

  rowSelected(args: any) { 

    var grid = (document.getElementsByClassName("e-grid")[0] as any) 

      .ej2_instances[0]; 

    console.log(grid.getSelectedRecords()); 

  } 

 

  ngOnInit(): void { 

    this.data = data; 

    this.selectOptions = { type: "Single", persistSelection: true }; 

    this.pageSettings = { pageCount: 5 }; 

  } 

} 

 

 

 

App.component.html 

 

<ejs-grid [dataSource]="data" allowPaging="true" [allowSelection]="true" [selectionSettings]="selectOptions" 

    [pageSettings]="pageSettings" (rowSelected)="rowSelected($event)"> 

    <e-columns> 

      <e-column type="checkbox" width="50"></e-column> 

      <e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120" textAlign="Right"> 

      </e-column> 

      .  .  .  .  .  .  .  .  . 

      </e-column> 

    </e-columns> 

  </ejs-grid> 

 

 

 

Sample: https://stackblitz.com/edit/angular-qmjjau-vn12bn?file=app.component.html 

Video demo: https://www.syncfusion.com/downloads/support/forum/161502/ze/161502-2140430292.zip 

Query#: grid view  selectionSettings  = { persistSelection: false, type: 'Single' }; 

By default in our Grid, if you set the persistSelection as false the selected records was not persisted. When you refresh the Grid it will not maintain the selected rows. It was the default behavior of Grid.  

Regards, 

Rajapandi R 

[Dayakar Reddy]

Thank for the response,

Regarding Query-1

selectionSettings  = { persistSelection: true, type: 'Single' };

we set enablePersistence  also true, columns are dynamic and it has primary key set to true.

Select one row in the current grid and navigate to completely new page in your website (not the grid page navigation) and come back to the same grid.

After navigation and when you see  console.log(this.grid.getSelectedRecords()) and console.log(this.grid.getSelectedRowCellIndexes());) in rowSelected event both are empty. Here we supposed to get the last selected row(persisted one) .

please try this scenario.

ts file code

    this.toolbar = ['Update', 'Cancel', 'ExcelExport', 'ColumnChooser', 'Search'];

     this.selectOptions = { persistSelection: true, type: 'Single' };

    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };

    this.pageSettings = { pageSize: 100 };

    this.filterSettings = { type: 'Excel' };

    this.filter = { type: 'CheckBox' };

    this.tagRules = { required: true };

  selectionChanged(e: RowSelectEventArgs) {

    console.log(this.grid.getSelectedRecords());

    console.log(this.grid.getSelectedRowCellIndexes());

}

html file code

  <ejs-grid [id]="gridName" #grid [height]='gridHeight()' rowHeight='28' [dataSource]="jointDataManager"

    [allowPaging]="false" [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true"

    [pageSettings]="pageSettings" allowReordering="true" showColumnChooser="true" [toolbar]="toolbar"

    (toolbarClick)="toolbarClick($event)" (excelExportComplete)='excelExpComplete()' [filterSettings]="filterSettings"

    [allowResizing]="true" [enablePersistence]="true" [editSettings]="editSettings"

    (rowSelected)="selectionChanged($event)" (rowDeselected)="selectionChanged($event)"

    [selectionSettings]="selectOptions" [enableVirtualization]="true" (beforeBatchSave)="batchSave($event)"

    (batchCancel)='batchCancel()' [contextMenuItems]="contextMenuItems" (contextMenuClick)="contextMenuClick($event)"

    [allowExcelExport]='true' (rowDataBound)="rowDB($event)" (dataBound)="dataBound()"

    [columns]="columns">

  </ejs-grid>

[Rajapandi Ravi]

Hi Dayakar, 

Thanks for the update 

Based on your query we have prepared a sample and tried to reproduce your reported problem. But its working fine from our end. Please refer the below code example, sample and video demo. 

normal-grid.component.html 

<ejs-grid id='normalgrid' (rowSelected)="rowSelected($event)" [dataSource]='data' allowPaging='true' [enablePersistence]="true" [selectionSettings]="selectOptions" [columns]="gridColumns" height="365"> 

</ejs-grid> 

Sample: https://stackblitz.com/edit/angular-qmjjau-u9y2bo?file=normal-grid.component.ts 

Video Demo: https://www.syncfusion.com/downloads/support/forum/161502/ze/161502vid-1274501255.zip 

If you still face the issue, Please share the below details that would be helpful for us to provide a better solution. 

1)     Please share the complete Grid rendering code. 

2)     Please share the issue scenario in video demonstration format. 

3)     Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 

Regards, 

Rajapandi R 

[Mark Boyle]

Further to the below issue.

This is reproduced when using a dynamic id for the grid's id and there is a delay waiting on a http request to resolve and return the dynamic id.

 

I have modified the stackblitz by adding a timeout to simulate the issue as below and can reproduce the issue.

public gridName: string;

 ngOnInit(): void {

    this.selectOptions = { type: "Single", persistSelection: true };

    this.gridColumns = [

      {

        type: "checkbox",

        width: "60"

      },

      {

        field: "OrderID",

        isPrimaryKey: "true",

        headerText: "Order ID",

        width: "150"

      },

      {

        field: "CustomerName",

        headerText: "Customer Name",

        width: "150"

      },

      {

        field: "Freight",

        headerText: "Freight",

        width: "150"

      },

      {

        field: "OrderDate",

        headerText: "Order Date",

        width: "150",

        type: "date",

        format: "yMd"

      }

    ];

    setTimeout(() => {

      this.gridName = "gridIdDynamic";

    }, 3000);

  }

<ejs-grid [id]='gridName' (rowSelected)="rowSelected($event)" [dataSource]='data' allowPaging='true'

  [enablePersistence]="true" [selectionSettings]="selectOptions"

  [columns]="gridColumns" height="365">

</ejs-grid>

[Rajapandi Ravi]

Hi Mark, 

By default, we have persisted the Grid properties in the local storage based on the Grid Id. When we change the Grid ID dynamically at the time of selecting the row the Grid id was set as “gridIdDynamic”. After performing the routing or page reload the Grid will start rendering with id “Gridone”. So, at the time of rendering the local Storage does not contain any Grid properties for that id “Gridone”. So, it will not persist in the row selection. It was the default behavior of Grid. 

Regards,
Rajapandi R 

[Mark Boyle]

We set the grid ID during the ngOnInit lifecylce hook and the grid state is correctly persisted using this id. The ID is an internal ID for a speciffic object which is also set during ngOnInit i.e. we persist settings for different grids based on the related object id. Is the issue related to the grid not being re-assigned the correct id early enough?

Thank you

Mark

[Rajapandi Ravi]

Hi Mark, 

 

At the time of selecting the row the Grid id was set as “gridIdDynamic”. After performing the page reload the Grid will start rendering with id “Gridone”. So, at the time of rendering the local Storage does not contain any Grid properties for that id “Gridone”. So, the Grid is rendered without persistance. After 3sec the Grid it was changed to “GridIdDynamic”, but the persistence was not reflecting at this time. It was the default behavior of Grid. 

 

Video demo: https://www.syncfusion.com/downloads/support/forum/161502/ze/161502vd1483843498.zip 

 

Regards,
Rajapandi R