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.
Unfortunately, activation email could not send to your email. Please try again.

Removing cascade when parent dropdownlist selects no values

Thread ID:

Created:

Updated:

Platform:

Replies:

130685 May 25,2017 01:53 PM May 31,2017 01:01 AM ASP.NET MVC 3
loading
Tags: DropDownList
Richard Presley
Asked On May 25, 2017 01:53 PM

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", "");

}

}



Prince Oliver [Syncfusion]
Replied On May 26, 2017 04:33 AM

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   


Richard Presley
Replied On May 30, 2017 09:24 AM

Hi Prince,

This is exactly what I was looking for.

Thanks!

Prince Oliver [Syncfusion]
Replied On May 31, 2017 01:01 AM

  
Hi Richard,    

Most Welcome. 

We are glad to help you. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;