Binding Form data to selected item in DropDownList

[Brian]

I have a very simple scenario and can't quite figure out how to manage it with Core and Telerik controls.

I have a DropDownList which I'm successfully filling from an action method. I have form fields below it that relate to the row selected in the DropDownList. What I would like to do is have the form fields change when the selected item in the dropdownlist changes. Simple parent-child relationship, but I can't figure out how to manage this with Core and Telerik. Any suggestions? Thanks.

[Aleksandar]

Hello Brian,

You could add a Change event handler to the DropDownList. Within that event handler get the selected item via the dataItem client-side method and set the values of the desired components/inputs.

<div class="k-d-flex k-justify-content-center" style="padding-top: 54px;">
    <div class="k-w-300">
        <label for="products">Products:</label>
        @(Html.Kendo().DropDownList()
              .Name("products")
              .DataTextField("ProductName")
              .DataValueField("ProductID")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("RemoteDataSource_GetProducts", "DropDownList");
                  });
              })
              .Events(ev=>ev.Change("onChange"))
              .HtmlAttributes(new { style = "width: 100%" })
    )
        <label>Units in Stock:</label>
        @(Html.Kendo().NumericTextBox()
                    .Name("stock")
                    .Format("n0")
                )

        <label>Units on Order:</label>
        @(Html.Kendo().NumericTextBox()
                    .Name("ordered")
                    .Format("n0")
                )
    </div>
</div>
<script>
    function onChange(e){
        var dataItem = e.sender.dataItem();
        console.log(dataItem);
        $("#stock").getKendoNumericTextBox().value(dataItem.UnitsInStock);
        $("#ordered").getKendoNumericTextBox().value(dataItem.UnitsOnOrder);
    }
</script>

Here is a sample REPL.

I hope this helps.

Regards,
Aleksandar
Progress Telerik