編集時に行スクロールを防止する

Question

Kendo Angular Gridを使用してデータグリッドを構築しました。各グリッドにサイズを指定し、コマンドボタン "編集、更新、キャンセル"を最後の列として使用しました。 列のサイズのため、グリッドは水平スクロールバーを取得します。 編集は最後の2つのフィールド列でのみ可能です。 「編集」ボタンをクリックすると、行が一番左にスクロールし、編集可能な列+コマンドボタン（「更新」&「キャンセル」）が表示されます。これはユーザーにとって奇妙なものです。再びユーザーは右にスクロールし、更新/取り消し操作を実行する必要があります。 誰かがこの問題の解決策を持っていますか？

<kendo-grid [kendoGridBinding]="view" [height]="700" [pageSize]="25" [pageable]="true" [sortable]="true" [selectable]="true" 
       (dataStateChange)="onStateChange($event)" (edit)="editHandler($event)" (cancel)="cancelHandler($event)" 
       (save)="saveHandler($event)"> 
       <!-- <kendo-grid-messages 
      noRecords="{{ this.noRecordMsg }}"> 
     </kendo-grid-messages> --> 
       <kendo-grid-column title="View" width="60"> 
        <ng-template kendoGridCellTemplate let-dataItem="dataItem"> 

         <button kendoButton [icon]="'hyperlink-open'" [look]="'outline'" [routerLink]="['/detail', dataItem.ID]"></button> 


        </ng-template> 
       </kendo-grid-column> 
       <kendo-grid-column field="FILE_NAME" title="File Name" width="140"></kendo-grid-column> 
       <kendo-grid-column field="FILE_DATE" title="File Date" width="90"> 
        <ng-template kendoGridCellTemplate let-dataItem> 
         {{ dataItem.FILE_DATE | date:"shortDate" }} 
        </ng-template> 
       </kendo-grid-column> 
       <kendo-grid-column field="AMT" title="AMT" width="80"></kendo-grid-column> 
       <kendo-grid-column field="NAME" title="Name" width="90"></kendo-grid-column> 
       <kendo-grid-column field="ID" title="ID" width="80"></kendo-grid-column> 
       <kendo-grid-column field="PI" title="PI" width="110"> 
        <ng-template kendoGridEditTemplate let-dataItem="dataItem"> 
         <kendo-dropdownlist [data]="PIListItems" [value]="dataItem.PI" [(ngModel)]="dataItem.PI" name="PI"></kendo-dropdownlist> 
        </ng-template> 
       </kendo-grid-column> 
       <kendo-grid-column field="STATUS" title="Status" width="100"> 
        <ng-template kendoGridEditTemplate let-dataItem="dataItem"> 
         <kendo-dropdownlist [data]="statusListItems" [value]="dataItem.STATUS" [(ngModel)]="dataItem.STATUS" name="STATUS"></kendo-dropdownlist> 
        </ng-template> 
       </kendo-grid-column> 
       <kendo-grid-command-column title="command" width="180"> 
        <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem"> 
         <button kendoGridEditCommand class="k-primary">Edit</button> 
         <button kendoGridSaveCommand [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button> 
         <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button> 
        </ng-template> 
       </kendo-grid-command-column> 
       <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage"> 
        <kendo-pager-prev-buttons></kendo-pager-prev-buttons> 
        <kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons> 
        <kendo-pager-info></kendo-pager-info> 
        <kendo-pager-next-buttons></kendo-pager-next-buttons> 
        <kendo-pager-page-sizes [pageSizes]="[25, 50, 100, 200]"></kendo-pager-page-sizes> 
       </ng-template> 
      </kendo-grid> 

Answer 1

編集ハンドラがどのように見えるかはわかりませんが、グリッドはドキュメントに従ってエミッタを持っています。テンプレートでこれを追加すると、私は信じてい

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/

：コンポーネントで

<kendo-grid (edit)="onGridEdit($event)">...</kendo-grid> 

そして、以下を追加してみてください。

onGridEdit($event: any): void { 
    $event.preventDefault(); 
    $event.stopPropagation(); 
} 

それが役立ちます。