validation problem with dropdown

3 posts, 0 answers
  1. Sam
    Sam avatar
    1 posts
    Member since:
    Oct 2012

    Posted 25 Oct 2012 Link to this post

    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

  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Nov 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    1 posts
    Member since:
    Feb 2014

    Posted 13 May 2015 Link to this post

    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. :)

Back to Top