Failure to DataBind for cascade

[Adam]

I am trying to follow the examples to cascade two dropdown lists. It seems the databind is not working. I am population the dropdowns from ViewBag. When I debug, I see it get all the way through the databind, no errors, but the second dropdown just says "No Records Found". I don't understand how it can send the query and repoplulate the ViewBag variable. Here is the code I am using:

First Dropdown:

    <div class="form-group">

        @Html.LabelFor(model => model.AID, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EJS().DropDownList("AID").Placeholder("Select an Agency").PopupHeight("200px").Change("aidchange").DataSource((IEnumerable<Object>)ViewBag.AgencyDD).Fields(df => df.Text("Agency").Value("ID")).Width("150px").Value(Model.AID).Render()

            @Html.ValidationMessageFor(model => model.AID, "", new { @class = "text-danger" })

        </div>

    </div>

Second Dropdown:

    <div class="form-group">

        @Html.LabelFor(model => model.agency_contact, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">

            @Html.EJS().DropDownList("agency_contact").Placeholder("Select an Agency Contact").PopupHeight("200px").DataSource((IEnumerable<Object>)ViewBag.AgencyContactDD).Fields(df => df.Text("AgeConName").Value("ID")).Width("150px").Value(Model.agency_contact).Render()

            @Html.ValidationMessageFor(model => model.agency_contact, "", new { @class = "text-danger" })

        </div>

    </div>

javascript:

    function aidchange() {

            var agency_contact = document.getElementById('agency_contact').ej2_instances[0];

            var AID = document.getElementById('AID').ej2_instances[0];

                agency_contact.enabled = true;

            var tempQuery = new ej.data.Query().where('AID', 'equal', AID.value);

                agency_contact.query = tempQuery;

                agency_contact.text = null;

                agency_contact.dataBind();

        }

[Prince Oliver]

Hello Adam, 

Greetings from Syncfusion support. 

We have checked you shared code and it seems that you have passed the wrong field name in the query construction process which is used to filter the data for the second DropDownList. The fieldname must match the available fields for the second DropDownList in order to perform cascading successfully.  Refer the following code. 

<script> 

    function aidchange() { 

        var agency_contact = document.getElementById('agency_contact').ej2_instances[0]; 

        var AID = document.getElementById('AID').ej2_instances[0]; 

        //   agency_contact.enabled = true; 

        var tempQuery = new ej.data.Query().where('ID', 'equal', AID.value); // kindly pass the proper field for filtering (use the value field) 

        agency_contact.query = tempQuery; 

        agency_contact.text = null; 

        agency_contact.dataBind(); 

    } 

</script> 

Also, in your code, we could see that you are preselecting a value using value property. To properly select both the values, we would suggest having a unique value field for the second DropDownList and maintain a separate field for performing filtering. We have constructed an example application using the provide code and have included the above suggestions for your reference. Please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/143668/ze/MVCsampleEJ2-1084094832  

For further reference, 

Online demo: https://ej2.syncfusion.com/aspnetmvc/DropDownList/Cascading#/material 

UG: https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/how-to/cascading-preselect/?no-cache=1  

Let us know if you need any further assistance on this.  

Regards, 

Prince