kendo-datepicker in kendoGridEditTemplate

[bryian]

This simple example throw the error "The 'value' should be a valid JavaScript Date instance." Please help.

I also tried with [value], [(ngModel)] -- yield Uncaught Error: Template parse errors:

            <ng-template kendoGridEditTemplate let-dataItem="dataItem">
               
                <kendo-datepicker  [format]="'yyyy-MM-dd'" name="abcd"
                                  value="2018-01-01"></kendo-datepicker>
            </ng-template>

[bryian]

this is the error if i use [(ngModel)] --

If ngModel is used within a form tag, either the name attribute must be set or the form

      control must be defined as 'standalone' in ngModelOptions.

[Dimiter Topalov]

Hi Bryian,

The error described in the first post is self-explanatory and indicates that the Kendo UI DatePicker can be bound to a valid JavaScript dates only (as opposed to strings):

https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/integration-with-json/

The second issue is Angular Tempalte-driven forms specific one - when a form control is bound via ngModel, there should be a "name" property that points to the form field the input should be bound to:

https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/forms/

Having this in mind, we can map the data the Grid will be bound to such that it contains actual JavaScript dates, and bind the DatePicker in the Grid editor template to the respective data item field via ngModel. Then we can add a name that points to name of this field:

https://plnkr.co/edit/c9ETvoJSbg47Ige77Bi7?p=preview

You can inspect the various Grid editing examples that demonstrate binding the template inputs/components to the respective form in both Template and Reactive forms:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-template-forms/

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik