Transport.Read.Data conflicts with parameterMap

2 posts, 0 answers
  1. Shane
    Shane avatar
    8 posts
    Member since:
    Nov 2015

    Posted 04 Oct Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    268 posts

    Posted 06 Oct Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top