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

Transport.Read.Data conflicts with parameterMap

1 Answer 63 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Shane
Top achievements
Rank 1
Shane asked on 04 Oct 2016, 01:41 PM

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?

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 06 Oct 2016, 11:37 AM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Data Source
Asked by
Shane
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or