Multiples dropdown cascading problems

[Manolo]

Hi,

I've a problem in this scenario:

I've 3 dropdowns, the first and the second drop down cascade both to the third dropdown. The first drop down has multiples values, the second is a standard cascading.

In javascript, in cascade event, I've defined the behaviour for the cascading:

function communityCascade(args)
    {
        args.requiresDefaultFilter = false; // restrict the inbuilt mapping for cascading dropdown
        var predicates = [];
        for (var i = 0; i < args.cascadeValue.length; i++) {
            predicates.push(new ej.Predicate("Code", ej.FilterOperators.equal, args.cascadeValue[i]));
        }
        args.cascadeQuery = ej.Query().where(ej.Predicate["or"](predicates))
    }

When I click on first drop down, and the second, the cascading works fine, but if I unselect an item of second drop down, it doesn't cascade correctly.

This is my problem, but I attach an example for reproduce the error. At first instance, it works fine, but when I uncheck a country, cascading doesn't work fine

Attachment: DropDownProblem_b2dbc0f4.zip

[Karthikeyan Viswanathan]

Hi Manolo, 

   Thanks for contacting Syncfusion support. 

Currently, Multiple cascading is not supported for multi selection dropdown list. If you need this functionality means we will provide a workaround sample for your requirement. 

Regards, 

Karthikeyan V. 

[Manolo]

Ok, I thank you for an example

[Karthikeyan Viswanathan]

Hi Manolo, 

As per your request, We have prepared a workaround sample for multiple cascading dropdown list.  

Please find the code example:  

<code> 

<script> 

    var communityData; 

    var countryData; 

    function communityCascade(args) { 

        args.requiresDefaultFilter = false; // restrict the inbuilt mapping for cascading dropdown 

        var predicates = []; 

        var casVal = args.cascadeValue.split(";"); 

        for (var i = 0; i < casVal.length; i++) { 

            predicates.push(new ej.Predicate("Code", ej.FilterOperators.equal, casVal[i])); 

        } 

        args.cascadeQuery = ej.Query().where(ej.Predicate["or"](predicates)); 

        var CountryInst = $("#Country").ejDropDownList("instance"); 

        if (ej.isNullOrUndefined(this["City"]) && !ej.isNullOrUndefined(CountryInst["City"])) { 

            this["City"] = CountryInst["City"]; 

        } 

        else if (ej.isNullOrUndefined(this["City"])) this["City"] = this.selectDropObj.model.dataSource; 

        var changedSource = ej.DataManager(this["City"]).executeLocal(args.cascadeQuery); 

 

        var communityData = []; 

        if (CountryInst._changedSource && CountryInst._changedSource.length > 0) communityData = communityData.concat(CountryInst._changedSource); 

        if (this.checkedStatus) { 

            if (this._changedSource && this._changedSource.length > 0) communityData = this._changedSource.concat(changedSource); 

            else communityData = communityData.concat(changedSource); 

            communityData = removeduplicate(communityData); 

        } 

        else { 

            communityData = removeduplicate(communityData); 

            for (var i = 0; i < changedSource.length; i++) { 

                for (var j = 0; j < this._changedSource.length; j++) { 

                    if (JSON.stringify(this._changedSource[j]) == JSON.stringify(changedSource[i])) 

                        this._changedSource.splice(j, 1); 

                } 

                for (var j = 0; j < CountryInst._changedSource.length; j++) { 

                    if (JSON.stringify(CountryInst._changedSource[j]) == JSON.stringify(changedSource[i])) 

                        CountryInst._changedSource.splice(j, 1); 

                } 

            } 

            communityData = this._changedSource; 

            communityData = communityData.concat(CountryInst._changedSource); 

        } 

        communityData = removeduplicate(communityData); 

        args.setCascadeModel = { "dataSource": communityData ,"enabled":true}; 

 

    } 

 

    function countryCascade(args) { 

        args.requiresDefaultFilter = false; 

        args.cascadeQuery = ej.Query().where("IdCountry", "equal", args.cascadeValue); 

        var ComunityInst = $("#Comunity").ejDropDownList("instance"); 

        if (ej.isNullOrUndefined(this["City"]) && !ej.isNullOrUndefined(ComunityInst["City"])) { 

            this["City"] = ComunityInst["City"]; 

        } 

        else if (ej.isNullOrUndefined(this["City"])) this["City"] = this.selectDropObj.model.dataSource; 

        var changedSource = ej.DataManager(this["City"]).executeLocal(ej.Query().where("IdCountry", "equal", args.cascadeValue)); 

        var countryData = []; 

        if (ComunityInst._changedSource && ComunityInst._changedSource.length > 0) countryData = countryData.concat(ComunityInst._changedSource); 

        if (this.checkedStatus) { 

            if (this._changedSource && this._changedSource.length > 0) countryData = this._changedSource.concat(changedSource); 

            else countryData = countryData.concat(changedSource); 

            countryData = removeduplicate(countryData); 

        } 

        else { 

            countryData = removeduplicate(countryData); 

            for (var i = 0; i < changedSource.length; i++) { 

                for (var j = 0; j < this._changedSource.length; j++) { 

                    if (JSON.stringify(this._changedSource[j]) == JSON.stringify(changedSource[i])) 

                        this._changedSource.splice(j, 1); 

                } 

                for (var j = 0; j < ComunityInst._changedSource.length; j++) { 

                    if (JSON.stringify(ComunityInst._changedSource[j]) == JSON.stringify(changedSource[i])) 

                        ComunityInst._changedSource.splice(j, 1); 

                } 

            } 

            countryData = this._changedSource; 

            countryData =  countryData.concat(ComunityInst._changedSource); 

        } 

        countryData = removeduplicate(countryData); 

        args.setCascadeModel = { "dataSource": countryData, "enabled": true }; 

    } 

    function removeduplicate(communityData) { 

        var uniqueNames = []; 

        $.each(communityData, function (i, el) { 

            if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el); 

        }); 

        return uniqueNames; 

    } 

</script> 

</code> 

Sample link: http://www.syncfusion.com/downloads/support/forum/130272/ze/DropDownProblem-245721538.zip  

Regards, 

Karthikeyan V. 

[Manolo]

Buff.. it's complex.... thanks!

[Prince Oliver]

Hi Manolo, 

Most Welcome. 

Please let us know if you require any further assistance. 

Regards, 

Prince