This is a migrated thread and some comments may be shown as answers.

Kendo Grid DatePicker Issue

1 Answer 1099 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Jesse asked on 03 Jul 2017, 03:10 PM

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.

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 05 Jul 2017, 01:27 PM
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.
Tags
Grid
Asked by
Jesse
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or