New to Telerik UI for ASP.NET Core? Download free 30-day trial

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 Core

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:

  1. Use a DataAnnotation attribute for the DropDownList in order to point to the desired EditorTemplate for the field.
  2. Handle the "Change" Event of the DropDownList.
  3. In the Event handler, get the input field that should be set as required/non-required, depending on the value of the DropDownList.
  4. Use jQuery to set the required property to true or false.
  5. 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);
        }
    }

See Also

In this article