Cascading drop down data source change

[Luke]

Hello, I am trying to change the read action of my child drop down based on the parent drop down value. In my scenario, the read action for my "Assignee" drop down needs to call the appropriate controller based on the "Assignment Type" drop down value. I'm struggling to find documentation on how I can update the drop down data source. I'm assuming the best approach would be to utilize the select event of the parent drop down to then update the child drop down read action, but I need some direction on how to approach this. The following is the setup of my cascading drop down inputs. I'm not sure if it matters, but these are being used in a template for a custom grid command that opens a kendo window popup.

    <div class="k-edit-form-container">
        <style>
            .k-edit-form-container {
                max-height: 600px;
            }

            .k-edit-form-container .k-edit-buttons {
                margin: 0;
                padding: 8px 0px;
            }
        </style>
        <input type="hidden" id="InventoryId" name="InventoryId" value="#:data.Id#" />
        <input type="hidden" id="InventoryTypeId" name="InventoryTypeId" value="#:data.InventoryTypeId#" />
    </div>

    <div class="k-edit-label">
        <label>Assignment Type</label>
    </div>
    <div class="k-edit-field">
    @(Html.Kendo().DropDownList()
            .Name("AssignmentType")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignment Type")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetAssignmentPermissions", "InventoryType").Data("AssignmentTypeData");
                });
            })
            .ToClientTemplate()
        )
    </div>

    <div class="k-edit-label">
        <label>Assign To</label>
    </div>
    <div class="k-edit-field">
        @(Html.Kendo().DropDownList()
            .Name("Assignee")
            .DataTextField("Name")
            .DataValueField("Id")
            .OptionLabel("Select Assignee")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetActiveInventoryTypes", "InventoryType").Data("FilterAssignees");
                });
            })
            .Enable(false)
            .AutoBind(false)
            .CascadeFrom("AssignmentType")
            .ToClientTemplate()
        )
    </div>

[Aleksandar]

Hello Luke,

To achieve the desired result you would need to use the client-side API of the DropDownList. You can add a Select event handler to the parent DropDownList and then use the setDataSource method to set the dataSource of the child DropDownList to a new DataSource instance with the desired endpoint:

@(Html.Kendo().DropDownList()
                  .Name("parent")
                  .Events(ev=>ev.Select("onSelect"))
        )
@(Html.Kendo().DropDownList()
                  .Name("child")
                  .CascadeFrom("parent")
        )
<script>
    function onSelect(e){
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "https://my/updated/url",
                    }
                }
                });
            $("#child").getKendoDropDownList().setDataSource(dataSource);
    }
</script>

Regards,
Aleksandar
Progress Telerik