Failure to DataBind for cascade

Thread ID:	Created:	Updated:	Platform:	Replies:
143668	Mar 31,2019 02:20 AM UTC	Apr 1,2019 07:39 AM UTC	ASP.NET MVC - EJ 2	1

Subscribe to this post

Tags: DropDownList

Adam

Asked On March 31, 2019 02:20 AM UTC

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:

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

@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>

Second Dropdown:

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

@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>

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();

}

Reply | Reply with quote

Prince Oliver [Syncfusion]

Replied On April 1, 2019 07:39 AM UTC

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.

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

Reply | Reply with quote

Failure to DataBind for cascade

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US