CascadeFrom not refreshing filtered list

[Alan]

Here's the definition of the two items that are linked by the CascadeFrom:
                      items.Add().Field(f => f.Country)
                                 .ColSpan(1)
                                 .Name("cmbCountry")
                                 .Editor(e => e.ComboBox()
                                               .AutoWidth(false)
                                               .DataTextField("name")
                                               .DataValueField("id")
                                               .BindTo(@CountryModel.Countries)
                                               .Placeholder("--- Select or Type Country"));
                      items.Add().Field(f => f.StateProvince)
                                 .ColSpan(1)
                                 .Name("cmbStatesProvinces")
                                 .Editor(e => e.ComboBox()
                                               .AutoWidth(false)
                                               .AutoBind(false)
                                               .Placeholder("--- Select State/Province ---")
                                               .DataTextField("name")
                                               .DataValueField("id")
                                               .DataSource(dS => dS.Read(read => read.Action("GetStateList", "Address").Data("filterState")).ServerFiltering(true))
                                               .CascadeFrom("cmbCountry")
                                               @*.BindTo(@StatesProvinces.StateProvince)*@
                                               );

Here's the AddressController.GetStateList:

        public JsonResult GetStateList(string? Country)
        {
            JsonResult? retval = null;
            if (!string.IsNullOrEmpty(Country))
            {   var Country_ID = CountryModel.Countries.Where(s => s.name == Country).ToList()[0].code;
                var State = StatesProvinces.StateProvince.Where(s => s.countryCode == Country_ID);
                retval = Json(State.Select(s => new { id = s.id, name = s.name }).ToList());
            }
            else
                retval = Json(StatesProvinces.StateProvince);
            
            return retval;
        }

 

This works for the first Country that is selected...  afterwards - if the Country is changed, the GetStateList is not called again to refresh the related/CascadeFrom Combobox.

[Yanislav]

Hello Alan,

My recommendation is to check the network tab of the browser dev tools console to see if an error is thrown and what parameters are sent to the server since, as I see from the shared configuration, the controller accepts only one parameter. 

Also, I recommend you review the following demo. It demonstrates how a Cascading ComboBox with server filtering should be implemented:

https://demos.telerik.com/aspnet-mvc/combobox/cascadingcombobox

I hope this helps. 

Regards,
Yanislav
Progress Telerik

[Alan]

That's the demo this is based upon!  Have checked the Network tab of the browser...  I get activity on the very first selection.  Afterwards, it never sends a request back to the controller.

btw, here's the js that the read.Action.Data hooks to:

function filterState()
    { return { Country: $('[name=Country_input]').val() }; }

[Ivan Danchev]

Alan,

The problem is the StateProvince ComboBox tries to cascade from "cmbCountry", instead of from "Country". A ComboBox added as a field editor in a Form gets its name from the field it is bound to. So the parent ComboBox name in this case is "Country".

I've commented out the Name configuration options and set "Country" as value of the CascadeFrom option:

items.Add().Field(f => f.Country)
				.ColSpan(1)
				//.Name("cmbCountry")
				.Editor(e => e.ComboBox()
				.AutoWidth(false)
				.DataTextField("name")
				.DataValueField("id")
				.BindTo(@Model.Countries)
				.Placeholder("--- Select or Type Country"));
items.Add().Field(f => f.StateProvince)
	.ColSpan(1)
	//.Name("cmbStatesProvinces")
	.Editor(e => e.ComboBox()
		.AutoWidth(false)
		.AutoBind(false)
		.Placeholder("--- Select State/Province ---")
		.DataTextField("name")
		.DataValueField("id")
		.DataSource(dS => dS.Read(read => read.Action("GetStateList", "Home").Data("filterState")).ServerFiltering(true))
		.CascadeFrom("Country")
	);

I tested this modification and the cascade functionality works as expected at my end. I've also attached a sample project I tested it in.

[Alan]

Excellent!  Thanks Ivan for looking into this and I will try it out soon!

[Alan]

Well, to my chagrin - I get the same response.  After the initial response, no change.....

[Alan]

I looked over the project that was sent and I have made all the pertinent modifications to match this example and no luck! 

