kendo-datepicker in kendoGridEditTemplate

3 posts, 0 answers
  1. bryian
    bryian avatar
    11 posts
    Member since:
    Feb 2018

    Posted 27 Feb 2018 Link to this post

    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>

  2. bryian
    bryian avatar
    11 posts
    Member since:
    Feb 2018

    Posted 27 Feb 2018 Link to this post

    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.


  3. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1195 posts

    Posted 28 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top