Using DropDownList field for making another property required or not required

Environment

Product Version	2022.3.913
Product	Telerik UI for ASP.NET Core Grid

Description

How to dynamically change if a field is required in PopUp Edit Mode of a Telerik UI for ASP.NET Core 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 to point to the desired Editor Template for the field.
2. Handle the Change Event of the DropDownList.
3. In the Event handler, get the input field that will be set as required or non-required, depending on the value of the DropDownList.
4. Use jQuery to set the required property to true or false.

The following example demonstrates the steps described above.

TestEditor.cshtml

@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"))
        )

C#

        [UIHint("TestEditor")]
        public string EnableShipName { get; set; }

JavaScript

   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
• Grid Editing Custom Editor

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base