Grid Scrolling issue

[Nagendra Gupta]

Dear Team,

I am facing issue in grid scrolling. 

Issue is that when I scroll grid up to down it working fine but when I go to down from up it comes to center. 

It go to up when I do down from up thrice. 

Please find the attached video file for better understanding of my problem. 

Below code which I used 

 <div class="h-100">

<ejs-grid *ngIf="displayGrid" #grid [editSettings]="editSettings" [dataSource]='data' gridLines="Both"

            [enableHover]="gridDataSetting?.IsMouseHover" [allowSorting]='gridDataSetting?.IsSortingAllow'

            [sortSettings]='initialSort' [contextMenuItems]="contextMenuItems"

            (contextMenuClick)='contextMenuClick($event)' allowExcelExport=true allowPdfExport=true allowResizing=true

            [allowMultiSorting]=true [enableVirtualization]="enableVirtualization" [allowSelection]="true"

            [selectionSettings]="selectOptions" (click)='click($event)' height="100%" (dataBound)='dataBound()'

            rowHeight="25" [allowTextWrap]='gridDataSetting?.IsWrapText' (queryCellInfo)='customiseCell($event)'

            (pdfHeaderQueryCellInfo)='pdfHeaderQueryCellInfo($event)' (pdfExportComplete)='pdfExportComplete()'

            (pdfQueryCellInfo)='pdfQueryCellInfo($event)'

            [ngClass]="{'carddesign': gridDataSetting?.PortraitReportType=='CARD' , 'cardinalldevice':  gridDataSetting?.PortraitReportType=='CARDINALLDEVICE' }"

            (excelExportComplete)='excelExportComplete($event)' (keyPressed)="keyPressed($event)"

            (keydown)="keyDown($event)" (cellSaved)="cellSaved($event)" (cellSave)="cellSave($event)"

            headerTemplate="headerTemplate($event)" [aggregates]="aggregateColumn" (cellEdit)="cellEdit($event)"

            (cellSelected)="cellSelected($event)" (actionBegin)='onActionBegin($event)' [searchSettings]='searchOptions'

            [columns]="headerColumnList" (excelQueryCellInfo)='excelQueryCellInfo($event)'

            (actionComplete)='onActionComplete($event)' (created)='created($event)'

            (rowDataBound)='rowDataBound($event)' [pageSettings]='options' [groupSettings]="groupSetting"

            [allowGrouping]="uiGridSetting.allowGrouping" [enableAltRow]="gridDataSetting?.EnableAltRow"

            [disableHtmlEncode]='true' allowFiltering='true' [filterSettings]='filterSettings' (load)="load($event)"

            (exportGroupCaption)="exportGroupCaption($event)">

</ejs-grid>  </div>

load(evt) {

        const rowHeight = 25

        let offsetHeight = (this.gridObj.element.parentElement.offsetHeight / rowHeight);

        offsetHeight = +((offsetHeight * 2) + 10).toFixed();

        this.gridObj.pageSettings.pageSize = offsetHeight;

}

Regards

Nagendra Gupta

Attachment: Google_Chrome_20230210_172609_dc366d57.zip

[Rajapandi Ravi]

Hi Nagendra,

Greetings from Syncfusion support

Based on your shared information we have prepared a sample and tried to reproduce your reported problem, but it was unsuccessful. Please refer the below sample for more information.

Sample: https://stackblitz.com/edit/angular-fbp5ke?file=src%2Fapp.component.ts,src%2Fapp.component.html

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

1)             Share your exact requirement with detailed description.

2)             Share your complete Grid rendering code(ts & html).

3)             Share your syncfusion package version.

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

Regards,

Rajapandi R