Pass Selected Value to a 2nd drop down

[Mike]

I'm trying to pass a selected value from one drop down but not through cascade as the child DDL does not directly have the properties in which to cascade from.  One of the challenges here is each drop down is built from a collection.

My initial approach is to capture the selected value from the parent via the selected event then pass it to the child drop down through the child's data source "data" method.  Will this work?

 

<div class="col-12 col-md-4 col-lg-4 col-xl-4 order-1">

                        <kendo-dropdownlist for="Expenses[i].ActivityCenterId" datatextfield="Name" datavaluefield="PrimaryId" class="w-100" on-select="LoadActivityTypes">

                            <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax">

                                <transport>

                                    <read url="@Url.Action("GetActivityCentersForActivity", "Controller"datatype="json" />

                                </transport>

                            </datasource>

                        </kendo-dropdownlist>

                        <span asp-validation-for="Expenses[i].ActivityCenterId" class="text-danger"></span>

                    </div>

                    <div class="col-12 col-md-4 col-lg-4 col-xl-4 order-2">

                        <kendo-dropdownlist for="Expenses[i].ActivityTypeId" datatextfield="Name" datavaluefield="PrimaryId" class="w-100">

                            <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax">

                                <transport>

                                    <read url="@Url.Action("GetActivityTypes", "Controller" datatype="json" />

                                </transport>

                            </datasource>

                        </kendo-dropdownlist>

                        <span asp-validation-for="Expenses[i].ActivityTypeId" class="text-danger"></span>

</div>

 

function LoadActivityTypes(e)
{
    var activityCenterIdValue = e.dataItem.PrimaryId;
    var acDdlId = e.sender.element.prop("id"); //Expenses[i].ActivityCenterId
    var atDdlId = acDdlId.substring(0, acDdlId.indexOf(".") + 1) + "ActivityTypeId";

    var activityTypeDS = $(document.getElementById(atDdlId)).data("kendoDropDownList").dataSource;
    activityTypeDS.data = [{ activityCenterId: activityCenterIdValue }];
    activityTypeDS.read();
}

[Mike]

Never mind I answered my own question:

function LoadActivityTypes(e)
{
    var acDdlId = e.sender.element.prop("id"); //Expenses[i].ActivityCenterId
    var atDdlId = acDdlId.substring(0, acDdlId.indexOf(".") + 1) + "ActivityTypeId";

    var activityCenterIdValue = $(document.getElementById(acDdlId)).val();
    var activityTypeDS = $(document.getElementById(atDdlId)).data("kendoDropDownList").dataSource;
    var parameter = { activityCenterId: activityCenterIdValue };
    activityTypeDS.read(parameter);
}