我已经为Ag Grid实现了CellEditor。当组件失去焦点时,我想停止在网格上进行编辑。
当我单击span button
时,应打开一个日历以选择日期。问题是单击跨度按钮时不应出现焦点。 span button
是组件的一部分。
我尝试使用stopEditingWhenGridLosesFocus
,但是我的编辑器不是popup
,所以当我单击按钮时,焦点也丢失了。
我的代码:
模板
<div class="input-group date" (focusout)="onFocusOut($event)">
<input #container triggers="" type="text" #dp="bsDatepicker" class="form-control" (bsValueChange)="onValueChange($event)" bsDatepicker
[bsConfig]="{ dateInputFormat: 'DD.MM.YYYY', containerClass: 'theme-dark-blue' }"
[(ngModel)]="dateValue"
[minDate]="minDate"
[maxDate]="maxDate">
<span class="input-group-addon" (click)="dp.toggle();" [attr.aria-
expanded]="dp.isOpen"><i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
component.ts
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';
import { defineLocale } from 'ngx-bootstrap/chronos';
import { deLocale } from 'ngx-bootstrap/locale';
import { BsLocaleService, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
defineLocale('de', deLocale);
@Component({
selector: 'bo-ui-grid-date-picker',
templateUrl: './grid-date-picker.component.html',
styleUrls: ['./grid-date-picker.component.css']
})
export class GridDatePickerComponent implements ICellEditorAngularComp, AfterViewInit {
private params: any;
public dateValue: Date;
minDate: Date;
maxDate: Date;
datePickerConfig: Partial<BsDatepickerConfig>;
@ViewChild('container', {read: ViewContainerRef }) public container;
constructor(private localeService: BsLocaleService) {}
ngAfterViewInit() {
setTimeout(() => {
this.container.element.nativeElement.focus();
})
}
agInit(params: any): void {
this.params = params;
this.datePickerConfig = params.datePickerConfig;
this.minDate = this.datePickerConfig.minDate;
this.maxDate = this.datePickerConfig.maxDate;
this.setValue(params.value);
this.localeService.use('de')
}
getValue(): any {
return this.dateValue;
}
setValue(date): void {
this.dateValue = date;
}
onValueChange(value: Date): void {
this.setValue(value);
}
onFocusOut(event: any){
this.params.api.stopEditing();
}
}