Posted 2 May 2022, 4:58 am EST
I am using Wijmo Library 5 flex grid. The grid has column with custom template to edit date like below (I am using inline editing).
<wj-flex-grid-column [header]="'DATE'" [binding]="'date'" [align]="'left'" [isReadOnly]="true" [width]="'1.2*'" [isRequired]="true">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
<input
class="form-control bento-datepicker date-picker-curencydate"
ngbDatepicker
#datePickerInput="ngbDatepicker"
id="datepicker-dropdown-input"
name="dp"
[ngModel]="cell.item.date | customDate"
(ngModelChange)="cell.item.date = ngbDateToJsDate($event)"
[autoClose]="true"
[container]="'body'"
placement="bottom-right"
[maxDate]="{year: currentDate.getFullYear(), month: currentDate.getMonth() + 1, day: currentDate.getDate() }"
[readonly]="true"
/>
<button
class="btn btn-outline-primary btn-icon ml-2"
[bentoDatepickerToggle]="datePickerInput"
type="button"
[disabled]="!isRowInEditMode">
<i class="bento-icon-calendar" aria-hidden="true"></i>
</button>
</ng-template>
</wj-flex-grid-column>
Issue is as soon as I click on the calendar icon, rowEditEnded event is getting called, and not giving me a chance to edit other fields. Ideally I would have liked it to wait for me to click outside the edited row to fire the rowEditEnded event.
Can someone please help me identifying what I might be missing? Thanks in advance.
P.S. If I don’t include above column, it is working as expected, waiting for me to click outside the row to fire the rowEditEnded event.