[Ivan Danchev]

Alan,

Could you extract the Form from your project into a sample project similar to the one I attached, but showing the problematic behavior? This will allow us to compare the implementations and check why it doesn't work in your case.

[Alan]

I will certainly try!

Interesting point to make...  I have a SearchForm and an EditForm that deploy this functionality.

Here's the scenario...  we were going back and forth on an edit form that the customer wanted and due to my learning curve I had created a Splitter with 3 panes and moved each to the form objects to separate pane Partial Views to get item grouping the way I wanted....  when I did this and defined the combobox using this syntax:

@(Html.Kendo().ComboBox()
              .Enable(true)
              .FillMode(FillMode.Outline)
              .Placeholder("--- Select State/Province ---")
              .Name("cmbStateProvince")
              .DataValueField("name")
              .DataTextField("name")
              .BindTo(StatesProvinces.StateProvince)
              .HtmlAttributes(new { style = "width:300px;", Layout = "" })
              .Value(AddressController.getStateProvince.ToString()) )

the value property/attribute sets the combobox to the correct value.  when I redesigned the page and went back to a form definition, objects contained in a grid definition,  with this same code block in a combobox editor it stopped working for me???  The rest of the editors load from the model without issue.

[Alan]

I think I got it all put together to where all you have to do is add a Kendo reference and a Newtonsoft reference.  there might be some program.cs changes that need to be made????

Here's the line of code to inject the services class object into the pipeline:

builder.Services.AddSingleton<IvmApiService>(new IvmApiService(builder.Configuration.GetValue("IvmApiToken", ""),builder.Configuration.GetValue("IvmApiBaseUrl", "")));

I would suggest just sending in string.Empty to IvmApiService...  those two parameters are for our HttpClient. 

Additionlly, you'd have to add your own flavor of data to this.

 

BTW, I included the Pane PartialViews where the Combobox is working.

[Alan]

I forgot to include the site.css so that the Edit form formatting shows correctly.

[Alexander]

Hi Alan,

Thank you for the provided resources. It is greatly appreciated.

It seems that the Core project that you sent is not runnable on my side with the following errors occurring:

In addition, I also noticed that the required client-side resources are not included. In this regard, are the required client-side files excluded purposely? 

With that being said, if the issue is revolved around the Telerik UI for ASP.NET Core suite instead, I would recommend opening a new support ticket in order to keep our communication more concise. And adding the sample with all the necessary dependencies, so that it can be run and debug locally on my side.

Thank you for your cooperation in advance.

[Alan]

I included the webClient.cs this time around...  sorry about that!  I don't want to delay this any further.  I didn't purposefully omit the required client-side resources..  I just figured you had those there and there was no real need for me to send them as part of this.   Anyhow, the two combobox references in question are in the Editform.cshtml...  And, they are both bound to their respective List<Model> for their dataSources.  Additionally, this project is compiled in ASP.Net Core 6.0.

[Mihaela]

Hello Alan,

According to the provided sample, the ComboBox editor is bound to the "StatesProvinces", which is a collection List<StatesProvinces>. When the ComobBox uses Model binding, it is required to bound the editor to a Model property specified in the DataValueField option.

For example:

//Model
public class EditModel
{
 public int State { get; set; } //stores the id of the State
}

//Controller
public IActionResult getEditForm(int Id)
 {
           ...
           ViewData["states"] = GetStates(); //store the states as a collection, where the id of the state is "State" and its name is "name"
            return PartialView("~/Views/Address/EditForm.cshtml");
}

//View
items.Add().Field(f => f.State)
.Label(l => l.Text("State/Province"))
.Editor(e => e.ComboBox()
    .Placeholder("--- Enter State/Province ---")
    .Enable(true)
    .FillMode(FillMode.Outline)
    .DataValueField("State")
    .DataTextField("name")
    .BindTo((System.Collections.IEnumerable)ViewData["states"])
    .Rounded(Rounded.Large));  

Also, you can configure the ComboBox to get its data from a remote source by making an AJAX request as is described in this article:

https://docs.telerik.com/aspnet-core/html-helpers/editors/combobox/binding/model-binding#remote-data

I hope that helps.