Kendo UI drop down - How to force a second drop down to read data source after first drop downs selection event without using Cascading

In this case, lets review the scenario first. I have  a drop down ddl1, on its selection event, I would like to read data source for second drop down ddl2.

In the code below, I will create both the drop downs and give a data source to read initially. For my second drop down, I will pass an empty string to avoid loading data.

Below is the code to define my drop down lists:

  In the first one, I had defined text and value fields along with my controller method, similar to ddl2. But for ddl1, I do not require any input parameters. So when loading the UI, ddl1 will be loaded and I will disable the second one, until it is ready to read and load data.

@(Html.Kendo().DropDownList()
                    .Name("ddl1")
                    .OptionLabel("Select an option for ddl1....")
                    .DataTextField("textvalue") // value to be displayed in the drop down
                    .DataValueField("idvalue")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Getddl1Data", "DataLoad");
                        });
                   })
                  .Events(events => {events.Change("Loadddl2");    })
                    )

Script below will disable ddl2 until, I will force it to read.

<script>
var ddlltodisable = $("#ddl2").data("kendoDropDownList");
ddlltodisable.enable(false);
</script>

In my second drop down list, I am passing an empty string to avoid data being read and load for the first time.

@(Html.Kendo().DropDownList()
                    .Name("ddl2")
                    .OptionLabel("Select an option for ddl2....")
                    .DataTextField("textvalue")
                    .DataValueField("idvalue")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Getddl2Data", "DataLoad", new { parameter1= "" });
                        });
                   })
 )

Below is the script to enable ddl2 and read data with a parameter value from ddl1.

function Loadddl2() {
        $("#ddl2").data("kendoDropDownList").enable(true); //enable drop down list 2
     
        // force read data source for drop down list 2
        var readddl2= $('#ddl2').data("kendoDropDownList");
        readddl2.dataSource.read({ paramvalue: $('#ddl1').data("kendoDropDownList").value() });        
   }

Lets review the controller methods here...

public class DataLoadController : Controller
{
   
      public JsonResult Getddl1Data()
      {
   
             return someobjectforddl1;
       }

       public JsonResult Getddl2Data(string dropdownvalue)
     {
           if(!(string.IsNullorEmpty(dropdownvalue)))
          {
                     // run the code to retrieve data only when valid input
                     return someobjectforddl2;
           }
      }

}