Once dataSource or table records are appended, scroll position and selected row of grid should be same as before data update.

Question

Every time load the 20 records in grid table after scroll down. If we are select the multiple row then load to the another 20 records that scroll position move to the selected row.But we need the scroll position and selected row of grid should
be same as before data updateAnalysis  get the selected row element before dataSource
are update and then once datasource is update set the attribute aria-selected value true on the specified selected row.
It’s also not working.1.      
ScrollIntoview
, ScrollTop , ScrollPosition, ScrollTo methods are used after the table data is Appended. It’s also
not working.actionComplete($event) {        if ($event.requestType === 'refresh') {            this.selectedrowindex.map( x => {            const prevselectrow = this.searchGrid.getRows()[x];            for (let i = 0; i < prevselectrow.children.length; i++) {                    prevselectrow.children[i].className = 'e-rowcell e-selectionbackground e-active';                prevselectrow.children[i].setAttribute('aria-selected', 'true');            }        });        }    }loadData() {		//this.searchStatus = this.searchServ.totalFound + ' result found for ' + '"' + this.searchServ.searchCriteria + '"';		this.searchServ.updateSearchStatus();		this.totalFound = this.searchServ.totalFound;		this.endIndex = this.searchServ.endIndex;		if (this.searchServ.totalFound > 0) {			this.columnsDetails = this.searchServ.getColumns();			this.searchResultData = this.searchServ.getDatas();			if (this.searchServ.totalFound > this.searchServ.endIndex) {				this.showLoadMoreBtn = true;				//this.showOrHideLoadingSpan();				this.searchServ.startIndx = this.searchServ.startIndx + 20;			} else {				this.showLoadMoreBtn = false;				//this.showOrHideLoadingSpan();			}		} else {			this.searchResultData = [];			this.showLoadMoreBtn = false;			//this.showOrHideLoadingSpan();		}		this.showOpenBtn = true;		this.showFilterBtn = true;	}Attachment: searchresulttableview_5346ff8d.zip

Sujith Kumar Rajkumar · Accepted Answer

Hi Gobinathan, 
 
Thanks for sharing the details. 
 
As mentioned in our last update the previous settings will be cleared when new data is bound to the Grid and so the previous selected row indexes will not be maintained. However if you wish to maintain it then you can achieve it storing the selected row indexes in a global variable before new data is bound to the Grid. Then select the stored row indexes in the Grid’s new data by using its selectRows method in the Grid’s dataBound event handler(triggers when data is bound to the Grid). 
 
This is demonstrated in the below code snippet, 
 




// Button click function 
onClick(args) { 
    this.curSelectedRecordIndexes = []; 
    // Selected row indexes are stored in a global variable 
    this.curSelectedRecordIndexes = this.gridObj.getSelectedRowIndexes(); 
    // grid data is modified 
    this.data = (this.dataState) ? this.data2 : this.data1; 
    this.dataState = !this.dataState; 
} 
 
// Grid’s dataBound event handler 
onDataBound() { 
    if (this.curSelectedRecordIndexes.length !== 0) { 
        // The previous stored row indexes are selected in the new data 
        this.gridObj.selectRows(this.curSelectedRecordIndexes); 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-ecyrft?file=app.component.ts  
 
API links: https://ej2.syncfusion.com/angular/documentation/api/grid/#selectrows  
                  https://ej2.syncfusion.com/angular/documentation/api/grid/#databound  
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Sujith Kumar Rajkumar · Answer

Hi Gobinathan, 
 
Greetings from Syncfusion support. 
 
When binding new data to the Grid, the previous Grid settings will be cleared and the entire component will be re-rendered. This is its default behavior as the previous settings cannot be retained when new data is set. 
 
This is because - Consider multiple records are selected in the Grid, now when new data source is bound to the Grid and refreshed, the previously selected records might or might not be present in the new data source and even if it is present it might not be in the same index as the previous one. This is the same for all Grid actions and for these cases the old settings cannot be restored. The entire Grid component will be refreshed and settings cleared for binding the new data to it. So the selected records cannot be maintained. 
 
From this – “But we need the scroll position and selected row of grid should be same as before data update”, please confirm us the following for your case, 
 

Will the same data be assigned to the Grid dynamically or different data?
If different data is assigned do you wish to just select the previously maintained selected row index?
Share more details on your requirement.
 
Based on the confirmation we will check the feasibility of achieving your requirement from our end and update you the further details. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Gobinathan · Answer

Hi Sujith Kumar,Thanks for your valuable reply.We are assigned the different data in Grid Component, and previously selected row_index also should be maintained.I attached the screen short for your more information.Initially we load the 20 records after selected multiple rows and scroll down again we load the add more 20 record.But the issue is the scroll position and selected rows of grid should be same as before we leave that position.Attachment: IssueImages_633f2326.zip