角度剑道网格

Question

我使用 Kendo UI for Angular。在剑道网格中我遇到问题:\n

\n\n

当我在网格中添加新记录时，显示“valueField”而不是 textField。\n当新记录出现而不是单击时，如何更改它并设置可编辑模式？

\n\n

我的代码：

\n\n

                <kendo-grid [data]="gridData" [loading]="loading" [navigable]="true"\n                    (cellClick)="cellClickHandler($event)" (cellClose)="cellCloseHandler($event)" [height]="300"\n                    (save)="addAddressRecord($event)" (remove)="removeAddressRecord($event)">\n                    <kendo-grid-column field="isPrimary" editor="boolean" title="\xd8\xa7\xd8\xb5\xd9\x84\xdb\x8c" width="50px">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="title" title="\xd8\xb9\xd9\x86\xd9\x88\xd8\xa7\xd9\x86"></kendo-grid-column>\n                    <kendo-grid-column field="geographicalRegionId" title="\xd9\x85\xd9\x86\xd8\xb7\xd9\x82\xd9\x87 \xd8\xac\xd8\xba\xd8\xb1\xd8\xa7\xd9\x81\xdb\x8c\xd8\xa7\xdb\x8c\xdb\x8c">\n                        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"\n                            let-formGroup="formGroup">\n                            <kendo-combobox (filterChange)="filterGeographicalRegion($event)" [filterable]="true"\n                                [data]="geographicalRegionId" textField="title" valueField="id"\n                                [valuePrimitive]="true" [formControl]="formGroup.get(\'geographicalRegionId\')">\n                            </kendo-combobox>\n                        </ng-template>\n                    </kendo-grid-column>\n                    <kendo-grid-column field="addressString" title="\xd8\xa7\xd9\x93\xd8\xaf\xd8\xb1\xd8\xb3">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="postalCode" title="\xda\xa9\xd8\xaf \xd9\xbe\xd8\xb3\xd8\xaa\xdb\x8c">\n                        <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"\n                            let-formGroup="formGroup">\n\n                            <input kendoTextBox [formControl]="formGroup.get(\'postalCode\')"\n                                (input)="($event)" />\n                        </ng-template>\n                    </kendo-grid-column>\n                    <kendo-grid-column field="phone" title="\xd8\xaa\xd9\x84\xd9\x81\xd9\x86">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="fax" title="\xd9\x81\xd8\xa7\xda\xa9\xd8\xb3">\n                    </kendo-grid-column>\n                    <kendo-grid-column field="email" title="\xd8\xa7\xdb\x8c\xd9\x85\xdb\x8c\xd9\x84">\n                    </kendo-grid-column>\n                    <kendo-grid-column width="50px">\n                        <ng-template kendoGridCellTemplate let-isNew="isNew">\n                            <button kendoGridRemoveCommand [icon]="\'minus-outline\'"></button>\n                            <button kendoGridSaveCommand [icon]="\'plus-outline\'"></button>\n                        </ng-template>\n                    </kendo-grid-column>\n\n                </kendo-grid>\n

\n

Answer 1

请尝试这个

\n\n

创建一个下拉组件

\n\n

在 HTML 中

\n\n

<div [formGroup]=\'formGroup\'>\n<button #anchor (click)="toggle()" class="k-button btn-dropdown">{{ selectedKeys }}</button>\n<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" class="popup" *ngIf="show">\n    <kendo-treeview\n        #tree\n        class="dropdown-kendo-treeview"\n        [nodes]="treeData | async"\n        textField="name"\n        kendoTreeViewExpandable\n        kendoTreeViewSelectable\n        kendoTreeViewHierarchyBinding\n        [hasChildren]="hasChildren"\n        [children]="fetchChildren"\n        [selectBy]="\'name\'"\n        [(selectedKeys)]="selectedKeys"\n        (selectionChange)="handleSelection($event)"\n    >\n    </kendo-treeview>\n    <div #dropdownIconDiv class="dropdown-icon-div">\n        <button class="m-1 dropdown-icon" kendoButton title="\xd8\xaf\xd8\xb1\xdb\x8c\xd8\xa7\xd9\x81\xd8\xaa \xd8\xa7\xd8\xb7\xd9\x84\xd8\xa7\xd8\xb9 \xd8\xa7\xd8\xb2 \xd8\xaa\xd8\xba\xdb\x8c\xdb\x8c\xd8\xb1\xd8\xa7\xd8\xaa" (click)="refresh()">\n            <i class="fas fa-redo"></i>\n        </button>\n        <button class="m-1 dropdown-icon" title="\xd8\xa7\xd9\x81\xd8\xb2\xd9\x88\xd8\xaf\xd9\x86 \xd9\x85\xd9\x88\xd9\x82\xd8\xb9\xdb\x8c\xd8\xaa \xd8\xac\xd8\xaf\xdb\x8c\xd8\xaf" (click)="newGeo()" kendoButton>\n            <i class="fas fa-plus"></i>\n        </button>\n\n    </div>\n</kendo-popup>\n<input #input kendoTextBox hidden [formControl]="name"/>\n

\n\n

\n\n

在ts文件中

\n\n

@Input() name: FormControl;\n@Input() formGroup: FormGroup;\n@Input() selectedKeys = [\'\xd8\xa7\xd9\x86\xd8\xaa\xd8\xae\xd8\xa7\xd8\xa8 ...\'];\n\n@ViewChild(\'anchor\', {static: false}) anchor: ElementRef;\n@ViewChild(\'dropdownIconDiv\', {static: false, read: ElementRef}) dropdownIconDiv: ElementRef;\n@ViewChild(\'tree\', {static: false, read: ElementRef}) tree: ElementRef;\n@ViewChild(\'input\', {static: false}) input: ElementRef;\n\ntreeData: Observable<any[]>;\nshow = false;\n\n@HostListener(\'keydown\', [\'$event\'])\nkeydown(event: any): void {\n    if (event.keyCode === 27) {\n        this.toggle(false);\n    }\n}\n\n@HostListener(\'document:click\', [\'$event\'])\ndocumentClick(event: any): void {\n    if (!this.contains(event.target)) {\n        this.toggle(false);\n    }\n}\n\nconstructor(\n    private geolocationService: GeolocationService,\n    private notificationService: NotificationService,\n    private tabService: TabService\n) {\n}\n\nngOnInit() {\n    this.getParentGeo();\n    this.getEditData();\n}\n\ngetEditData(): void {\n    if (this.name.value) {\n        this.geolocationService.show(this.name.value).subscribe((response) => {\n                this.selectedKeys = [response.name];\n            },\n            (error) => this.errorHandler(error));\n    }\n}\n\ntoggle(show?: boolean): void {\n    this.show = show !== undefined ? show : !this.show;\n}\n\ncontains(target: any): boolean {\n    return this.anchor.nativeElement.contains(target) ||\n        (this.tree ? this.tree.nativeElement.contains(target) : false) ||\n        (this.dropdownIconDiv ? this.dropdownIconDiv.nativeElement.contains(target) : false);\n}\n\nhandleSelection(e): void {\n    this.name.setValue(e.dataItem.id);\n    this.show = false;\n}\n\nnewGeo() {\n    this.tabService.open(new Tab(\'\xd9\x85\xd8\xb9\xd8\xb1\xd9\x81\xdb\x8c \xd9\x85\xd9\x88\xd9\x82\xd8\xb9\xdb\x8c\xd8\xaa \xd8\xac\xd8\xba\xd8\xb1\xd8\xa7\xd9\x81\xdb\x8c\xd8\xa7\xdb\x8c\xdb\x8c\', GeolocationComponent));\n}\n\nrefresh() {\n    this.getParentGeo();\n}\n\nhasChildren() {\n    return true;\n}\n\ngetParentGeo() {\n    this.treeData = this.geolocationService.SubLocations(0);\n}\n\nfetchChildren = (item: any) => {\n    return this.geolocationService.SubLocations(item.id);\n};\n\nshowAlert(text: string, type: any): void {\n    this.notificationService.show({\n        content: text,\n        animation: {type: \'fade\', duration: 400},\n        position: {horizontal: \'center\', vertical: \'top\'},\n        type: {style: type, icon: true},\n        closable: false,\n        hideAfter: 3000\n    });\n}\n\n// {ErrorCode,Message}\nerrorHandler(error: any) {\n    this.showAlert(error.error.Message, \'error\');\n}\n

\n\n

在.scss文件中

\n\n

.btn-dropdown {\n  width: 190px;\n  justify-content: left;\n  appearance: none;\n  background-image: linear-gradient(45deg, transparent 50%, #000 50%),\n  linear-gradient(135deg, #000 50%, transparent 50%) !important;\n  background-position: calc(10% - 0.78rem) 0.5rem, calc(10% - 0.5rem) 0.5rem;\n  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;\n  background-repeat: no-repeat;\n}\n\n.popup {\n  width: 190px;\n}\n\n.dropdown-kendo-treeview {\n  width: 190px !important;\n  height: 200px !important;\n}\n\n.dropdown-icon-div {\n  border-top: 1px solid #00000029;\n  height: 50px;\n  width: 100%;\n  text-align: left;\n}\n\n.dropdown-icon {\n  width: 30px;\n  height: 30px;\n  font-size: 16px;\n  margin: 10px 5px !important;\n}\n

\n\n

以及网格剑道中的用法

\n\n

   <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"\n                         let-formGroup="formGroup">\n                <zino-geolocation-tree-dropdown [formGroup]="formGroup" [selectedKeys]="selectedKeys"\n                                                [name]="formGroup.get(\'geographicalRegionId\')"></zino-geolocation-tree-dropdown>\n            </ng-template>\n

\n