Styjun

I have been using a Syncfusion grid in my angular (v.6.0.8) project. In one of the pages, users can mark months as completed by checkboxes.

It causes to some of the status changes in the model. Hence, I update the model using "splice", after the backend call is completed. In order to reflect the changes on the grid, I have to call this.deliveryItemsGrid.refresh(); but, this cause to lose the position where the user is working on (grid scrolls up to the top).

Is there a way that I could use to refresh the grid without changing the scroll bar position?

[HTML]

 <!-- JAN -->
 <e-column headerText="JAN" [customAttributes]="class: 'textAlignment'">
 <ng-template #template let-data>
 <div> <i class="fa fa-wrench fa-2x" [style.color]="getMonthColorRM(data, 0)"></i></div>
 <div *ngIf="!isReadOnlyUser" class="custom-control custom-checkbox">
 <input id="chkChangeStatusRMdata.rmDetailId + 'JAN'" type="checkbox" class="custom-control-input"
 [checked]="getMonthCompletionStatus(data, 0)" (change)="saveStatusRM(data,'0')" aria-label="Complete Task" />
 <label *ngIf="getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as not complete"></label>
 <label *ngIf="!getMonthCompletionStatus(data, 0)" class="custom-control-label rm-month" for="chkChangeStatusRMdata.rmDetailId + 'JAN'" data-toggle="tooltip" data-placement="top" title="Mark as complete"></label>
 </div>
 <div *ngIf="data.type != 'RM' && ((data?.plannedDate?.getMonth()) == 0)"> <i id="'JAN'+ data.type + data.id" class="fa fa-wrench fa-2x" [style.color]="getMonthColorCM(data)"></i></div>
 </ng-template>
 </e-column>

[ts file]

private saveStatusRM(row: DeliveryPlanModel, monthId) 
 if (row && row.rmYears) 
 let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
 selectedRmYear.schoolNumber = this.schoolNumber;
 selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed = !selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0].completed;
 selectedRmYear.completed = selectedRmYear.completedMonthsList.every(m => m.completed);

 if (selectedRmYear.completed)
 row.statusDisplay = "Completed";
 else 
 if (selectedRmYear.completedMonthsList.some(m => m.completed))
 row.statusDisplay = "In progress";
 else
 row.statusDisplay = "Planned";
 

 // Set the color of the spanners (This is only for front-end use)
 selectedRmYear.completedMonthsList.forEach(x => 
 let color: string = "";
 if (x.completed) 
 color = "green";
 
 else 
 let dueOn: Date = new Date(+selectedRmYear.year, +x.month + 1, 1);
 let currentDate: Date = new Date();
 color = currentDate < dueOn ? "black" : "red";
 
 x.color = color;
 )
 // Update the record on the Database.
 this.deliveryPlanService.updateStatusRM(selectedRmYear).subscribe(
 data => 
 if (data) 
 // Replace the updated record in 'gridRows'
 var selectedRow = this.gridRows.filter(x => x.rmDetailId == row.rmDetailId)[0]
 var selectedRecordIndex = this.gridRows.indexOf(selectedRow);
 this.gridRows.splice(selectedRecordIndex, 1, row);
 this.calculateRmProgress(this.gridRows);
 //this.deliveryItemsGrid.refresh();
 
 );
 
 


private getMonthCompletionStatus(row: DeliveryPlanModel, monthId): boolean 
 if (row && row.rmYears) 
 let selectedRmYear: IYearModel = row.rmYears.filter(y => y.year == this.selectedYear.toString())[0];
 if (selectedRmYear && selectedRmYear.completedMonthsList) 
 var month = selectedRmYear.completedMonthsList.filter(m => m.month == monthId)[0];
 return month ? month.completed : null;
 
 else 
 return null;
 
 
 

We have analyzed your query and we suggest to get the scrollTop value before the refresh method invoke and bind it to the grid scroll bar after the refresh operation completed using actionComplete event. Please refer to the below sample and documentation for your reference,

complete(args)
 if(args.requestType == 'refresh' && this.scrollVal)
 this.grid.getContent().firstElementChild.scrollTop = this.scrollVal;
 this.scrollVal = 0;
 

refresh()
 this.scrollVal = this.grid.getContent().firstElementChild.scrollTop;
 this.grid.refresh();

Sample: https://stackblitz.com/edit/angular-gg4hgd-hrxcwr?file=default.component.ts

Documentation: https://ej2.syncfusion.com/documentation/api/grid/#actioncomplete

Please get back to us for further assistance.

Regards,
Thavasianand S.

I was able to find a solution to the issue. I used "rowDataBound" and "dataBound" events to achieve that. Please refer to the code below.

[HTML]

<ejs-grid #deliveryItemsGrid id="deliveryItemsGrid"
 [dataSource]="gridRows"
 [gridLines]="componentVariables.gridLines"
 [allowPaging]="componentVariables.allowPaging"
 [allowGrouping]="componentVariables.allowGrouping"
 [allowSorting]="componentVariables.allowSorting"
 [allowSelection]="componentVariables.allowSelection"
 [allowTextWrap]="componentVariables.allowTextWrap"
 [allowFiltering]="componentVariables.allowFiltering"
 [pageSettings]="componentVariables.pageSettings"
 [filterSettings]="componentVariables.filterOptions"
 [selectedRowIndex]="selectedRowIndex"
 [selectionSettings]="selectionOptions"
 [toolbar]="componentVariables.toolbarOptions"
 (toolbarClick)="toolbarClick($event)"
 (rowDataBound)="rowDataBound($event)"
 (dataBound)="dataBound($event)">

[ts]

I created two global variables, to store the selected indexes.

 selectedIndexes: number[] = [];
 justNowUpdatedId = 0;

Then, in all the update functions, before calling the refresh() method, I keep the relevant id in the 'justNowUpdatedId' variable.

Finally, I implement "rowDataBound" and "dataBound" events in order to preserve the position which the user was working before.

public rowDataBound(args): void args.data['type'] == 'DPC') && args.data['id'] == this.justNowUpdatedId) 
 this.selectedIndexes.push(parseInt(args.row.getAttribute('aria-rowindex')));
 
 

 public dataBound(args): void 
 if (this.selectedIndexes.length) 
 this.deliveryItemsGrid.selectRows(this.selectedIndexes);
 this.selectedIndexes = [];