jQuery UI Widgets Forums General Discussions jqxdropdownlist cascading initialization

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxdropdownlist cascading initialization #97157

    madamipraim
    Participant

    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');
    
        });
    jqxdropdownlist cascading initialization #97169

    Hristo
    Participant

    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 6 years, 7 months ago by  Hristo.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.