MVC Validation with Kendo UI Drop Down Lists

Question

I'm working on a project that relies heavily on KendoUI.

Business requirements require me to use KendoUI form elements with MVC validation.

This works fine for standard textbox elements, however when I'm required to use Kendo DropDownList widges, I run into an issue with the MVC validation display.

My Kendo DDL:

 @Html.HiddenFor(m => m.State)
            @(Html.Kendo().DropDownListFor(m=>m.SateName)
                  .HtmlAttributes(new {title = Web.Resource.Resources.State, tabindex = "0", @class = "form-control",})
                  .OptionLabel(" ")
                  .Name("StateName")
                  .AutoBind(true)
                  .ValuePrimitive(true)
                  .DataTextField("Text")
                  .DataValueField("Value")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetJsonStates", "Account").Data("getSelectedCountryId"));

                  })
                  .Value(Model.State)
                  )

The generated output:

 <span aria-busy="false" aria-readonly="false" aria-disabled="false" aria-owns="StateName_listbox" tabindex="0" aria-expanded="false" aria-haspopup="true" role="listbox" unselectable="on" class="k-widget k-dropdown k-header form-control" title="Province" style="">
<span unselectable="on" class="k-dropdown-wrap k-state-default">
<span unselectable="on" class="k-input"> </span><span unselectable="on" class="k-select">
<span unselectable="on" class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<input style="display: none;" data-role="dropdownlist" class="form-control input-validation-error" data-val="true" data-val-required="The State field is required." id="StateName" name="StateName" title="Province" type="text"></span>

If you look closely at the hidden input that is generated from the KendoUI, you can see that the MVC validation is adding the validation error to it, and not the drop down list.

Eg. class=" ..input-validation-error"

The validation is working properly, but from a UI perspective, I can't identify the fields that have errors. In the image below, you can see that error styling has been applied to all standard textboxes but not the select lists (ie: province and state).

Does anyone have a work around for this? I'm stuck on this one.

Please Note: Kendo Validation is not an option(business requirement). Also this is a large web application with many many forms, so using a one off JS solution for this example is not viable.

Gene R Gene R · Accepted Answer · 2015-11-19T15:42:28

i had same issue, so i overwrited kendoValidator:

_kendoValidator = $.fn.kendoValidator;
$.fn.kendoValidator = function (options) {
    var that = this;
    if (options == null) options = {};
    var oldvalidate = options.validate;
    var validate = function (e) {
        that.find('input,textarea,select').each(function () {
            var input = $(this);
            var datarole = input.attr('data-role');
            var invalid = input.hasClass("k-invalid");
            var container = input;
            if (datarole == 'numerictextbox' || datarole == 'datepicker' || datarole == 'timepicker' || datarole == 'multiselect' || datarole == 'upload') container = input.parent();
            else if (datarole != null) container = input.parent().find('span').eq(0);
            container.toggleClass('widget-validation-error', invalid);
        });
        if (oldvalidate != null) $.proxy(oldvalidate, e.sender)(e);
    }
    options.validate = validate;
    return _kendoValidator.call(this, options);
}

and widget-validation-error is css class:

.widget-validation-error {
    border: 1px solid #ff0000 !important;
}

MVC Validation with Kendo UI Drop Down Lists

1 Answers