Kendo.DropDownList changing datasource dynamically

I am a new user and have not been able to find an example demonstrating what I'm trying to accomplish.

I need to use the same Kendo.DropDownList in two different contexts, but must update one attribute [.Name("DisbursedTo")]. At first I used a hide/show approach with two separate ddl's. It worked, except that each ddl widget required a unique '.Name', so my updates to the model attribute were off. Using one ddl, I'm trying to dynamically change the ddl properties.

By default I load the ddl with 'Locations' data (this works fine). After initial load, I use a simple Radio Button group 'onclick' to switch to 'ADUsers', or back to 'Locations'.

cshtml

    <label for="DisbursedTo">Disbursed To:</label>
    @(Html.Kendo().DropDownList()
            .Name("DisbursedTo")
            .DataTextField("Name")
            .DataValueField("LocationId")
            .SelectedIndex(20)
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("GetLocations", "Disbursement"))  // Specify the action method and controller name        
                .ServerFiltering(true)                                      // If true the DataSource will not filter the data on the client.
                )
            )

script

    function OwnerTypeClick(ownerTypeValue) {
        if (ownerTypeValue == "P") {
            alert("calling DisbursedToADUsers");
            DisbursedToADUsers();
        }
        else {
            alert("calling DisbursedToLocations");
            DisbursedToLocations();
        }
    }

    function DisbursedToADUsers() {
        var adUsersIntranetDataSource = new kendo.data.DataSource({
            read: {
                action: { "GetADUsersIntranet": "Disbursements" }
            }
        });

        var ddl = $("#DisbursedTo").kendoDropDownList({
            dataTextField: "displayName",
            dataValueField: "EmployeeNumber",
            dataSource: adUsersIntranetDataSource,
            autoBind: true
        });

        ddl.dataSource.read();
    }

    function DisbursedToLocations() {
        var locationsDataSource = new kendo.data.DataSource({
            read: {
                action: { "GetLocations": "Disbursements" }
            }
        });

        var ddl = $("#DisbursedTo").kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "LocationId",
            dataSource: locationsDataSource,
            autoBind: true
        });

        ddl.dataSource.read();
    }

I'm getting the following error on the 'ddl.dataSource.read();' so I'm not getting my datasource changed/initialize properly.

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'read': object is null or undefined

If anyone has done something similar, I'd greatly appreciate some assistance.

The provided code suggests that you are initializing new DropDownList widgets from the same HTML element every time, and also that new DataSources are created every time.

You can create the two different DataSources outside of the functions, and then in the functions bodies use the DropDownList setDataSource() method to switch between the two dataSources, and the setOptions() method to change the other options like dataTextField and dataValueField, e.g.:

Example