This is a migrated thread and some comments may be shown as answers.

How to dynamically format dropdownlist

1 Answer 163 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Mongonv
Top achievements
Rank 2
Mongonv asked on 10 Jul 2015, 03:37 AM

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.

1 Answer, 1 is accepted

Sort by
0
Plamen Lazarov
Telerik team
answered on 14 Jul 2015, 06:42 AM
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!
 
Tags
DropDownList
Asked by
Mongonv
Top achievements
Rank 2
Answers by
Plamen Lazarov
Telerik team
Share this question
or