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

Removing cascade when parent dropdownlist selects no values

I wish to be able to view all the items in my child dropdown when the user selects nothing in the parent dropdown.

@Html.EJ().DropDownList("Column1").Datasource((IEnumerable<Column1>)ViewBag.Column1).DropDownListFields(f => f.Value("ID").Text("Name")).CascadeTo("Column2").EnableFilterSearch(true).HeaderTemplate("<div class='temp' style='margin:10px;'><input id='col1_check' type='checkbox' /></div>").ShowCheckbox().ClientSideEvents(ce => ce.Create("col1_create").PopupHide("col1_popupHide").Cascade("col1_cascade").Change("col1_change").PopupShown("col1_OnShow")).WatermarkText("All").PopupHeight("250")

I tried something like below but I was unable to get it to work. Any Ideas?

function col1_cascade(args) {

args.requiresDefaultFilter = false;

var obj = $("#Column1").ejDropDownList("instance");

if (obj.getSelectedValue() != "") {

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

} else {

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

}

}



3 Replies

PO Prince Oliver Syncfusion Team May 26, 2017 08:33 AM UTC

Hi Richard,   
  
Thank you for contacting Syncfusion support.   
  
We need to override the internal _cascadeDataBind method and set the default data source to display all items in the second dropdownlist, when no item is selected in the first dropdownlist. kindly refer to the following code snippet. 

<script type="text/javascript"> 
    ej.DropDownList.prototype._cascadeDataBind = function (cascadeDropDownObj, changedSource, status) { 
        var cascadeVal = cascadeDropDownObj.value(); 
        if ((this.model.showCheckbox && status) || (this.model.multiSelectMode != "none" && this.activeItem.hasClass("e-active"))) { 
            this._changedSource = (!ej.isNullOrUndefined(this._changedSource)) ? this._changedSource.concat(changedSource) : changedSource; 
        } 
        else if (!this.model.showCheckbox && this.model.multiSelectMode == "none") this._changedSource = changedSource; 
        else { 
            for (var i = 0; i < changedSource.length; i++) { 
                if (this._isPlainType(changedSource) && this._isPlainType(this._changedSource)) this._changedSource.splice(this._changedSource.indexOf(changedSource[i]), 1); 
                else { 
                    for (var j = 0; j < this._changedSource.length; j++) { 
                        if (JSON.stringify(this._changedSource[j]) == JSON.stringify(changedSource[i])) 
                            this._changedSource.splice(j, 1); 
                    } 
 
                } 
            } 
            cascadeDropDownObj.setModel({ dataSource: null }); 
        } 
        var cascadeModel = JSON.parse(JSON.stringify(cascadeDropDownObj.model)), enable; 
        this._changedSource.length == 0 ? cascadeDropDownObj.setModel({ dataSource: this[this.model.cascadeTo.split(",")], enabled: this._changedSource.length >= 0 }) : cascadeDropDownObj.setModel({ dataSource: this._changedSource, enabled: this._changedSource.length > 0 }); 
        if (!this._isSingleSelect()) cascadeDropDownObj.selectItemByValue(cascadeVal); 
        if (cascadeDropDownObj.model.showCheckbox || cascadeDropDownObj.model.multiSelectMode != "none") { 
            $("input:hidden[id^='#'][name=" + cascadeDropDownObj._id + "]").remove(); 
        } 
 
        if (!cascadeDropDownObj._setSelectedItem) { 
            var selectProp = ["value", "text", "selectedIndex", "selectedIndices"]; 
            for (var m = 0; m < selectProp.length; m++) 
                cascadeDropDownObj.model[selectProp[m]] = cascadeModel[selectProp[m]]; 
            cascadeDropDownObj._finalize(); 
        } 
        else { 
            cascadeDropDownObj.setModel(cascadeDropDownObj._setCascadeModel); 
        } 
        cascadeDropDownObj._setSelectedItem = true; 
    }; 
     
</script> 

We have prepared a sample as per your requirement, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/130685/ze/DropdownSample953928047 
  
Regards,   
Prince   



RP Richard Presley May 30, 2017 01:24 PM UTC

Hi Prince,

This is exactly what I was looking for.

Thanks!


PO Prince Oliver Syncfusion Team May 31, 2017 05:01 AM UTC

  
Hi Richard,    

Most Welcome. 

We are glad to help you. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon