This is a migrated thread and some comments may be shown as answers.

Dropdown Attr binding from json array

2 Answers 207 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Raja
Top achievements
Rank 1
Raja asked on 21 Jul 2014, 11:25 PM
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: 
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>

2 Answers, 1 is accepted

Sort by
0
Raja
Top achievements
Rank 1
answered on 22 Jul 2014, 05:43 PM
I think I am able to achieve this using this method.

On change of the Organizations dropdown I am filtering the data source of the Locations.

onOrgFilterChange: function (e) {
        if (e.sender.selectedIndex != 0) //if "All" is selected or not
        {
            locations.filter({ field: "OrganizationId", operator: "eq", value: parseInt(homeModel.selectedOrg) });
        }
        else
        {
            locations.filter([]);
        }
    }

Correct me if this is not a right way to do it.

Thanks,
Raja

0
Alexander Valchev
Telerik team
answered on 23 Jul 2014, 11:56 AM
Hi Raja,

Thank you for getting in touch with us.

Your approach to filter the locations dataSource on change of organization is valid and recommended one.
On a side note, the `attr` binding is not support by Kendo Widgets. You should receive a JavaScript error in the console.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
Raja
Top achievements
Rank 1
Answers by
Raja
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or