Cascading DropDownLists do not update when using URL data sources and allowFiltering is set to true

Question

I've been trying to setup cascading DropDownLists in one of our webapps. The DropDownLists each use a URL data source. Taking the example code from the documentation and updating the appropriate fields (dataSource, fields, cascade queries, etc.) all seem to work fine. But as soon I add "allowFiltering: true", the subsequent DropDownLists do not update when the prerequisite DropDownList value changes. A request gets made to the server and returns the appropriate / corresponding data, however the values available in the connected DropDownLists do not get updated or replaced.

I've created a shell in StackBlitz with as much code as I can provide. I don't know of any publicly accessible URL data sources that take a DataManagerRequest as a parameter, so for now those are just placeholder URLs.

StackBlitz

I should note that when the queries for the subsequent DropDownLists get updated, I'm passing a parameter to get the appropriate corresponding data as opposed to using a where clause in the query.

stateObj.query = new ej.data.Query().addParams('CountryId', countryObj.value).take(25);
and
cityObj.query = new ej.data.Query().addParams('StateId', stateObj.value).take(25);

instead of

stateObj.query = new ej.data.Query().where('CountryId', 'equal', countryObj.value);
and
cityObj.query = new ej.data.Query().where('StateId', 'equal', stateObj.value);

Ponmani Murugaiyan · Answer

Hi Josh, 

Currently we are checking your reported query, we will update further details in 2 business days (March 18, 2022). 

Regards, 
Ponmani M

Josh Borgerding · Answer

Thanks Ponmani.  Just to be clear though, the issue isn't with the query.  I've essentially taken the example from the documentation for cascading DropDownLists andChanged the locally stored json datasources in the example to URL datasourcesEnabled the "allowFiltering" propertyThe cascading works the first time a value is selected in the country and state DropDownLists.  But the cascading doesn't seem to function on any follow up changes to the country and state DropDownLists once "allowFiltering" is enabled.  I've tried using the exact same query style (using "where") in the example, and the query style that I mentioned (providing an additional parameter), and the values in the subsequent dropdowns do not update regardless of which style is used.  The correct call gets made to the server, and the correct data gets returned, but the select elements still show the same values as the those that are provided the first time the country and state DropDownLists are changed..

Ponmani Murugaiyan · Answer

Hi Josh, 

We have prepared sample with Dropdownlist component with UrlAdaptor local data by enabling allowFiltering property. Kindly check with the below sample. 

Front end: https://stackblitz.com/edit/cpbym1-vzz9gt?file=index.ts 
Back end: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-621873775     

Regards, 
Ponmani M

Josh Borgerding · Answer

Hi Ponmani,I don't think you fully understand the issue I'm describing.  My issue is not with creating a DropDownList component that uses a URL datasource.  I've done that plenty of times without issue.  The issue that I'm having is with cascading DropDownLists (so the selection from list A updates the data in list B, and the selection from List B updates the data in List C, etc)

and the "allowFiltering" property enabled.  The example that you provided in stackblitz is for a single DropDownList with a URL datasource.Thanks,Josh

Ponmani Murugaiyan · Answer

Hi Josh, 

Currently we are checking your reported query, we will update further details in 2 business days (March 24, 2022) 

Regards, 
Ponmani M

Josh Borgerding · Answer

Any follow up on this?  You said 2 business days and it's now been a week...

Ponmani Murugaiyan · Answer

Hi Josh,We have created a cascading sample with URL datasource based on your requirement . Kindly refer the below code snippet and sample for
your references.[HomeController.cs]

public ActionResult UrlDatasource([FromBody]Data dm) { 
              var val =
  OrdersDetails.GetAllRecords();
             
  var Data = val.ToList();
             
  var cascad = val.ToList();

var count = val.Count();
             
  if (dm.where != null)
             
  {
                 
  Data = (from cust in Data
                         
  where
  cust.ShipCountry.ToLower().StartsWith(dm.@where[0].value.ToString())
                         
  select cust).Distinct().ToList();

if (Data.Count == 0)
                 
  {
                     
  Data = (from cust in cascad
                             
  where cust.ShipCountry.Equals(dm.@where[0].value.ToString())
                             
  select cust).ToList();
                 
  }
             
  }
             
  if (dm.take != 0)
                 
  Data = Data.Take(dm.take).ToList();
             
  return Json(Data);
         
  }

[Index.ts]

