making selections "under the fold" causes the grid to auto scroll to the top

[Patrick]

I have a nested, selectable grid. When I click on the check that are below the scope of the window it causes the grid to auto scroll all the way back to the top. Selecting by clicking on the cells does not cause this to happen. Only when I click on the checkbox itself.

<kendo-grid
    class="kendo-grid"
    [data]="gridView"
    filterable="menu"
    (dataStateChange)="dataStateChange($event)"
    [pageable]="{ pageSizes: [10, 25, 50], previousNext: true, buttonCount: 5, info: true }"
    [pageSize]="state.take"
    [skip]="state.skip"
    (pageChange)="pageChange($event)"
    [resizable]="true"
    [sortable]="{ allowUnsort: true, mode: 'multiple' }"
    [sort]="state.sort"
    [selectable]="selectableSettings"
    [kendoGridSelectBy]="'id'"
    [selectedKeys]="selections"
    (selectedKeysChange)="onSelectedKeysChange($event)"
    (cellClick)="transactionSelected($event)"
    [rowClass]="rowCallback"
>
    <kendo-grid-checkbox-column [hidden]="group?.groupId !== 1" width="50"></kendo-grid-checkbox-column>
    <kendo-grid-column field="transactionId" title="ID" width="90">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
            <kendo-grid-numeric-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
            </kendo-grid-numeric-filter-menu>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="effectiveDate" title="Date" width="100" format="MM/dd/yyyy">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
            <kendo-grid-date-filter-menu [column]="column" [filter]="filter" [filterService]="filterService"> </kendo-grid-date-filter-menu>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="amount" title="Amount" width="110" [format]="{ style: 'currency' }">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
            <kendo-grid-numeric-filter-menu [column]="column" [filter]="filter" [filterService]="filterService">
            </kendo-grid-numeric-filter-menu>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
            <span *ngIf="dataItem.debitCredit == 'DR'">-</span>{{ dataItem.amount | currency: 'USD' }}
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="transactionTypeVerbose" title="Type" width="120">
        <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
            <multicheck-filter
                [isPrimitive]="true"
                [field]="column.field"
                [filterService]="filterService"
                [currentFilter]="filter"
                [data]="distinctPrimitive(column.field)"
            >
            </multicheck-filter>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="source" title="Source" width="120">
        <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService">
            <multicheck-filter
                [isPrimitive]="true"
                [field]="column.field"
                [filterService]="filterService"
                [currentFilter]="filter"
                [data]="distinctPrimitive(column.field)"
            >
            </multicheck-filter>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="details" title="Details"> </kendo-grid-column>
    <kendo-grid-column field="transactionCommentFirst" title="Comment"> </kendo-grid-column>
    <kendo-grid-column data-filterable="false" width="140">
        <ng-template kendoGridCellTemplate let-dataItem>
            <i
                *ngIf="!dataItem.isRemoving && user.canWrite"
                (click)="openMoveToPendingModal(dataItem)"
                class="fa fa-2x fa-share cursor-pointer text-success mr-2"
                aria-hidden="true"
                placement="top"
                ngbTooltip="Move Transaction to Pending Resolution"
                container="body"
            ></i>
            <app-nori-comments [dataItem]="dataItem" [user]="user"></app-nori-comments>
            <i
                *ngIf="dataItem.isRemoving && user.canWrite"
                class="fa fa-2x fa-circle-o-notch fa-spin fa-fw text-primary cursor-pointer mr-2"
                aria-hidden="true"
            ></i>
            <app-audit-history [dataItem]="dataItem"></app-audit-history>
            <i
                *ngIf="!dataItem.isRemoving && dataItem.transactionGroup.groupName !== 'Ungrouped' && user.canWrite"
                (click)="removeFromGroup(dataItem)"
                class="fa fa-2x fa-minus-circle text-danger cursor-pointer"
                aria-hidden="true"
                placement="top"
                ngbTooltip="Remove from Group"
                container="body"
            ></i>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

 

[Martin Bechev]

Hi Patrick,

I tried to reproduce the reported behavior, but could not. I am not sure what exactly 'When I click on the check that are below the scope of the window' means. I assume that the strange behavior appears when we scroll the grid and select a row after that. 

That is why I tried the basic Grid and Master-Detail Grid checkbox selection functionality. Here are the examples used for testing purposes:

Basic Grid:

https://stackblitz.com/edit/angular-fu9fdu?file=app/app.component.ts

Master-Detail Grid:

https://stackblitz.com/edit/angular-2zrtvb?file=app%2Fcategory-details.component.ts

Also I record a live demo to demonstrate how the grids behave on my side:

https://www.screencast.com/t/8bvvGPdlTPNz

 

So far we are unaware of such issue for the Grid and I am afraid that the provided information is not enough for us to determine what might be causing the described issue.

Can you please provide some more relevant details and send us a similar isolated runnable project that demonstrates the issue (or modify the above Stackblitz examples). This will help us a lot to gain a better understanding about the scenario, and to try to provide a suggestion that is most suitable to the specific use case. Thank you in advance.

Regards,
Martin
Progress Telerik

[Patrick]

Thank you. I'm wondering if my problem might be an unintended side effect of having nested grids. I'm not using the Master-Detail Grid which it looks like is how nested grids were intended to be used. I'll try to get a stack blitz up that will show the problem in the meantime. thanks.

[Patrick]

also curious as to what's the difference between selecting by checkbox or selecting by clicking on a row as the effect i'm experiencing does not happen when clicking on a row.

[Martin Bechev]

Hi Patrick,

In general the difference between using checkbox and the row itself in order to select an element from the table is that the checkboxes are focusable HTML elements. 

Looking forward to your reply. Take your time.

Regards,
Martin
Progress Telerik

[Neel]

Hello, I am also having a similar issue. I have the grid on the bottom of a screen, and when you scroll down to view the grid and click on a column header to filter, the screen scrolls to the top. When you scroll back down, the filter dialog is open. I'm not sure if there's some focus event occurs?

[Yanmario]

Hi Neel,

As the thread is old, could you please provide us with a runnable StackBlitz example demonstrating the unwanted behavior and the version of the packages used in the application. This will allow me to understand the overtaken approach better, debug it, and provide a suitable solution. Thank you for your cooperation in advance.

Regards,
Yanmario Menev
Progress Telerik

[Yanmario]

Hi Neel,

On further research, the described behavior might be related to the following GitHub issue in our public repository:

https://github.com/telerik/kendo-angular/issues/3392

If that is the case, downgrading the Grid version to v5.0.3 could be used as a workaround:

https://stackblitz.com/edit/angular-ncdkt4-59lf3o?file=app%2Fapp.component.ts

https://www.npmjs.com/package/@progress/kendo-angular-grid/v/5.0.3

I hope this helps and we apologize for any inconvenience caused.

Regards,
Yanmario Menev
Progress Telerik