我将Kendo UI用于Angular。在剑道网格中,我有一个问题:
当我在网格中添加新记录时,显示'valueField'而不是textField。当没有出现新记录时,如何更改它并设置可编辑模式?
myCode:
<kendo-grid [data]="gridData" [loading]="loading" [navigable]="true"
(cellClick)="cellClickHandler($event)" (cellClose)="cellCloseHandler($event)" [height]="300"
(save)="addAddressRecord($event)" (remove)="removeAddressRecord($event)">
<kendo-grid-column field="isPrimary" editor="boolean" title="اصلی" width="50px">
</kendo-grid-column>
<kendo-grid-column field="title" title="عنوان"></kendo-grid-column>
<kendo-grid-column field="geographicalRegionId" title="منطقه جغرافیایی">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<kendo-combobox (filterChange)="filterGeographicalRegion($event)" [filterable]="true"
[data]="geographicalRegionId" textField="title" valueField="id"
[valuePrimitive]="true" [formControl]="formGroup.get('geographicalRegionId')">
</kendo-combobox>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="addressString" title="آدرس">
</kendo-grid-column>
<kendo-grid-column field="postalCode" title="کد پستی">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<input kendoTextBox [formControl]="formGroup.get('postalCode')"
(input)="($event)" />
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="phone" title="تلفن">
</kendo-grid-column>
<kendo-grid-column field="fax" title="فاکس">
</kendo-grid-column>
<kendo-grid-column field="email" title="ایمیل">
</kendo-grid-column>
<kendo-grid-column width="50px">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridRemoveCommand [icon]="'minus-outline'"></button>
<button kendoGridSaveCommand [icon]="'plus-outline'"></button>
</ng-template>
</kendo-grid-column>
</kendo-grid>
请尝试一下
创建要下拉的组件
HTML中
<div [formGroup]='formGroup'>
<button #anchor (click)="toggle()" class="k-button btn-dropdown">{{ selectedKeys }}</button>
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" class="popup" *ngIf="show">
<kendo-treeview
#tree
class="dropdown-kendo-treeview"
[nodes]="treeData | async"
textField="name"
kendoTreeViewExpandable
kendoTreeViewSelectable
kendoTreeViewHierarchyBinding
[hasChildren]="hasChildren"
[children]="fetchChildren"
[selectBy]="'name'"
[(selectedKeys)]="selectedKeys"
(selectionChange)="handleSelection($event)"
>
</kendo-treeview>
<div #dropdownIconDiv class="dropdown-icon-div">
<button class="m-1 dropdown-icon" kendoButton title="دریافت اطلاع از تغییرات" (click)="refresh()">
<i class="fas fa-redo"></i>
</button>
<button class="m-1 dropdown-icon" title="افزودن موقعیت جدید" (click)="newGeo()" kendoButton>
<i class="fas fa-plus"></i>
</button>
</div>
</kendo-popup>
<input #input kendoTextBox hidden [formControl]="name"/>
在ts文件中
@Input() name: FormControl;
@Input() formGroup: FormGroup;
@Input() selectedKeys = ['انتخاب ...'];
@ViewChild('anchor', {static: false}) anchor: ElementRef;
@ViewChild('dropdownIconDiv', {static: false, read: ElementRef}) dropdownIconDiv: ElementRef;
@ViewChild('tree', {static: false, read: ElementRef}) tree: ElementRef;
@ViewChild('input', {static: false}) input: ElementRef;
treeData: Observable<any[]>;
show = false;
@HostListener('keydown', ['$event'])
keydown(event: any): void {
if (event.keyCode === 27) {
this.toggle(false);
}
}
@HostListener('document:click', ['$event'])
documentClick(event: any): void {
if (!this.contains(event.target)) {
this.toggle(false);
}
}
constructor(
private geolocationService: GeolocationService,
private notificationService: NotificationService,
private tabService: TabService
) {
}
ngOnInit() {
this.getParentGeo();
this.getEditData();
}
getEditData(): void {
if (this.name.value) {
this.geolocationService.show(this.name.value).subscribe((response) => {
this.selectedKeys = [response.name];
},
(error) => this.errorHandler(error));
}
}
toggle(show?: boolean): void {
this.show = show !== undefined ? show : !this.show;
}
contains(target: any): boolean {
return this.anchor.nativeElement.contains(target) ||
(this.tree ? this.tree.nativeElement.contains(target) : false) ||
(this.dropdownIconDiv ? this.dropdownIconDiv.nativeElement.contains(target) : false);
}
handleSelection(e): void {
this.name.setValue(e.dataItem.id);
this.show = false;
}
newGeo() {
this.tabService.open(new Tab('معرفی موقعیت جغرافیایی', GeolocationComponent));
}
refresh() {
this.getParentGeo();
}
hasChildren() {
return true;
}
getParentGeo() {
this.treeData = this.geolocationService.SubLocations(0);
}
fetchChildren = (item: any) => {
return this.geolocationService.SubLocations(item.id);
};
showAlert(text: string, type: any): void {
this.notificationService.show({
content: text,
animation: {type: 'fade', duration: 400},
position: {horizontal: 'center', vertical: 'top'},
type: {style: type, icon: true},
closable: false,
hideAfter: 3000
});
}
// {ErrorCode,Message}
errorHandler(error: any) {
this.showAlert(error.error.Message, 'error');
}
在scss文件中]
.btn-dropdown { width: 190px; justify-content: left; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%) !important; background-position: calc(10% - 0.78rem) 0.5rem, calc(10% - 0.5rem) 0.5rem; background-size: 0.3rem 0.3rem, 0.3rem 0.3rem; background-repeat: no-repeat; } .popup { width: 190px; } .dropdown-kendo-treeview { width: 190px !important; height: 200px !important; } .dropdown-icon-div { border-top: 1px solid #00000029; height: 50px; width: 100%; text-align: left; } .dropdown-icon { width: 30px; height: 30px; font-size: 16px; margin: 10px 5px !important; }
和网格剑道中的用法
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column"
let-formGroup="formGroup">
<zino-geolocation-tree-dropdown [formGroup]="formGroup" [selectedKeys]="selectedKeys"
[name]="formGroup.get('geographicalRegionId')"></zino-geolocation-tree-dropdown>
</ng-template>