Question

我使用了建立数据网格 Kendo Angular Grid我在其中为每个列指定了大小，并且还有命令按钮＆＃34;编辑，更新，取消＆＃34;作为最后一栏。由于列的大小，网格获得水平滚动条。仅在最后两个字段列中允许编辑。当我点击＆＃34;编辑＆＃34;按钮行向左滚动，我的可编辑列+命令按钮（＆＃34;更新＆＃34;＆amp;＆＃34;取消＆＃34;）隐藏了这是奇怪或不喜欢用户的东西。用户必须再次向右滚动并执行更新/取消操作。有没有人能解决这个问题。

<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

我不知道你的编辑处理程序是什么样的，但Grid根据文档有（编辑）发射器。

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();
}

这会有所帮助。

在编辑单击时阻止行滚动

1 个答案: