Kendo Grid Row单元格在Angular 5中单击焦点问题

时间:2018-04-04 11:17:45

标签: angular5 kendo-ui-angular2

我在Angular 5中的Kendo -grid的选定行中遇到问题单元格焦点。

问题是:

我可以使用下面的代码动态创建一个新行,但是当我单击一个单元格时,光标会转到第一列(在mouseup事件中)而不是聚焦在所选单元格中。

   <kendo-grid [data]="view" 
                                            (add)="addHandler($event)" id="grdPurchaseOrder" 
                                            (remove)="removeHandler($event)" (contextmenu)="onContextMenu($event)" 
                                            [selectable]="true" (selectionChange)="selectionChange($event)" 
                                            (save)="saveHandler($event)" (cancel)="cancelHandler($event)"
                                            [scrollable]="'none'" (click)="add.click()">


                                        <kendo-grid-toolbar style="display:none;">

                                            <button kendoGridAddCommand #add style="float:right;">
                                                <i class="material-icons md-24 md-icon">add_box</i>
                                            </button>
                                        </kendo-grid-toolbar>                                       
                                        <kendo-grid-column field="Description" class="uk-text-left input-size1">
                                            <ng-template kendoGridHeaderTemplate class="uk-text-left">
                                                {{ 'Description' | translate }}
                                            </ng-template>

                                            <ng-template kendoGridEditTemplate let-dataItem="dataItem" style="font:10px;">
                                                <input [ngModel]="dataItem.Description" tabindex="" id="txtDescription" (focus)="selectAllContent($event)" (focusout)="AddingDescriptionLine($event)" (mouseup)="$event.stopPropagation()" (ngModelChange)="DescriptionCLicked($event)" class="k-textbox input-size" style="padding-top:0px;padding-bottom:0px;width:120%; font:10px;" required /><!--[(ngModel)]="dataItem.Description"-->
                                            </ng-template>
                                            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                                                {{dataItem.Description}}
                                            </ng-template>
                                        </kendo-grid-column>
                                               <kendo-grid-column field="Available" media="(min-width: 680px)" class="uk-text-center" [width]="150">
                                           <ng-template kendoGridHeaderTemplate class="uk-text-right">
                                                {{ 'OnHand' | translate }}
                                            </ng-template>
                                            <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                                                <input [(ngModel)]="dataItem.Available" class="k-textbox" id="txtAvailable" (focus)="selectAllContent($event)" (mouseup)="$event.stopPropagation()" style="padding-top:0px;padding-bottom:0px;width:120%;left:-12px;" required />
                                            </ng-template>
                                        </kendo-grid-column>
                                        <kendo-grid-column field="QtyPrevReceived" media="(min-width: 680px)" class="uk-text-center" [width]="150">
                                            <ng-template kendoGridHeaderTemplate class="uk-text-right">
                                                {{ 'Receipts' | translate }}
                                            </ng-template>
                                            <ng-template kendoGridEditTemplate let-dataItem="dataItem">
                                                <input [(ngModel)]="dataItem.QtyPrevReceived" class="k-textbox" id="txtQtyprevreceived" (focus)="selectAllContent($event)" (mouseup)="$event.stopPropagation()" style="padding-top:0px;padding-bottom:0px;text-align:center;width:120%;left:-12px;" required />
                                            </ng-template>
                                            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                                                {{dataItem.QtyPrevReceived}}
                                            </ng-template>
                                        </kendo-grid-column></kendo-grid>

任何人都可以帮我解决这个问题。

由于 Victor.A

0 个答案:

没有答案