CascadeFrom not refreshing filtered list

1 Answer 39 Views
ComboBox Form General Discussions Window
Alan
Top achievements
Rank 2
Iron
Iron
Alan asked on 21 May 2022, 10:31 AM | edited on 21 May 2022, 10:33 AM

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.

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 26 May 2022, 05:34 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Alan
Top achievements
Rank 2
Iron
Iron
commented on 26 May 2022, 11:28 AM | edited

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
Telerik team
commented on 31 May 2022, 09:22 AM

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
Top achievements
Rank 2
Iron
Iron
commented on 31 May 2022, 02:58 PM

Excellent!  Thanks Ivan for looking into this and I will try it out soon!
Alan
Top achievements
Rank 2
Iron
Iron
commented on 31 May 2022, 03:25 PM

Well, to my chagrin - I get the same response.  After the initial response, no change.....
Alan
Top achievements
Rank 2
Iron
Iron
commented on 31 May 2022, 03:27 PM

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
Telerik team
commented on 02 Jun 2022, 08:25 AM

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
Top achievements
Rank 2
Iron
Iron
commented on 02 Jun 2022, 11:56 AM

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
Top achievements
Rank 2
Iron
Iron
commented on 02 Jun 2022, 12:44 PM | edited

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
Top achievements
Rank 2
Iron
Iron
commented on 02 Jun 2022, 03:16 PM

I forgot to include the site.css so that the Edit form formatting shows correctly.
Alexander
Telerik team
commented on 07 Jun 2022, 09:45 AM

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
Top achievements
Rank 2
Iron
Iron
commented on 07 Jun 2022, 11:39 AM | edited

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
Telerik team
commented on 10 Jun 2022, 07:39 AM

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.

 

 

Tags
ComboBox Form General Discussions Window
Asked by
Alan
Top achievements
Rank 2
Iron
Iron
Answers by
Yanislav
Telerik team
Share this question
or