Popup editor window doesn't update on the first try

[Chris T.]

Situation - 

I have a grid, which is set to use a popup editor.  Here's the relevant .editable section from the grid:

.Editable(editable => editable.Mode(GridEditMode.PopUp)
  .TemplateName("JobPopup")
  .Window(w => w.Title("Edit Job")
    .Width(800))
  .DisplayDeleteConfirmation("Are you sure you want to deactivate this job?")
)

 

I'm trying to change two of the fields in the popup editor from text boxes to rich editors.  Everything seems to work fine in Chrome, but not in Internet Explorer.

In IE, once either of the editors receives focus, it has to lose it before the built-in "Update" button works.

if I focus one of the editors and enter some text, clicking the window's "Update" button doesn't work - I get a flash, the page scrolls a bit, but it doesn't submit (no fiddler calls to the back end).  Pushing the "Update" button again submits the data as expected (because the editor no longer has focus?).  

If I edit the field then leave the editor (tab out, click another field, etc.), the "Update" button works fine first click. 

If I never enter one of the editors, the "Update button works first click.

Hopefully someone has an idea for me?  Company standards require both Chrome and IE functionality, or I'd just tell the user "Use Chrome!".

 

Here's the Popup Editor Template in question:

@model JobBank.Models.JobsGridViewModel

<table style="margin-left:15px;margin-right:15px;width:700px">
  <tr>
    <td style="vertical-align:top;">
      @Html.LabelFor(model => model.JobName, new { @class = "control-label" })<br />
      @Html.Kendo().TextBoxFor(model => model.JobName).HtmlAttributes(new { @class = "form-control", style = "width:400px", maxlength = "50" })
      <br />
      @Html.ValidationMessageFor(model => model.JobName, "", new { @class = "text-danger" })
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      @Html.LabelFor(model => model.ContactID, new { @class = "control-label" })<br />
      @(Html.Kendo().DropDownListFor(model => model.ContactID)
                    .OptionLabel("-- No Contact Selected --")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataSource(source => {
                      source.Read(read => {
                        read.Action("GetPicklist", "Contacts").Data("grdEmployerJobs_GetContactLookupParameters").Type(HttpVerbs.Post);
                      });
                    })
                    .HtmlAttributes(new { data_value_primitive = "true", style = "width:400px" })
      )
      <br />
      @Html.ValidationMessageFor(model => model.ContactID, "", new { @class = "text-danger" })
    </td>
  </tr>
   <tr>
    <td style="vertical-align:top;">
      <table style="width:75%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.JobTypeID, new { @class = "control-label" })<br />
            @(Html.Kendo().DropDownListFor(model => model.JobTypeID)
                    .OptionLabel("-- No Job Type Selected --")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataSource(source => {
                      source.Read(read => {
                        read.Action("GetPicklist", "JobTypes").Data("grdEmployerJobs_GetJobTypeID").Type(HttpVerbs.Post);
                      });
                    })
                    .HtmlAttributes(new { data_value_primitive = "true", style = "width:300px" })
            )
            <br />
            @Html.ValidationMessageFor(model => model.JobTypeID, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top;">
            @Html.LabelFor(model => model.Rate, new { @class = "control-label" })<br />
            @Html.Kendo().TextBoxFor(model => model.Rate).HtmlAttributes(new { @class = "form-control", style = "width:200px", @maxlength = "50" })
            <br />
            @Html.ValidationMessageFor(model => model.Rate, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      <table style="width:100%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.DayShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.DayShift)
            <br />
            @Html.ValidationMessageFor(model => model.DayShift, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.EveningShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.EveningShift)
            <br />
            @Html.ValidationMessageFor(model => model.EveningShift, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.NightShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.NightShift)
            <br />
            @Html.ValidationMessageFor(model => model.NightShift, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.WeekendShift, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.WeekendShift)
            <br />
            @Html.ValidationMessageFor(model => model.WeekendShift, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      <table style="width:75%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.DateJobPosted, new { @class = "control-label" })<br />
            @Html.EditorFor(model => model.DateJobPosted, new { htmlAttributes = new { @class = "form-control" } })
            <br />
            @Html.ValidationMessageFor(model => model.DateJobPosted, "", new { @class = "text-danger" })
          </td>
          <td style="vertical-align:top;">
            @Html.LabelFor(model => model.EndDatePosted, new { @class = "control-label" })<br />
            @Html.EditorFor(model => model.EndDatePosted, new { htmlAttributes = new { @class = "form-control" } })
            <br />
            @Html.ValidationMessageFor(model => model.EndDatePosted, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top;">
      <table style="width:75%">
        <tr>
          <td style="vertical-align:top">
            @Html.LabelFor(model => model.JobFilled, new { @class = "control-label" })<br />
            @Html.CheckBoxFor(model => model.JobFilled)
            <br />
            @Html.ValidationMessageFor(model => model.JobFilled, "", new { @class = "text-danger" })
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; width:500px">
      @Html.LabelFor(model => model.Skills, new { @class = "control-label" })<br />
      @Html.Kendo().EditorFor(model => model.Skills).Tools(tools => tools
         .Clear()
         .Bold().Italic().Underline()
         .InsertUnorderedList().InsertOrderedList()
         .Outdent().Indent()
         .CreateLink().Unlink()
         .FontColor().BackColor()
       ).Encode(true)
      <br />
      @Html.ValidationMessageFor(model => model.Skills, "", new { @class = "text-danger" })
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top; width:500px">
      @Html.LabelFor(model => model.Notes, new { @class = "control-label" })<br />
      @Html.Kendo().EditorFor(model => model.Notes).Tools(tools => tools
         .Clear()
         .Bold().Italic().Underline()
         .InsertUnorderedList().InsertOrderedList()
         .Outdent().Indent()
         .CreateLink().Unlink()
         .FontColor().BackColor()
       ).Encode(true)
      <br />
      @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
    </td>
  </tr>
</table>

[Tsvetina]

Hi Chris,

I tried to reproduce the problem in a test project following the snippets you shared but the update button works as expected on my side when I test in IE. I type in something in one of the fields and click Update immediately. This results in a successful update. I am attaching my project for reference. Are you able to reproduce the issue in it? 
If the problem remains on your side and it is reproducible only in your project, please consider opening a support ticket and sending us a runnable version of the project, so we can debug it and see what causes the undesired behavior.

Regards,
Tsvetina
Progress Telerik

[Chris T.]

Well, I thought I was running the latest version of UI for MVC, but it turns out I had several of them in my /content/ folder, and all the URLs were pointing at one from early 2017.

Untangled all the versions and replaced them with 2018.1.221.  Project now works flawlessly.

Sorry for the false alarm, and thank you for your effort!  It really sets Telerik / Progress apart!