Kendo Grid DatePicker Issue

2 posts, 0 answers
  1. Jesse
    Jesse avatar
    3 posts
    Member since:
    May 2017

    Posted 03 Jul Link to this post

    Hi, I have a strange issue where the DatePicker in my MVC grid is posting a null value to the controller on Save of an Edit only.

    When creating a new record, I set the date in the picker and it comes through just fine.

    When editing an existing record, if I change other Columns and save, the date from the DatePicker is null.  All other columns are not null and come through just fine.  Also when editing, the datepicker shows the correct date

    When editing an existing record, if I change the date in the DatePicker, the date comes through just fine. 

    @(Html.Kendo().Grid<PDFBinderWebApp.Models.IndexPageViewModel>()
            .Name("grid")
            .HtmlAttributes(new { style = "height: 550px;" })
            .Columns(columns =>
            {
                columns.Bound(c => c.vPdfContent.PdfName).Title("<div align=center>Name</div>").HtmlAttributes(new { style = "text-align: center;" }).Width(200);
                columns.Bound(c => c.PdfFileUrl).EditorTemplateName("PdfFileUrl").Title("<div align=center>Document</div>").ClientTemplate("#: Filename #").Width(200);
                columns.Bound(c => c.DocumentTypeName).EditorTemplateName("DocumentTypeList").Title("<div align=center>Document Type</div>").ClientTemplate("#:DocumentTypeName#").HtmlAttributes(new { style = "text-align: center;" }).Width(200);
                columns.Bound(c => c.DocumentArchiveName).EditorTemplateName("ArchiveRuleList").Title("<div align=center>Document Rule</div>").ClientTemplate("#:DocumentArchiveName#").HtmlAttributes(new { style = "text-align: center;" }).Width(200);
                columns.Bound(c => c.vPdfContent.ExpirationDate).EditorTemplateName("DatePickerTemplate").ClientTemplate("#= formatExpiration(vPdfContent.ExpirationDate ? kendo.toString(kendo.parseDate(vPdfContent.ExpirationDate), 'MM/dd/yyyy') : 'n/a') #").Title("<div align=center>Expiration</div>").HtmlAttributes(new { style = "text-align: center;" }).Width(140);
                columns.Bound(c => c.ADGroupsList).EditorTemplateName("ADGroupMultiSelectList").ClientTemplate("#= adGroupsTemplate(ADGroupsList) #").Title("<div align=center>AD Groups</div>").Width(200);
                columns.Bound(c => c.MeetingYear).EditorTemplateName("MeetingYearList").Title("<div align=center>Meeting Year</div>").ClientTemplate("#:MeetingYear#").HtmlAttributes(new { style = "text-align: center;" }).Width(100);
                columns.Bound(c => c.ChainOfCustody).ClientTemplate("#= replaceString(ChainOfCustody) #").HtmlAttributes(new { style = "font-size:10pt;" }).Title("<div align=center>Chain Of Custody</div>").Width(250);
                columns.Command(command => { command.Edit().UpdateText("Save"); command.Destroy(); }).Title("<div align=center>Action</div>").HtmlAttributes(new { style = "text-align: center;" });
            })
            .Resizable(resize => resize.Columns(true))
            .ToolBar(toolbar => { toolbar.Create().Text("Add Document"); })
            .Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("PdfEditor"))
            //.Scrollable()
            .Sortable(sortable => sortable.AllowUnsort(false))
            .Events(e=>e.Edit("onEdit").Cancel("onCancel").Save("onSaved"))
            //.Selectable()
            .Pageable()
            .DataSource(d => d
                .Ajax()
                .PageSize(20)
                .Batch(false)
                .AutoSync(false)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.vPdfContent.PdfId);
                    model.Field(p => p.vPdfContent).DefaultValue(new PDFBinderWebApp.Models.v_PdfContent());
                    model.Field(p => p.vPdfContent.PdfId).Editable(false);
                    model.Field(p => p.vPdfContent.CreatedBy).Editable(false);
                    model.Field(p => p.vPdfContent.ExpirationDate).Editable(true);
                    model.Field(p => p.ADGroupsList).DefaultValue(new List<SelectListItem>());
                })
                .Read(read => read.Action("EditingInline_Read", "PdfContents"))
                .Create(update => update.Action("EditingInline_Create", "PdfContents"))
                .Update(update => update.Action("EditingInline_Update", "PdfContents"))
                .Destroy(update => update.Action("EditingInline_Destroy", "PdfContents"))
        )
        )

     

    DatePickerTemplate is as follows:

    @model DateTime?
     
    @(Html.Kendo().DatePickerFor(m=>m)
        .Name("vPdfContent.ExpirationDate")
      .Format("yyyy-MM-dd")
    )

     

    Again, the DatePicker is working for all scenarios, Create and Edit (when actually selecting a date) and displaying the date.

    The problem is when editing, the datepicker displays the proper date, but when you click Save, vPdfContent.ExpirationDate is null and validation fails Stating:

    "The value /'Date(1504152000000)' is not valid for ExpirationDate"  (See attached screen shot).

    Also when I use the Chrome developer tools and debug through the onSave javascript, when I inspect the model in e, it always shows a date, which is weird because when it hits the controller the date is null.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 05 Jul Link to this post

    Hi Jesse,

    I tested using a custom editor like yours but could not reproduce the issue. You can find my test project attached to this message. Can you try running it and see if it works on your side,too?

    The problem that you observe may mean that the cultures used on the client and server do not match and this results in inability to correctly parse the date. Check out this section on the topic and see if ensuring matching cultures fixes the problem on your side.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 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