Chris
Top achievements
Rank 1
Rank 1
I am using Kendo Grid in Angular. I have [navigable]="true". When I go into edit mode, I have a custom template similar to this:
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
<div *ngIf="formGroup" [formGroup]="formGroup" class="edit-wrapper">
<custom-select [data]="col.data"></custom-select>
</div>
</ng-template>
Similarly, another column is a custom component that wraps the material date picker. This component has the same issue any time the user tries to select a different month, etc.
Here is a StackBlitz demonstrating the problem using Material Datepicker. To replicate, click the date to edit, then click the icon to open the calendar, and then click next or previous month button and see how it closes the dialog.
https://stackblitz.com/edit/angular-material-datepicker-lkmb8d?file=src%2Fapp%2Fapp.component.ts
Hi Chris,
Thank you very much for the runnable example provided.
If I understood the issue at hand correctly, you are currently utilizing the Kendo UI for Angular Grid together with the built-in editing feature and are experiencing issues when using a custom control (Material DatePicker) such that the edit mode of the cell is closed once navigating inside the component. Please, let me know if I misinterpreted the query.
Having thoroughly examined the provided code, I indeed noticed the discrepancy that you are experiencing when rendering the Material DatePicker inside the EditTemplateDirective. To further investigate the matter, I tested both the the Kendo UI for Angular DatePicker and the generic HTML input element of type date and noticed that such a behavior is valid for the Material DatePicker since the other two elements perform according to the expectations:
https://stackblitz.com/edit/angular-material-datepicker-xcppf7
Upon inspecting the Kendo UI for Angular DatePicker and the Material DatePicker, I noticed that the main difference between the two components is the element that remains focused after closing them - for the Kendo UI for Angular DatePicker, this is the input element while for the Material DatePicker, this is the calendar icon. Therefore, I would assume that this is also the reason behind the discrepancy with the editing feature.
In case the requirement for the implementation is to continue utilizing the Material DatePicker, what I would suggest would be for the developer to prevent the cellClose event and programmatically determine when to close the specific row:
public onCellClose(ev) { //Prevent the cell close event when necessary: ev.preventDefault(); }onDatepickerClosed() { // Closing the edit mode when the DatePicker is closed: this.grid.closeRow(0); }To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:
https://stackblitz.com/edit/angular-material-datepicker-cgjpmz
I hope the provided information answers your question. Please, let me know if I can further assist you with this case.
Regards,
Georgi
Progress Telerik