Transport.Read.Data conflicts with parameterMap

[Shane]

I have a page that contains a dropdown that will drive the contents of my kendo grid.  When a button is clicked, I want to manually call my read function of my grid to get data from my MVC controller.  See below:

$("#engineButton").click(function () {
        $("#logGrid").data("kendoGrid").dataSource.options.transport.read.data.engineId = $("#stationaryEngine").val();
        $("#logGrid").data("kendoGrid").dataSource.read();
        $("#logGrid").show();
    });

My grid is set up as follows:

$("#logGrid").kendoGrid({
     dataSource: {
         transport: {
             read: {
                 url: "@Url.Action("StationaryEngineLogGrid_Read", "Engine")",
                 type: "get",
                 dataType: "json",
                 data: { engineId: 0 }
             },
             create: {
                 url: "@Url.Action("StationaryEngineLogPopup_Create", "Engine")",
                 type: "post",
                 dataType: "json"
             },
             update: {
                 url: "@Url.Action("StationaryEngineLogPopup_Update", "Engine")",
                 type: "post",
                 dataType: "json"
             },
             destroy: {
                 url: "@Url.Action("StationaryEngineLogPopup_Destroy", "Engine")",
                 type: "post",
                 dataType: "json"
             }
         },
         schema: {
             model: {
                 id: "Id",
                 fields: {
                     Id: {
                         type: "number",
                         editable: false
                     },
                     EngineId: {
                         type: "number",
                         editable: false
                     },
                     LogDate: {
                         type: "date",
                         parse: function (data) {
                             var d = new Date(data);
                             data = kendo.toString(new Date(d), "MM/dd/yyyy");
                         }
                     },
                     EngineHoursStart: {
                         type: "number",
                         validation: {
                             required: true
                         }
                     },
                     EngineHoursEnd: {
                         type: "number",
                         validation: {
                             required: true,
                             customValidation: function (input, params) {
                                 if (input.is("[name=engineHoursEnd]")) {
                                     var endHours = $(input).val();
                                     var startHours = input.closest(".k-edit-form-container").find("input[name=engineHoursStart]").val();
                                     if (endHours <= 0) {
                                         $(input).attr("data-customValidation-msg", "End Hours must be > 0.");
                                         return false;
                                     } else if (endHours <= startHours) {
                                         $(input).attr("data-customValidation-msg", "End Hours must be > Start Hours.");
                                         return false;
                                     }
                                 } else if (input.is("[name=engineHoursStart]")) {
                                     var startHours = $(input).val();
                                     var endHours = input.closest(".k-edit-form-container").find("input[name=engineHoursEnd]").val();
                                     if (startHours <= 0) {
                                         $(input).attr("data-customValidation-msg", "Start Hours must be > 0.");
                                         return false;
                                     } else if (startHours > endHours) {
                                         $(input).attr("data-customValidation-msg", "Start Hours must be < End Hours.");
                                         return false;
                                     }
                                 } else if (input.is("[name=logDate]")) {
                                     var date = $(input).data("kendoDatePicker").value();
                                     if (date > new Date()) {
                                         $(input).attr("data-customValidation-msg", "Date must be today or less.");
                                         return false;
                                     }
                                 }
                                 return true;
                             }
                         }
                     },
                     Hours: {
                         type: "number",
                         editable: false
                     },
                     RunningTotalHours: {
                         type: "number",
                         editable: false
                     },
                     EmergencyUse: {
                         type: "boolean"
                     },
                     MaintenanceUse: {
                         type: "boolean"
                     },
                     MonitorLight: {
                         type: "string"
                     },
                     Comments: {
                         type: "string"
                     }
                 }
             }
         },
         error: function (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);
             }
         }
     },
     editable: {
         mode: "popup",
         template: $("#popup_editor").html()
     },
     edit: function (e) {
         var editWindow = this.editable.element.data("kendoWindow");
         editWindow.wrapper.css({ width: 600 });
         if (e.model.isNew()) {
             editWindow.title("Add new logging record");
             $("#EngineId").val($("#stationaryEngine").val());
             e.model.LogDate = "@DateTime.Now.Date.ToShortDateString()";
             e.model.EngineId = $("#stationaryEngine").val();
         } else {
             editWindow.title("Edit logging record");
         }
         $("#logDate").kendoDatePicker({
             format: "MM/dd/yyyy",
             parseFormats: ["MM-dd-yyyy", "MM/dd/yyyy"]
         });
         editWindow.center();
     },
     toolbar: [{ name: "create", text: "Add new logging record" }],
     columns: [
         { field: "Id", hidden: true },
         { field: "EngineId", hidden: true },
         { field: "LogDate", title: "Date", format: "{0: MM/dd/yyyy}" },
         { field: "EngineHoursStart", title: "Engine Hours Start" },
         { field: "EngineHoursEnd", title: "Engine Hours End" },
         { field: "EmergencyUse", title: "Emergency Use", template: "<input type='checkbox' #= EmergencyUse ? checked='checked':'' # />" },
         { field: "MaintenanceUse", title: "Maintenance Use", template: "<input type='checkbox' #= MaintenanceUse ? checked='checked':'' # />" },
         { field: "MonitorLight", title: "Monitor Light" },
         { field: "Comments", title: "Comments" },
         {
             command: [{
                 name: "edit",
                 text: {
                     update: "Save"
                 }
             },
             {
                 name: "destroy"
             }],
             title: "Actions"
         }
     ]
 });

Now, all of this works for my read function.  I hit my breakpoint in my controller.  Great.  However, when I do a Create, I have a date field inside my popup template that will not come across to my controller.  It's defined as follows:

<script id="popup_editor" type="text/x-kendo-template">
...
    <input type="text" name="logDate" data-type="date" data-bind="value:LogDate" data-role="datepicker" required />
...
</script>

Every time I submit the popup form, the date never comes across to my controller.  I read in other posts that you have to use a ParameterMap in your datasource, but if doing so, it messes up the read functionality.

Is there a way to accomplish both the read functionality and the create with my date being parsed correctly and passed to my controller?

[Stefan]

Hello Shane,

The issue was not reproducible in my testing scenario.

I made a Dojo example similar to the provided code trying to replicate the key steps, but it is working as expected:

http://dojo.telerik.com/UcuqO

My concern about the provided example is that the DatePicker is initialized every time on edit event from the element with the same ID which can lead to unexpected issues: 

http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

If additional assistance is needed, please send a fully runnable example so I can give a suggestion best suited for it.

Regards,
Stefan
Telerik by Progress