Dropdown Attr binding from json array

3 posts, 0 answers
  1. Raja
    Raja avatar
    43 posts
    Member since:
    Oct 2013

    Posted 21 Jul 2014 Link to this post

    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. Raja
    Raja avatar
    43 posts
    Member since:
    Oct 2013

    Posted 22 Jul 2014 Link to this post

    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

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 23 Jul 2014 Link to this post

    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!
     
Back to Top