// initialize DropDownList
  component
  let dropDownListObj: DropDownList = new DropDownList({
    // bind the DataManager instance to
  dataSource property
    dataSource: new DataManager({
      url: 'https://localhost:44334/Home/UrlDatasource',
      adaptor: new UrlAdaptor(),
      crossDomain: true,
    }),
    // bind the Query instance to query
  property
    query: new Query().distinct('ShipCountry'),
    // map the appropriate columns to
  fields property
    fields: { value: 'ShipCountry' },
    // set the placeholder to
  DropDownList input element
    placeholder: 'Select a country',
    // sort the resulted items
    sortOrder: 'Ascending',
    allowFiltering: true,
    // set the height of the popup
  element
    popupHeight: '200px',
    change: (args) => {
      dropDownListObj1.enabled = true;
      dropDownListObj1.text = null;
      dropDownListObj1.query = new Query()
        .select('CustomerID')
        .where('ShipCountry', 'equal', dropDownListObj.value);
      dropDownListObj1.dataBind();
    },
  });
  dropDownListObj.appendTo('#customers');
   
  let dropDownListObj1: DropDownList = new DropDownList({
    // bind the DataManager instance to
  dataSource property
    dataSource: new DataManager({
      url: 'https://localhost:44334/Home/UrlDatasource',
      adaptor: new UrlAdaptor(),
      crossDomain: true,
    }),
    // bind the Query instance to query
  property
    query: new Query(),
    // map the appropriate columns to
  fields property
    fields: { value: 'CustomerID' },
    // set the placeholder to
  DropDownList input element
    placeholder: 'Select a customer',
    // sort the resulted items
    sortOrder: 'Ascending',
    // set the height of the popup
  element
    popupHeight: '200px',
    enabled: false,
  });
  dropDownListObj1.appendTo('#customers1');

In the above sample we have binded the datasource as per the
selected data in the first dropdown using its change event . So once the value
selected , the respective items related to it will be populated in the second
dropdown.Client app : https://stackblitz.com/edit/61scvb-51kyge?file=index.tsServer App : https://www.syncfusion.com/downloads/support/directtrac/344391/ze/Syncfusion_EJ2_Core_App-503739299
Regards,Ponmani M

Josh Borgerding · Answer

Try adding:

allowFiltering: true,

to the configuration of dropDownListObj1 and see what happens.StackBlitzAlso, I get an access denied error when trying to open the link to the server app download that you provided.

Ponmani Murugaiyan · Answer

Hi Josh,Already we have added the allowFiltering property to the Dropdownlist
component and attached the workable sample for client and server below for reference. Kindly check
with this sample and revert us if you need further assistance.Client App: https://stackblitz.com/edit/61scvb-51kyge?file=index.tsServer App: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion_EJ2_Core_App-883074012Regards,Ponmani M

Josh Borgerding · Answer

Can we setup a Teams call?  Because this does not work.  It works for the initial cascading, like the first time that an item is selected in the parent.  But it does not work each time after that, as I said in the initial forum post: "

the subsequent DropDownLists do not update when the prerequisite DropDownList value changes".I made a screen recording showing that yes, it does work the FIRST time.  And it works when filtering is NOT enabled.  But the nth time, when filtering is enabled, the child dropdowns do not update.Attachment: Cascading_Dropdowns_Filtering_Screen_Recording_f584acb.zip

Ponmani Murugaiyan · Answer

Hi Josh,Currently we are checking your reported query, we will
update further details in 2 business days (April 06, 2022)Regards,Ponmani M

Josh Borgerding · Answer

Again, any follow up on this?  You said 2 business days and it's now been a week...

Also, can this be transferred to somebody within Syncfusion that is more responsive?  I created this almost a month ago and we've gotten nowhere.

Matthew Gulick · Answer

I am having the same issue on a couple remote data source dropdownlists. child dropdowns data is dependent on the parent dropdownlist

selection.On change of the parent dropdownlist selection, the following is performed in the change event Snippetchild.ej2_instances[0].query = new ej.data.Query()
    .addParams("id", document.getElementById("parent").ej2_instances[0].value);this only works if filtering is disabled. In my scenario this is ok, but it is troubling to think that if I need to enable filtering on another control in a similar situation that it won't work.

Vinitha Jeyakumar · Answer

Hi Josh,We have created a ticket for you to discuss about the reported issue. So can you please follow up on the below ticket regarding the reported issue with Cascading Dropdown list.Ticket: https://support.bolddesk.com/agent/tickets/375107Regards,Vinitha

Josh Borgerding · Answer

Vinitha, I received an email about the ticket that was opened below. But as an FYI, see the attached screenshot for what I get when I open the link to the ticket that you provided. It takes me to a BoldDesk login, for which I do not have an account.

Attachment: Syncfusion_BoldDesk_Link_7027c94c.zip

Vinitha Jeyakumar · Answer

Hi Josh,We hope that you can access the ticket now. please follow up on the ticket for further details.Regards,Vinitha

David Dawkins · Answer

Was a solution ever found to Josh's issue?

I'm having a very similar issue with my cascading dropdowns not behaving correctly when allowFiltering is enabled. And I'm unable to view the Bolddesk link above.

Thanks!

Priyanka Karthikeyan · Answer

Hi David Dawkins,

We are pleased to inform you that the fix for the reported issue, "Cascading DropdownList does not get updated data when using a remote data source and allowFiltering is set to true" has been implemented in the weekly patch release version 20.1.57.

We kindly request that you update your NuGet package to the latest version to resolve this issue.

You can find the release notes here:
Release Notes - 20.1.57

For further feedback on this issue, please refer to the link below:
Feedback Link - Cascading DropdownList Issue

If you are using an older version, we recommend upgrading your package to ensure the issue is resolved.

Note :The ticket was previously created under Josh's name, hence you are unable to view the link. Please ignore it.

Regards,

Priyanka K