We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Multiples dropdown cascading problems

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

5 Replies

KV Karthikeyan Viswanathan Syncfusion Team May 7, 2017 03:41 PM UTC

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. 



MA Manolo May 7, 2017 05:38 PM UTC

Ok, I thank you for an example


KV Karthikeyan Viswanathan Syncfusion Team May 8, 2017 11:48 AM UTC

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> 


Regards, 
Karthikeyan V. 



MA Manolo May 11, 2017 11:09 AM UTC

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


PO Prince Oliver Syncfusion Team May 12, 2017 05:22 AM UTC

Hi Manolo, 

Most Welcome. 
Please let us know if you require any further assistance. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon