Using DropDownList field for making another property required or not required
Environment
| Product Version | 2022.3.913 |
| Product | Telerik UI for ASP.NET MVC Grid |
Description
How to dynamically change if a field is required in PopUp Edit Mode of a Telerik UI for ASP.NET MVC 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 to point to the desired Editor Template for the field.
- Handle the
ChangeEvent of the DropDownList. - In the Event handler, get the input field that will be set as required or non-required, depending on the value of the DropDownList.
- Use jQuery to set the required property to true or false.
The following example demonstrates the steps described above.
@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);
}
}
For more examples on Grid editing, see the following demos:
- Grid Popup Editing
-
More ASP.NET MVC Grid Resources
Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)