Hi,
I am trying to implement cascading drop down on client side.
I have two data sources. one for Organizations and second one for Locations. Organizations json has Id and Name. Locations json has Id, Name and OrganizationId (reference to Organizations). Once the user selects Organization in the first drop down I want to show relevant values in the second drop down. Also, user can directly select a location with out selecting an organization.
I am trying to populate the Locations drop down along with a custom attribute to to indicate the organization that it belongs. I am trying to use Attr binding and its not working. I am not sure If I am using it the right way.
Data Source:
Model:
View:
Output that I am expecting is something like this
<select>
<option value="10" org="2">USA</option>
</select>
I am trying to implement cascading drop down on client side.
I have two data sources. one for Organizations and second one for Locations. Organizations json has Id and Name. Locations json has Id, Name and OrganizationId (reference to Organizations). Once the user selects Organization in the first drop down I want to show relevant values in the second drop down. Also, user can directly select a location with out selecting an organization.
I am trying to populate the Locations drop down along with a custom attribute to to indicate the organization that it belongs. I am trying to use Attr binding and its not working. I am not sure If I am using it the right way.
Data Source:
var
locations =
new
kendo.data.DataSource({
schema: { model: { id:
"Id"
} },
transport: {
read: {
url:
'/Org/Locations'
,
datatype:
'json'
,
type:
'GET'
}
}
});
Model:
var
homeModel =
new
kendo.observable({
organiztion: organizations,
location: locations,
selectedOrg:
null
,
selectedlocation:
null
,
});
View:
<input name=
"Locations"
data-role=
"dropdownlist"
data-bind=
"source: location,value: selectedLocation, attr:{org:OrganizationId},"
data-value-primitive=
"true"
data-text-field=
"Name"
data-value-field=
"Id"
/>
Output that I am expecting is something like this
<select>
<option value="10" org="2">USA</option>
</select>