Cascade ComboBox: RangeError

[Joel]

*How do I troubleshoot this error:  Uncaught RangeError: Maximum call stack size exceeded

I am attempting to cascade/filter my time zones by the selected country.  The country drop-down works fine.  On selection, there is a long pause and the time zones are not populated.  Break points don't stop the code in the "GetTimeZones" method so it seems to not be called.  When I look at the browser tools I see this error.

Controller:

        public async Task<ICollection<Country>> GetCountries()
        {
            var response =
                await countriesClient.GetAllAsync();

            if (response.IsSuccess)
            {
                return response.Result;
            }
            else
            {
                throw new Exception(
                    $"Error getting countries.  {response.Message}");
            }
        }

        public JsonResult GetTimeZones(string countryCode)
        {
            TimeZones timeZones = new TimeZones();
            timeZones.Refresh();

            TimeZones result = timeZones.GetByCountry(countryCode);

            return Json(result);
        }

 

View

            <div class="form-group">
                <label asp-for="Item.CountryCode" class="col-form-label"></label><br />
                <span asp-validation-for="Item.CountryCode" class="text-danger"></span>
                @(Html.Kendo().ComboBox()
                    .Name("countries")
                    .Placeholder("Select Country...")
                    .DataTextField("Name")
                    .DataValueField("Code")
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetCountries", "Persons");
                        });
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>
            <div class="form-group">
                <label asp-for="Item.TimeZoneName" class="col-form-label"></label><br />
                <span asp-validation-for="Item.TimeZoneName" class="text-danger"></span>
                @(Html.Kendo().ComboBox()
                    .Name("timeZones")
                    .Placeholder("Select Time Zone...")
                    .DataTextField("Name")
                    .DataValueField("Code")
                    .Filter(FilterType.Contains)
                    .CascadeFrom("countries")
                    .Enable(false)
                    .AutoBind(false)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetTimeZones", "Persons")
                                .Data("filterTimeZones");
                        });
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>

Part 2:  How do I bind this to the Model?  Do I need to pull the values from these controls in JavaScript to populate the Model?

<input type="submit" value="Save" class="btn-primary btn-default" onclick="showIsBusy()" />

    function showIsBusy() {

        var countryCode = $("#countries").data("kendoComboBox");
        var timeZoneName = $("#timeZones").data("kendoComboBox");

        //alert(countryCode);
        //alert(timeZoneName);

        @Model.Item.CountryCode = countryCode;
        @Model.Item.TimeZoneName = timeZoneName;

        //alert("isBusy");
        $("#isbusy").show();
        $("form").submit();
    }

[Joel]

Please answer my Part 2 question above.  I got part 1 working with this code:

            <div class="form-group">
                <label asp-for="Item.CountryCode" class="col-form-label"></label><br />
                <span asp-validation-for="Item.CountryCode" class="text-danger"></span>
                @(Html.Kendo().ComboBox()
                    .Name("countries")
                    .Placeholder("Select Country...")
                    .DataTextField("Name")
                    .DataValueField("Code")
                    .Filter(FilterType.Contains)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetCountries", "Persons");
                        });
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>
            <div class="form-group">
                <label asp-for="Item.TimeZoneName" class="col-form-label"></label><br />
                <span asp-validation-for="Item.TimeZoneName" class="text-danger"></span>
                @(Html.Kendo().ComboBoxFor(x => x.Item.TimeZoneName)
                    .Placeholder("Select Time Zone...")
                    .DataTextField("DisplayName")
                    .DataValueField("Name")
                    .Filter(FilterType.Contains)
                    .CascadeFrom("countries")
                    .Enable(false)
                    .AutoBind(false)
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetTimeZones", "Persons")
                                .Data("filterTimeZones");
                        }).ServerFiltering(true);
                    }).HtmlAttributes(new { style = "width: 100%" }))
            </div>

        public JsonResult GetTimeZones(string countryCode)
        {
            TimeZones timeZones = new TimeZones();
            timeZones.Refresh();

            TimeZones result = timeZones.GetByCountry(countryCode);

            return Json(result);
        }

[Stoyan]

Hello Joel,

I am glad you were able to solve the first issue by adding .ServerFiltering(true) property configuration to the ComboBox's DataSource.

In regard to the second question - setting Razor Model values is not possible with JavaScript on the client-side because the Model only exists on the server when the Razor engine creates the page response.

To submit the needed values you can either wrap the inputs in a form element or perform a jQuery.ajax request to the Action method of the Controller.

I remain open, should further questions regarding the ComboBox Component arise.

Regards,
Stoyan
Progress Telerik