validation problem with dropdown

[Sam]

Hi,

this is not working anymore and used to work before and after update it stop working. I want the validation to change the color in only drop down. not on other controls.

.k-dropdown  .k-tooltip-validation
{
          position: absolute;
         background-color: red
          color:white;
}

thanks

[Jayesh Goyani]

Hello,

you forget to add semiColon in second line.

.k-dropdown  .k-tooltip-validation

{

          position: absolute;

         background-color: red;

          color:white;

}

OR

@(Html.Kendo().DropDownListFor(model => model.CustomerID)

           .Name("CustomerID")

         .OptionLabel("--Select--")

                 .DataTextField("Text")

                 .DataValueField("Value")

             .BindTo(Model.Customerslst)

   )

    

   <br />

   <div id="ddlContainer">

     @Html.ValidationMessageFor(m => m.CustomerID)

     </div>

<style type="text/css">

    #ddlContainer span.k-tooltip

    {

        position: absolute;

        background-color: red;

        color: white;

    }

</style>

Thanks,
Jayesh Goyani

[Brian]

If you want to make a kendo dropdown's appearance change when it's invalid, this will help.

 JS:

//kendo validation is required for validation of kendo controls to work properly.
$("form").kendoValidator({
    errorTemplate: "",  //remove the additions kendo places to the right of each field.
    validate: function (e) {
        //Bizarrely, Kendo dropdowns require special attention.

        //Span with k-dropdown are kendo dropdown controls. They contain an input, which is used to store the value,
        //and another span (which has .k-input-wrap) that controls the actual presentation.
        //
        //The problem is that k-invalid is placed on the input, which isn't even visible. So, we have to
        //check the input for .k-invalid, and set a class on the span to control validation appearance.

        var dropDowns = $(".k-dropdown");

        $.each(dropDowns, function (key, value) {
            var input = $(value).find("input.k-invalid");    //this is where Kendo foolishly places k-invalid
            var span = $(this).find("span.k-dropdown-wrap"); //this span controls the dropdown's appearance.

            //manually set the validation attributes. Note that input-validation-error would have been a better
            //class to use here, but I think bootstrap.js must do some magic with it, because when I set it and then
            //manually remove it, that caused the span to mysteriously become display: none.
            if (input.size() > 0) { //if there is an input in here with k-invalid...
                $(span).addClass("dropdown-validation-error");
            } else {
                $(span).removeClass("dropdown-validation-error");
            }
        });
    }
});

CSS:

 

<style>
    .dropdown-validation-error {
        border: 1px solid red !important;
        background-color: #fee !important;
    }
</style>

 

This should really work out of the box. Yeesh. :)