Date field inside Kendo Grid is null on controller

Question

The following code works fine on development, but when we deploy to production the field fecha(initally datetime) gets null.

We even tried changing to string instead of datetime and it still doesnt work on our customer servers

Our partial view is like this: fecha.chstml

@using xx.Relacionamiento.Modelo.Bussiness.Entities
@model EventoEducacionFecha
@using Kendo.Mvc.UI

<script type="text/javascript">
    $(function () {
        kendo.culture("es-CO");
    })

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function getFecha() {
        debugger
        var fecha = $("#FechaEvent").val();
        return {
            FechaEvent: fecha
        };
    }
</script>
@(Html.Kendo().Grid<EventoEducacionFecha>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.EventoEducacionFechaId).Hidden();
        columns.Bound(p => p.FechaEvent).Title("Fecha Evento").ClientTemplate("#= kendo.toString(kendo.parseDate(FechaEvent, 'yyyy-MM-dd'), 'MM/dd/yyyy') #");
        columns.Bound(p => p.HoraInicio);
        columns.Bound(p => p.HoraFin);
        columns.Command(command =>
        {
            command.Edit().Text("Editar"); 
            //command.Destroy(); 
            command.Custom("Borrar").Click("openWindowConfirmDelete").HtmlAttributes(new { data_NomCol = "FechaEvent" });
        }).Width(250).Title("Acciones");
    })
    .ToolBar(toolbar => toolbar.Create().Text("Agregar Fecha"))
    .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
    .Pageable()
    .Sortable()
    .Scrollable()
    //.HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => 
        { 
            model.Id(p => p.EventoEducacionFechaId); 
            model.Field(a => a.EventoEducacionFechaId).Editable(false);
            model.Field(a => a.FechaEvent).Editable(true);
            model.Field(a => a.HoraInicio).Editable(true);
            model.Field(a => a.HoraFin).Editable(true); 
        })
        .Create(update => update.Action("Fechas_Create", "EventosEducacion").Data("getFecha"))
        .Read(read => read.Action("GetFechas", "EventosEducacion").Data("getDatoEventoId"))
        .Update(update => update.Action("Fecha_Update", "EventosEducacion"))
        .Destroy(update => update.Action("Fecha_Destroy", "EventosEducacion"))
    )
)

This is PART of the view that uses the partial view

<div class="row oculto" id="VerFecha">
                <div class="col-md-12">
                    <div class="form-group">
                        <div id="mostrarFecha_div"></div>
                        @*@Html.Partial("~/Views/EventosEducacion/Fechas.cshtml",null,null)*@
                    </div>
                </div>

And this is the controller action

//[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Fechas_Create([DataSourceRequest] DataSourceRequest request, EventoEducacionFecha EducaFecha, string FechaEvent)
        {
            if (EducaFecha.FechaEvent != null && EducaFecha.HoraInicio != null && EducaFecha.HoraFin != null)
            {
                LstEventoEducacionFecha.Add(new EventoEducacionFecha { 
                EventoEducacionFechaId = Guid.NewGuid(),
                EventoId = Guid.Empty,
                HoraFin = EducaFecha.HoraFin,
                FechaEvent = DateTime.Parse(FechaEvent),
                HoraInicio = EducaFecha.HoraInicio,
                });
                EducaFecha.EventoEducacionFechaId = LstEventoEducacionFecha.OrderBy(o => o.EventoEducacionFechaId).Select(s => s.EventoEducacionFechaId).FirstOrDefault();
                return Json(new[] { EducaFecha }.ToDataSourceResult(request));
            }
            return Json(new[] { EducaFecha }.ToDataSourceResult(request));
        }

Answer 1

In the past, I have had issues with Kendo's library and anything related to DateTime. You usually have to convert the DateTime that you are sending your controller from JavaScript's UTC time format to something that c# understands. Otherwise, send it as a string and see if it's still null or empty. I have a feeling it will send something over as a string and you can convert it on the server side.

In the past for a Kendo DateTime Picker, I have had to do the following client side in js:

 var meetDatePicker = $("#MeetingDate").data("kendoDatePicker");
 var mDate = new Date(meetDatePicker.value());
 var meetDate = mDate.toUTCString();

Then pass the meetDate to my controller as a string, and on the server-side in c#:

DateTime meetDateConv = DateTime.Parse(meetingDate);

Answer 2

Your grid is bound to a EventoEducacionFecha model, which contains a FechaEvent field. Your controller action is receiving the EventoEducacionFecha model AND a string called FechaEvent.

When the grid row is posted, the FechaEvent column value gets bound to the EventoEducacionFecha.FechaEvent field and is not bound to the separate FechaEvent string parameter as it has already been bound.

The model binder stops binding a posted value after the first match it finds and does not bind to all matching fields/parameters.

If you rename the FechaEvent field in getFecha() and rename the string parameter in your controller action to match, your should start getting a value.

I suppose the order of binding may be changed slightly between debug and release but I've not seen that personally...whenever I "duplicated" field/parameter names in my controller action, it has not worked in both configurations.

Answer 3

I have had similar problems, everything works fine on my side but on the client side things break. My solution is to check the Regional settings of the computer and check if the date format used is correct.