1. Home
  2. Forum
  3. Angular - EJ 2
  4. infinite scroll with cacheEnable: true unable to select row after addRecord()

infinite scroll with cacheEnable: true unable to select row after addRecord()

  1. inifinte scroll : true and enableCache : true
  2. we added a new record using addRecord() to grid. 
  3. it should auto select (select grid checkbox) the newly added record.
  4. it is not auto selecting the newly added record and also if i am trying to select any of the record unable to select (checkbox grid)


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

    [allowPaging]="false" [allowSorting]="true" [sortSettings]='sortOptions' [allowFiltering]="true"

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

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

    [filterSettings]="filterSettings" [allowResizing]="true" [enablePersistence]="true"

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

    (beforeDataBound)="onBeforeDataBound($event)" [selectionSettings]="selectOptions" [enableInfiniteScrolling]='true'

    [infiniteScrollSettings]='infiniteOptions' [contextMenuItems]="contextMenuItems"

    (contextMenuClick)="contextMenuClick($event)" (contextMenuOpen)="contextMenuOpen($event)" [allowExcelExport]='true'

    (rowDataBound)="rowDB($event)" (dataBound)="dataBound()" [columns]="columns"

    [rowRenderingMode]="rowMode" [enableAdaptiveUI]='enableAdaptiveUI' (recordDoubleClick)="recordDoubleClick($event)"

    (actionComplete)="actionComplete($event)" (queryCellInfo)="onTooltip($event)" [editSettings]="editSettings" (actionBegin)="actionBegin($event)">

  </ejs-grid>



Attachment: video_ce89fd5e.zip

6 Replies
PS Pavithra Subramaniyam Syncfusion Team May 26, 2022 02:30 PM UTC

Hi Babar Karamat,


Thanks for contacting Syncfusion support.


We suggest refreshing the grid content rows after the programmatic add action using the “refreshContentRows” method to overcome the issue. Please refer to the below code example and sample link for more information.


In the below sample we have refreshed the rows inside the “actionComplete” event after adding the row.


add() {

    this.isAdd = true;

    this.grid.addRecord({ FIELD1: 'XXX' });

  }

  actionComplete(e) {

    // Save request for “add” action

    if (e.requestType == 'save' && e.action == 'add' && this.isAdd) {

      (this.grid.contentModule as any).refreshContentRows({});

      this.isAdd = false;

    }

  }


Sample: https://stackblitz.com/edit/angular-etcpu1?file=app.component.html,app.component.ts


Please get back to us if you need further as on this.


Regards,

Pavithra S


AL Ali August 17, 2022 12:31 PM UTC

Seems okay for add but when you do delete the grid selection breaks and it gets into a state when it won't select the row. Try scroll down get more data, let say get to page 2. And try delete one of the rows.


https://stackblitz.com/edit/angular-etcpu1-yejjgw?file=app.component.html,app.component.ts,data.ts



PS Pavithra Subramaniyam Syncfusion Team August 18, 2022 12:43 PM UTC

Hi Ali,


We have tried to reproduce the issue with the given sample, but the selection is working fine. We have scrolled to the other pages, selected a row, click the delete button, and selected other rows but the selection is fine.
So, could you please share the below details for further validation?


  1. Share the exact replication procedure
  2. Share a video demo of the issue


Regards,

Pavithra S


AL Ali August 18, 2022 01:43 PM UTC

Please see attached video


Attachment: T37wif_(forked)__StackBlitz_febd5a62.zip

PS Pavithra Subramaniyam Syncfusion Team August 23, 2022 07:22 PM UTC

Hi Ali,


Thanks for sharing the video.


We have validated the video and we could reproduce the issue by deleting the row only after the next set of data is loaded. Currently, we are validating the issue “Script error while deleting the row from the next data set load” at our side. So, we will update further details on August 25th, 2022. Until then we appreciate your patience.


Regards,

Pavithra S


PS Pavithra Subramaniyam Syncfusion Team August 25, 2022 02:40 PM UTC

Hi Ali,


Thanks for your patience.


We have validated the sample and found that you have set the primary key to a column that has duplicate values. And there is no need to call the “refreshContentRows” method for the delete action which is causing the reported issue. So we suggest setting primary key column to a unique column and removing the “refreshContentRows” method for deleting inside the “actionComplete” event to overcome the issue. Please refer to the below sample link for more information.


https://stackblitz.com/edit/angular-etcpu1-rbprgb?file=app.component.html,app.component.ts,data.ts


Regards,

Pavithra S


Loader.
Up arrow icon