How to dynamically format dropdownlist

2 posts, 0 answers
  1. Mongonv
    Mongonv avatar
    10 posts
    Member since:
    Nov 2005

    Posted 09 Jul 2015 Link to this post

    I am trying to figure out how to set dynamic bordering for select and datepicker widgets and cannot find a way to do this for kendo.

     Attached is a screen shot of the non-formatting drop down that has the wrong border color and position for the validation message.  The Inputs show the proper color and message location for valid and invalid components.

     The CSS we are using for the inputs and trying to use for the other widgets is:

    input.ng-invalid {
      border: 2px solid red;
    }
     
    input.ng-valid {
      border: 1px solid green;
    }
     
    .selectDropDown.ng-invalid {
      border: 1px solid red;
    }
     
    .selectDropDown.ng-valid {
      border: 1px solid green;
    }
     We have tried using div wrappers around the select HTML, adding classes, and anything else we could find.  

    The two component definitions we are using are, where the select won't format and the input works great:

    <li>
      <label>Role Type:</label>
        <select
          kendo-drop-down-list
          k-value-primitive="'false'"
          required
          data-required-msg="The Role Type is required."
          class="selectDropDown"
          style="width: 150px;"
          k-ng-model="dataItem.roleType"
        >
          <option value="  ">  </option>
          <option value="APP">Applicant</option>
          <option value="CON">Contractor</option>
          <option value="ENG">Engineer</option>
          <option value="OWN">Owner</option>
        </select>{{dataItem.roleType}}
    </li>
    <li>
      <label>Name:</label>
      <input
        type="text"
        id="pplName"
        name="pplName"
        placeholder="Name"
        ng-model="dataItem.cspCo"
        class="k-textbox"
        required
        style="width: 350px;"
        maxlength=100
        data-required-msg="The Name is required."
        />
    </li>

     Any assistance would be greatly appreciated.

  2. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 14 Jul 2015 Link to this post

    Hello,

    In order to set different border color you could use the code snippet below: 
    .k-widget.k-dropdown.k-invalid  {
        border: 2px solid red;
    }
    Regarding the validation message position I would suggest to add a span with data-for attribute set to the validated input name and a class .k-invalid-msg. Please refer to the following documentation article for more information on how to customize the tooltip position. 

    Here is a simple demo which illustrates this approach. 


    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top