Why is MVC Kendo Drop Down Not Adding Value/Input After Validation Error (Can't move past validation error)

Question

This issue only happens in my commercial project. It does not happen in my other projects and there is no difference that I can see in set up other then my current project is running the latest update of Kendo (but others in the office are running with the latest version with no issues). Same MVC version, all using server side validation.

So this is the problem

Working scenario 1

1. Fill in form data
2. Select something in drop down
3. Hit Submit
4. Works

Working scenario 2

1. Fill in form data
2. Select something in drop down
3. Leave a text field unfilled
4. Hit Submit
5. Validation error on text field
6. Enter text
7. Hit submit
8. Works

Failing Scenario:

1. Fill in form data
2. Don't select something in drop down
3. Hit Submit
4. Validation error on drop down
5. Select something in drop down
6. Hit submit
7. Repeats validation error and sets drop down back to unselected

This is currently using server side validation.

When I compare one of our working kendo drop downs to the one that isn't there are two things that stand out.

1. The working drop down, after validation fail, when I change its selection adds a span with "k-input" that has the selected value in text form. (The broken one does not)

2. The broken drop down has a value field whereas the working one doesn't

The Kendo Razor from the none working project is this:

 @Html.Kendo().DropDownListFor(model => model.EmployeeRecordId).OptionLabel("Please Select").DataTextField("FullName").DataValueField("EmployeeRecordId").DataSource(source => { source.Read(read => { read.Action("Get", "EmployeeRecord", new {area = "ClientArea", id = ViewBag.ClientId}); }).ServerFiltering(true); }).Events(e => { e.Change("employeeChanged"); })

The one that does work is a lot less complicated, it doesn't need to be able to update (there's a button to add a new employee on that page)

@Html.Kendo().DropDownListFor(model => model.CurrencyId).BindTo(ViewBag.Currencies).OptionLabel("Select Currency")

Below is the HTML for each, taken from the page source just after the second validation error and a value was re-selected:

Working

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="input-validation-error" data-val="true" data-val-number="The field Currency must be a number." data-val-required="The Currency field is required." id="CurrencyId" name="CurrencyId" type="text" />
<script>
  jQuery(function() {
    jQuery("#CurrencyId").kendoDropDownList({
      "dataSource": [{
          "Text": "GBP",
          "Value": "1"
        },
        {
          "Text": "EUR",
          "Value": "3"
        }
      ],
      "dataTextField": "Text",
      "dataValueField": "Value",
      "optionLabel": "Select Currency"
    });
  });
</script>
<span class="field-validation-error" data-valmsg-for="CurrencyId" data-valmsg-replace="true">The Currency field is required.</span>

Not Working

<span class="field-validation-valid" data-valmsg-for="EmployeeRecordId" data-valmsg-replace="true"></span>
</div>
<div class="editor-field">
  <input data-val="true" data-val-number="The field Employee Name must be a number." data-val-required="The Employee Name field is required." id="EmployeeRecordId" name="EmployeeRecordId" type="text" value="3032" />
  <script>
    kendo.syncReady(function() {
      jQuery("#EmployeeRecordId").kendoDropDownList({
        "change": employeeChanged,
        "dataSource": {
          "transport": {
            "read": {
              "url": "/ClientArea/EmployeeRecord/GetAllActiveByClientId/1003",
              "data": function() {
                return kendo.ui.DropDownList.requestData(jQuery("#EmployeeRecordId"));
              }
            },
            "prefix": ""
          },
          "serverFiltering": true,
          "filter": [],
          "schema": {
            "errors": "Errors"
          }
        },
        "dataTextField": "FullName",
        "dataValueField": "EmployeeRecordId",
        "optionLabel": "Please Select"
      });
    });
  </script>

  <span class="field-validation-valid" data-valmsg-for="EmployeeRecordId" data-valmsg-replace="true"></span>
</div>

Does anyone have any suggestion why this might be happening.

--Update--

Another key point of the puzzle, when it is sent to the server, "EmployeeRecordId" is not included in the form collection of keys!

--UPDATE 2--

when VS is paused on the "Create" action (where i am checking the form collection) if I go back to the page, I can see that the drop down box is mysteriously not there, like its been removed via JS pre submit

Answer 1

After much digging I came across a similar issue.

https://www.telerik.com/forums/kendo-validation-does-not-work-the-second-time

Which although didn't provide me an answer for why the server side is failing. It did lead me to how to get client side validation working for kendo drop downs. Which as it happens before sever side seems to stop the error ever happening.

To enable client side validation on kendo drop downs you need to add this code to the very bottom of your page (so the very bottom of your layout file)

<script type="text/javascript">
    $.validator.setDefaults({
        ignore: ""
    });
</script>

You will need to enable the usual mvc client side validation with the jquery scripts.

I'm hesitant to mark this as best answer as it doesn't answer the question of why this is happening at all but I have posted it to help others with the same problem :)

Answer 2

Not the ideal solution. But you'll have to add following code for every form submission with validations. Found the solution from the Kendo UI official Support page. It looks more like a bug. To get it working, you can add the following code at the bottom of you page. (After the page is loaded)

$(document).ready(function () {
    $(".k-widget").removeClass("input-validation-error");
});