Use DropDownList field for making another property required or not required
Environment
| Product Version | 2022.3.913 |
| Product | Grid for Progress® Telerik® UI for ASP.NET MVC |
Description
How to dynamically change if a field is required in PopUp Edit Mode of a Telerik UI Grid by using another field with DropDownList Editor?
Solution
The example below is implemented as per the following steps:
- Use a DataAnnotation attribute for the DropDownList in order to point to the desired EditorTemplate for the field.
- Handle the "Change" Event of the DropDownList.
- In the Event handler, get the input field that should be set as required/non-required, depending on the value of the DropDownList.
- Use jQuery to set the required property to true or false.
- Here is an example:
@model string
@(Html.Kendo().DropDownList()
.Name("EnableShipName")
.BindTo(new List<string>() {
"ShipName is required",
"ShipName is not required"
})
.HtmlAttributes(new { style = "width: 100%" })
.Events(e => e.Change("onDDLChange"))
)
[UIHint("TestEditor")]
public string EnableShipName { get; set; }
function onDDLChange() {
var dropDownList = this;
var ddlValue = dropDownList.value();
if (ddlValue == "ShipName is required") {
$("#ShipName").prop('required', true);
}
else {
$("#ShipName").prop('required', false);
}
}