jqxdropdownlist cascading initialization

[madamipraimParticipant]

I have 3 cascading dropdown. One with country, one with province and the last with city. Provinces are loaded when a country is selected and cities are loaded when a province is selected.
In an edit view I can’t initialize all the dropdowns with previously selected value. I try to initilize country value, wait the bindingComplete event on province dropdown than select the province item and then the same on the city dropdown.
But I can’t do it reliably.

This is what I tried so far

var sourceCountries =
        {
            datatype: "json",
            datafields: [
                { name: 'key' },
                { name: 'description' }
            ],
            url: '/Tables/api/Geographic/Countries',
            async: true
        };
    var dataAdapterBillingCountries = new $.jqx.dataAdapter(sourceCountries);
    $("#BillingCountryDropdown").jqxDropDownList({ placeHolder: "Select a value", filterable: true, searchMode: 'containsignorecase', selectedIndex: 0, source: dataAdapterBillingCountries, displayMember: "description", valueMember: "key", width: 150, height: 25, theme: "@ViewBag.Theme", });

    var dataAdapterShippingCountries = new $.jqx.dataAdapter(sourceCountries);
    $("#ShippingCountryDropdown").jqxDropDownList({ placeHolder: "Select a value", filterable: true, searchMode: 'containsignorecase', selectedIndex: 0, source: dataAdapterShippingCountries, displayMember: "description", valueMember: "key", width: 150, height: 25, theme: "@ViewBag.Theme", });

var sourceBillingProvinces =
        {
            datatype: "json",
            datafields: [
                { name: 'key' },
                { name: 'description' }
            ],
            url: '/Tables/api/Geographic/Provinces',
            async: true,
            processdata: function (data) {
                data.CountryId = getDropdownSelectedValue('#BillingCountryDropdown');
            }
        };
    var dataAdapterBillingProvinces = new $.jqx.dataAdapter(sourceBillingProvinces);
    $("#BillingProvinceDropdown").jqxDropDownList({ placeHolder: "Select a value", selectedIndex: 0, source: dataAdapterBillingProvinces, displayMember: "description", valueMember: "key", width: 150, height: 25, theme: "@ViewBag.Theme", });
    $('#BillingCountryDropdown').on('change', function (event) {
        dataAdapterBillingProvinces.dataBind();
    });

    var sourceBillingCities =
        {
            datatype: "json",
            datafields: [
                { name: 'key' },
                { name: 'description' }
            ],
            url: '/Tables/api/Geographic/Cities',
            async: true,
            processdata: function (data) {
                data.ProvinceId = getDropdownSelectedValue('#BillingProvinceDropdown');
            }
        };
    var dataAdapterBillingCities = new $.jqx.dataAdapter(sourceBillingCities);
    $("#BillingCityDropdown").jqxDropDownList({ placeHolder: "Select a value", selectedIndex: 0, source: dataAdapterBillingCities, displayMember: "description", valueMember: "key", width: 500, height: 25, theme: "@ViewBag.Theme", });
    $('#BillingProvinceDropdown').on('change', function (event) {
        dataAdapterBillingCities.dataBind();
    });

function selectDropdownValue(dropdown, value) {
        var item = $(dropdown).jqxDropDownList('getItemByValue', value);
        $(dropdown).jqxDropDownList('selectItem', item);
    }

$("#BillingCountryDropdown").on('bindingComplete', function (event) {
        if (!initializingBillingAddress)
            return;

        $("#BillingProvinceDropdown").on('bindingComplete', function (event) {
            if (!initializingBillingAddress)
                return;

            $("#BillingCityDropdown").on('bindingComplete', function (event) {
                if (!initializingBillingAddress)
                    return;
                
                setTimeout(function () {
                    selectDropdownValue('#BillingCityDropdown', '@Model.BillingAddress.CityId');
                    initializingBillingAddress = false;
                }, 200)
                
            });

            setTimeout(function () {
                selectDropdownValue('#BillingProvinceDropdown', '@Model.BillingAddress.ProvinceId');
            }, 200)

        });

        selectDropdownValue('#BillingCountryDropdown', '@Model.BillingAddress.CountryId');

    });

[HristoParticipant]

Hello madamipraim,

I would like to propose your attention on that is not correct to set events included in one another. (bindingComplete event)
It will be better to implement loadComplete callback to each one DataAdapter and there to use your “selectDropdownValue” method.
Also, it will be better if you use the change event and when fired then use your method.
Please, take a look at this example:

$('#jqxDropDownList1').on('change', function (event) {
	var item = event.args.item;
	selectDropdownValue('#jqxDropDownList2', item.value);
});
 
$('#jqxDropDownList2').on('change', function (event) {
	var item = event.args.item;
	selectDropdownValue('#jqxDropDownList3', item.value);
});

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

• This reply was modified 5 years, 4 months ago by  Hristo.

[Author]

Posts