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();
}