rohitreddyk
rohitreddyk

Reputation: 337

Kendo Date Picker failing in MS Edge Browser

I have created this partial view as a pop-up to enable the user to edit the date and save. Kendo date picker fails on Edge browser. All the date fields turn blank when opened in this particular browser(when date picker already has a date assigned to it).Works fine in all the other browsers like Chrome, Mozilla and IE. Kendo UI version is v2013.3.1119.

Can you please suggest any fix?

    <script type="text/javascript">


// This method opens the popup window.
        function EditMiscDates() {
            $('#edit-dca-misc-dates-div').kendoWindow({
                width: "1100px",
                title: "Milestone Dates",
                actions: ["Close"],
                draggable: false,
                modal: true,
                resizable: false,
                activate: function () {
                    // set focus to the first control
                    $("#mcd-code-check-scheduled").focus();
                }
            });

            // Center the window and open it
            $('#edit-dca-misc-dates-div').data("kendoWindow").center();
            $('#edit-dca-misc-dates-div').data("kendoWindow").open();
        }

        function OnMiscDatesSuccess(data) {
            //console.log('OnMiscDatesSuccess called.');

            // If the service returned with an error message, show the message to the user
            if (!data.IsValid) {
                console.log("Error (" + data.Messages + ")");

                // Allow the user to retry
                EnableMiscDatesClose(true); // let them close the window
                $("#error-text-misc-dates").html("An error occurred: " + data.Messages);
                $("#error-text-misc-dates").show();
                return;
            }

            // The method successfully executed so we can close the popup window and reload the main page.
            CloseMiscDatesPopup();

            // Redirect back to the Index page to reload the data
            window.location = '@Url.Action("Index", "Dca", new { id = Model.OrderId })';
        }

        // This method allows us to enable or disable the close button on the main window
        function EnableMiscDatesClose(enable) {
            $('#edit-dca-misc-dates-div').parent().find(".k-window-action").css("visibility", (enable ? "" : "hidden"));
        }

        // Handle the user clicking the cancel button
        function CloseMiscDatesPopup() {
            EnableMiscDatesClose(true);
            $("#error-text-misc-dates").hide(); // Hide error message (if exists)
            $('#edit-dca-misc-dates-div').data('kendoWindow').close();
        }


        function GetMiscDatesJson() {
            // Note: Something prepends "step_" to the front of every id (with the odd exception of the Kendo controls).  So I have to
            // manually make the ajax call to submit the form (or it can't match the field names with the model parameters)
            var orderId = $("#step_mcd-order-id").val();
            var mcdCodeCheckScheduled = $("#mcd-code-check-scheduled").data("kendoDatePicker").value();
            mcdCodeCheckScheduled = kendo.toString(mcdCodeCheckScheduled, "MM/dd/yyyy");


            var o = {
                OrderId: orderId,
                CodeCheckScheduled: mcdCodeCheckScheduled

            };

            return o;
        }

        // This method validates the data entered by the user.
        // If it is invalid, it shows a detailed error message; otherwise it submits the form via ajax
        function ValidateAndSubmitMiscDates() {
            var d = GetMiscDatesJson();

            var s = JSON.stringify(d);

            console.log(s);

            // Submit the form via ajax
            $.ajax({
                type: 'POST',
                url: '@Url.Action("SaveConversionMiscDates", "Dca")',
                dataType: 'json',
                data: s,
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    console.log('success!');
                    OnMiscDatesSuccess(data);
                },
                error: function (xhr, status, error) {
                    console.log('error!');
                    EnableMiscDatesClose(true); // let them close the window
                    $("#error-text-misc-dates").html("An error occurred: " + error);
                    $("#error-text-misc-dates").show();
                }
            });
        }

    </script>
        <div id='edit-dca-misc-dates-div' style='display:none'>
<div class="k-block k-error-colored" id="error-text-misc-dates" style="display: none"></div>
        <div class="mcd-label">Scheduled</div>
        @Html.Kendo().DatePicker().Name("mcd-code-check-scheduled").Value(Model.CodeCheckScheduled)   
        </div>
    <div style="padding-top:6px;text-align:right">
            <button class="k-button" onclick="ValidateAndSubmitMiscDates()">Save</button>
            <a href="javascript:CloseMiscDatesPopup()" class="k-button" style="margin-left:4px">Cancel</a>
        </div>

Upvotes: 0

Views: 745

Answers (1)

SerjG
SerjG

Reputation: 3570

Fixed in the latest build: 2015.2.902.545

Upvotes: 1

Related Questions